Fix swipe action#1516
Conversation
dosubot
Bot
added
the
size:L
|
Caution Review failedThe pull request is closed. 📝 Walkthrough概览在 Checkbox 和 Radio 组件中将模板名称从 "checkbox-item" 和 "radio-item" 分别重命名为 "checkbox" 和 "radio"，并更新相应的使用方式。SwipeAction 组件增强了触摸结束事件的状态重置逻辑。 变更表
代码审查工作量评估🎯 2 (简单) | ⏱️ ~12 分钟 变更主要为一致性的模板重命名和结构调整，虽涉及多个文件但改动模式相似且重复性强。SwipeAction 的状态重置扩展为独立的逻辑补充，无复杂依赖关系。 相关 PR
建议标签
兔兔的庆祝诗
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (3)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Summary of ChangesHello @rayhomie, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request primarily addresses a functional issue within the Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
|
🎊 PR Preview 88e8133 has been successfully built and deployed to https://ant-design-ant-design-mini-preview-pr-1516.surge.sh 🕐 Build time: 308.524s
🤖 By surge-preview |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
The pull request modifies the Checkbox and Radio components to use a new template structure and updates the SwipeAction component to reset swipe states on touch end. The changes aim to improve code organization and fix a potential issue where swipe actions might not reset correctly.
| <template name="checkbox"> | ||
| <view class="ant-checkbox-item-wrap"> | ||
| <!-- #if WECHAT --> | ||
| <checkbox-group bindchange="onChange"> | ||
| <checkbox | ||
| class="ant-checkbox-item-base" | ||
| value="{{ value }}" | ||
| onChange="onChange" | ||
| checked="{{ mixin.value }}" | ||
| disabled="{{ disabled }}" /> | ||
| <!-- #endif --> | ||
| <view class="ant-checkbox-item-fake"> | ||
| <view | ||
| class="ant-checkbox-item-fake-{{ componentUtils.getClassName(mixin.value, disabled) }}" | ||
| style="{{ mixin.value && !disabled && color ? 'background:' + color : '' }}"> | ||
| <ant-icon | ||
| a:if="{{ mixin.value }}" | ||
| type="CheckOutline" | ||
| className="ant-checkbox-item-fake-{{ componentUtils.getClassName(mixin.value, disabled) }}-icon" /> | ||
| </view> | ||
| </checkbox-group> | ||
| <!-- #endif --> | ||
| <!-- #if ALIPAY --> | ||
| <checkbox | ||
| class="ant-checkbox-item-base" | ||
| value="{{ value }}" | ||
| onChange="onChange" | ||
| checked="{{ mixin.value }}" | ||
| disabled="{{ disabled }}" /> | ||
| <!-- #endif --> | ||
| <view class="ant-checkbox-item-fake"> | ||
| <view | ||
| class="ant-checkbox-item-fake-{{ componentUtils.getClassName(mixin.value, disabled) }}" | ||
| style="{{ mixin.value && !disabled && color ? 'background:' + color : '' }}"> | ||
| <ant-icon | ||
| a:if="{{ mixin.value }}" | ||
| type="CheckOutline" | ||
| className="ant-checkbox-item-fake-{{ componentUtils.getClassName(mixin.value, disabled) }}-icon" /> | ||
| </view> | ||
| </view> | ||
| <view | ||
| class="ant-checkbox-item-content {{ disabled ? 'ant-checkbox-item-disabled' : '' }}"> | ||
| <slot /> | ||
| </view> | ||
| </view> | ||
| </template> |
There was a problem hiding this comment.
The template name has been changed from checkbox-item to checkbox. Ensure all references to this template are updated accordingly in other files to avoid breaking changes. This is a critical change that could break the component if not handled correctly.
<template name="checkbox-item">
<view class="ant-checkbox-item-wrap">
<!-- #if WECHAT -->
<checkbox-group bindchange="onChange">
<checkbox
class="ant-checkbox-item-base"
value="{{ value }}"
checked="{{ mixin.value }}"
disabled="{{ disabled }}" />
</checkbox-group>
<!-- #endif -->
<!-- #if ALIPAY -->
<checkbox
class="ant-checkbox-item-base"
value="{{ value }}"
onChange="onChange"
checked="{{ mixin.value }}"
disabled="{{ disabled }}" />
<!-- #endif -->
<view class="ant-checkbox-item-fake">
<view
class="ant-checkbox-item-fake-{{ componentUtils.getClassName(mixin.value, disabled) }}"
style="{{ mixin.value && !disabled && color ? 'background:' + color : '' }}">
<ant-icon
a:if="{{ mixin.value }}"
type="CheckOutline"
className="ant-checkbox-item-fake-{{ componentUtils.getClassName(mixin.value, disabled) }}-icon" />
</view>
</view>
</view>
</template>
| <template name="radio"> | ||
| <view class="ant-radio-item-wrap"> | ||
| <!-- #if ALIPAY --> | ||
| <radio | ||
| value="{{ value }}" | ||
| class="ant-radio-item-base" | ||
| onChange="onChange" | ||
| checked="{{ mixin.value }}" | ||
| disabled="{{ disabled }}" /> | ||
| <!-- #endif --> | ||
| <!-- #if WECHAT --> | ||
| <radio | ||
| value="{{ value }}" | ||
| class="ant-radio-item-base" | ||
| checked="{{ mixin.value }}" | ||
| disabled="{{ disabled }}" /> | ||
| <!-- #endif --> | ||
| <view class="ant-radio-item-fake"> | ||
| <view | ||
| class="ant-radio-item-fake-{{ componentUtils.getClassName(mixin.value, disabled) }}" | ||
| style="{{ mixin.value && !disabled && color ? 'background:' + color : '' }}"> | ||
| <ant-icon | ||
| a:if="{{ mixin.value }}" | ||
| type="CheckOutline" | ||
| className="ant-radio-item-fake-{{ componentUtils.getClassName(mixin.value, disabled) }}-icon" /> | ||
| </view> | ||
| </view> | ||
| <view | ||
| class="ant-radio-item-content {{ disabled ? 'ant-radio-item-disabled' : '' }}"> | ||
| <slot /> | ||
| </view> | ||
| </view> | ||
| </template> |
There was a problem hiding this comment.
The template name has been changed from radio-item to radio. Ensure all references to this template are updated accordingly in other files to avoid breaking changes. This is a critical change that could break the component if not handled correctly.
<template name="radio-item">
<view class="ant-radio-item-container">
<view class="ant-radio-item-wrap">
<!-- #if ALIPAY -->
<radio
value="{{ value }}"
class="ant-radio-item-base"
onChange="onChange"
checked="{{ mixin.value }}"
disabled="{{ disabled }}" />
<!-- #endif -->
<!-- #if WECHAT -->
<radio
value="{{ value }}"
class="ant-radio-item-base"
checked="{{ mixin.value }}"
disabled="{{ disabled }}" />
<!-- #endif -->
<view class="ant-radio-item-fake">
<view
class="ant-radio-item-fake-{{ componentUtils.getClassName(mixin.value, disabled) }}"
style="{{ mixin.value && !disabled && color ? 'background:' + color : '' }}">
<ant-icon
a:if="{{ mixin.value }}"
type="CheckOutline"
className="ant-radio-item-fake-{{ componentUtils.getClassName(mixin.value, disabled) }}-icon" />
</view>
</view>
</view>
<view
class="ant-radio-item-content {{ disabled ? 'ant-radio-item-disabled' : '' }}">
<slot />
</view>
</view>
</template>
| disabled, | ||
| color | ||
| }}" | ||
| /> | ||
| <view class="ant-checkbox-item-content {{ disabled ? 'ant-checkbox-item-disabled' : '' }}"> | ||
| <slot /> | ||
| </view> | ||
| </view> | ||
| </label> |
There was a problem hiding this comment.
The checkbox template is now wrapped inside ant-checkbox-item-container. This change affects the structure of the component. Verify that the styling and layout are still correct and that this change doesn't introduce any regressions. This structural change is significant and requires careful verification.
| is="radio" | ||
| data="{{ | ||
| value, | ||
| mixin, | ||
| disabled, | ||
| color | ||
| }}" | ||
| /> | ||
| <view class="ant-radio-item-content {{ disabled ? 'ant-radio-item-disabled' : '' }}"> |
There was a problem hiding this comment.
The radio template is now wrapped inside ant-radio-item-container. This change affects the structure of the component. Verify that the styling and layout are still correct and that this change doesn't introduce any regressions. This structural change is significant and requires careful verification.
| this.onChangeEnd(e); | ||
| } | ||
| this.setData({ inTouch: false }); | ||
| this.setData({ inTouch: false, swipedL: false, swipedR: false }); |
There was a problem hiding this comment.
Adding swipedL: false, swipedR: false to the setData call in onTouchEnd ensures that the swipe action is fully reset when the touch ends. This prevents the component from remaining in a swiped state unintentionally. This is a critical fix for the swipe action's reliability.
| this.setData({ inTouch: false, swipedL: false, swipedR: false }); | |
| this.setData({ inTouch: false }); |
1 participant
Summary by CodeRabbit
发布说明
Bug Fixes
Refactor