-
-
Notifications
You must be signed in to change notification settings - Fork 998
fix(sender): 修复loadingButton传入icon属性时同时显示两个图标 #1145
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. Important Review skippedReview was skipped due to path filters ⛔ Files ignored due to path filters (25)
CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including You can disable this status message by setting the 📝 WalkthroughWalkthrough将 LoadingButton 中对加载图标的用法从作为 ActionButton 的子元素传递,改为通过 icon 属性传入,并将 ActionButton 改为自闭合。其他属性与行为未改动,导出接口未变化。 Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Assessment against linked issues
Assessment against linked issues: Out-of-scope changes(无) Poem
✨ Finishing Touches🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Summary of Changes
Hello @IsDyh01, 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!
此拉取请求旨在修复 LoadingButton 组件中的一个视觉缺陷。该缺陷导致在特定情况下,按钮会错误地显示两个图标。通过调整组件内部图标的渲染方式,确保了 LoadingButton 在任何情况下都能正确且一致地显示其加载图标,提升了用户界面的整洁性和准确性。
Highlights
- 修复
LoadingButton图标显示问题: 解决了当LoadingButton组件接收icon属性时,同时显示两个图标的错误行为。 - 代码实现调整: 将
StopLoadingIcon直接作为ActionButton的icon属性传入,而不是作为其子元素渲染,从而确保图标的正确显示。
Using Gemini Code Assist
The 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 in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in issue comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
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 .gemini/ folder in the base of the repository. Detailed instructions can be found here.
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
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Code Review
您好,感谢您的贡献。本次提交正确地修复了 LoadingButton 在接收 icon 属性时会显示两个图标的 bug。将默认图标从 children 移至 icon 属性,可以确保外部传入的 icon 能够正确地覆盖默认值。我只发现了一个与 children 属性相关的潜在问题,并提供了一个建议来增强代码的健壮性。总体而言,这是一个很好的修复。
| <ActionButton | ||
| icon={null} | ||
| icon={<StopLoadingIcon className={`${prefixCls}-loading-icon`} />} | ||
| color="primary" | ||
| variant="text" | ||
| shape="circle" | ||
| {...props} | ||
| className={classNames(className, `${prefixCls}-loading-button`)} | ||
| action="onCancel" | ||
| ref={ref} | ||
| > | ||
| <StopLoadingIcon className={`${prefixCls}-loading-icon`} /> | ||
| </ActionButton> | ||
| /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
感谢您的修复,这确实解决了重复图标的问题。
不过,我注意到这个改动可能会引入一个未预期的行为变更。在之前的实现中,传递给 LoadingButton 的 children 属性会被忽略。但在修改后,如果外部给 LoadingButton 传递了 children,它们会被渲染出来。
考虑到 LoadingButton 是一个圆形的加载状态按钮,通常不应该包含除图标外的其他子元素。为了保持行为一致性并防止潜在的 UI 错乱,建议显式地覆盖 children 属性,以确保它不会被渲染。
<ActionButton
icon={<StopLoadingIcon className={`${prefixCls}-loading-icon`} />}
color="primary"
variant="text"
shape="circle"
{...props}
className={classNames(className, `${prefixCls}-loading-button`)}
action="onCancel"
ref={ref}
children={undefined}
/>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
🧹 Nitpick comments (1)
components/sender/components/LoadingButton.tsx (1)
13-21: 补充用例:自定义 icon 时应只渲染一个图标请添加回归测试覆盖两种场景:1) 传入自定义
icon时,不应再出现带有-loading-icon的默认图标;2) 不传入icon时,应渲染一次默认StopLoadingIcon。我可以基于 React Testing Library 起草如下测试骨架:
import { render } from '@testing-library/react'; import LoadingButton from './LoadingButton'; import { ActionButtonContext } from './ActionButton'; const prefixCls = 'ant-x-sender'; test('renders only custom icon when provided', () => { const { container, getByTestId } = render( <ActionButtonContext.Provider value={{ prefixCls }}> <LoadingButton icon={<span data-testid="custom-icon" />} /> </ActionButtonContext.Provider>, ); expect(getByTestId('custom-icon')).toBeInTheDocument(); expect(container.querySelectorAll(`.${prefixCls}-loading-icon`).length).toBe(0); }); test('renders default loading icon when no custom icon', () => { const { container } = render( <ActionButtonContext.Provider value={{ prefixCls }}> <LoadingButton /> </ActionButtonContext.Provider>, ); expect(container.querySelectorAll(`.${prefixCls}-loading-icon`).length).toBe(1); });需要我直接提交一个测试 PR 吗?
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
components/sender/components/LoadingButton.tsx(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: build preview
- GitHub Check: test / react component workflow
- GitHub Check: size
🔇 Additional comments (2)
components/sender/components/LoadingButton.tsx (2)
13-21: 修复点正确:用 icon 属性替代 children、自闭合标签,消除了“双图标”问题同时将
{...props}放在后面,确保用户传入的icon优先级更高,符合“自定义 icon 只显示一次”的预期。LGTM。
11-21: 建议显式合并用户 icon,避免依赖属性覆盖顺序的隐式语义当前写法正确但可读性稍弱。建议解构
props.icon,显式计算mergedIcon,并改用restProps,读者一眼可见“用户 icon 优先,其次默认 StopLoadingIcon”。[ suggest_optional_refactor ]
在本段范围内可按以下 diff 修改:- <ActionButton - icon={<StopLoadingIcon className={`${prefixCls}-loading-icon`} />} + <ActionButton + icon={mergedIcon} color="primary" variant="text" shape="circle" - {...props} + {...restProps} className={classNames(className, `${prefixCls}-loading-button`)} action="onCancel" ref={ref} />此外,需要在本段之外补充两行(示例放在 Line 10 之后):
// outside this hunk const { icon: userIcon, className, ...restProps } = props; const mergedIcon = userIcon ?? <StopLoadingIcon className={`${prefixCls}-loading-icon`} />;
|
@kimteayon 麻烦看下这个loadingButton可以这么改吗 |
当然可以这么修改,不过需要解决下test 失败问题 |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #1145 +/- ##
=======================================
Coverage 92.45% 92.45%
=======================================
Files 69 69
Lines 1577 1577
Branches 426 410 -16
=======================================
Hits 1458 1458
Misses 119 119 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
@kimteayon 嗯嗯解决了 |
|
我将会尽快发新版本 |
* fix(sender): 修复loadingButton传入icon属性时同时显示两个图标 * chore: update snapshot * chore: update snapshot

中文版模板 / Chinese template
🤔 This is a ...
🔗 Related Issues
fix #543
当前行为:

更新后的行为:

💡 Background and Solution
📝 Change Log
Summary by CodeRabbit