feat: Progress bar with customizable colors #363
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
概述演练这个更改引入了通知组件进度条颜色的自定义功能。通过添加一个新的可选属性 变更
序列图sequenceDiagram
participant User
participant Notification
participant NoticeComponent
participant StyleSystem
User->>Notification: 调用通知并设置progressBarColor
Notification->>NoticeComponent: 传递颜色参数
NoticeComponent->>StyleSystem: 应用CSS变量
StyleSystem-->>NoticeComponent: 渲染带有自定义颜色的进度条
诗歌
✨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (6)
docs/examples/showProgress.tsx (1)
31-40: 建议改进示例代码的展示方式示例代码可以更全面地展示
progressBarColor的使用方式：
- 展示多种颜色格式（HEX、RGB、HSL等）
- 添加更多示例按钮以展示不同颜色效果
- 使用更具语义化的颜色值
<button onClick={() => { notice.open({ content: `${new Date().toISOString()}`, - progressBarColor: 'yellow', + progressBarColor: '#1890ff', }); }} > - Show Progress Bar with custom color + Show Blue Progress Bar </button> + <button + onClick={() => { + notice.open({ + content: `${new Date().toISOString()}`, + progressBarColor: 'rgb(82, 196, 26)', + }); + }} + > + Show Green Progress Bar + </button>src/interface.ts (1)
11-11: 建议改进类型定义和文档
progressBarColor的类型定义可以更严格和清晰：
- 添加 JSDoc 文档说明支持的颜色格式
- 考虑使用更严格的类型定义来限制有效的颜色值
- progressBarColor?: string; + /** + * 进度条颜色。支持以下格式： + * - 关键字颜色名称：'blue', 'red' 等 + * - HEX 格式：'#1890ff' + * - RGB 格式：'rgb(24, 144, 255)' + * - HSL 格式：'hsl(215, 100%, 50%)' + */ + progressBarColor?: React.CSSProperties['color'];src/Notice.tsx (2)
44-44: 建议添加颜色值验证建议添加颜色值验证逻辑，以防止无效的颜色值导致样式问题。
+ const isValidColor = (color: string) => { + const s = new Option().style; + s.color = color; + return s.color !== ''; + }; + - const mergedProgressBarColor = mergedShowProgress && progressBarColor; + const mergedProgressBarColor = mergedShowProgress && progressBarColor && + isValidColor(progressBarColor) ? progressBarColor : undefined;
173-178: 建议优化无障碍性能为进度条添加 ARIA 属性以提升无障碍性能。
<progress ref={progressRef} className={`${noticePrefixCls}-progress`} max="100" value={validPercent} + role="progressbar" + aria-valuemin="0" + aria-valuemax="100" + aria-valuenow={validPercent} >assets/index.less (1)
107-107: CSS 变量实现进度条颜色自定义使用 CSS 自定义属性实现进度条颜色的动态配置是一个很好的方案。建议考虑以下优化：
- 为颜色变量添加 fallback 值以提高兼容性
- 考虑添加浏览器前缀以支持更多浏览器
- --progress-color: #31afff; + --progress-color: var(--progress-color, #31afff);Also applies to: 115-115, 119-119
tests/index.test.tsx (1)
853-891: 测试用例完整性良好测试用例覆盖了以下关键场景：
- 自定义纯色进度条
- 渐变色进度条
建议添加以下测试场景：
- 无效颜色值的处理
- 动态更新颜色的情况
- 浏览器兼容性边缘情况
it('should handle invalid color values gracefully', () => { const { instance } = renderDemo({ duration: 1, showProgress: true, progressBarColor: 'invalid-color', }); act(() => { instance.open({ content: <p className="test">1</p>, }); }); expect(document.querySelector('.rc-notification-notice-progress')).toHaveStyle({ '--progress-color': 'invalid-color', }); }); it('should update progress bar color dynamically', () => { const { instance } = renderDemo({ duration: 1, showProgress: true, progressBarColor: 'red', }); act(() => { instance.open({ content: <p className="test">1</p>, progressBarColor: 'blue', }); }); expect(document.querySelector('.rc-notification-notice-progress')).toHaveStyle({ '--progress-color': 'blue', }); });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
assets/index.less(1 hunks)docs/examples/showProgress.tsx(1 hunks)src/Notice.tsx(4 hunks)src/hooks/useNotification.tsx(1 hunks)src/interface.ts(1 hunks)tests/index.test.tsx(1 hunks)
🔇 Additional comments (1)
src/hooks/useNotification.tsx (1)
21-21: 代码变更正确且符合预期
progressBarColor属性的添加符合接口设计规范，且不影响现有功能。
Comment on lines
+107
to
+111
| React.useEffect(() => { | ||
| if (mergedProgressBarColor) { | ||
| progressRef.current!.style.setProperty('--progress-color', mergedProgressBarColor); | ||
| } | ||
| }, [mergedProgressBarColor]); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议优化 useEffect 的实现方式
当前实现存在以下问题：
- 直接操作 DOM 不符合 React 最佳实践
- 可能存在内存泄漏风险
建议使用 React 的 style 属性来设置颜色：
- React.useEffect(() => {
- if (mergedProgressBarColor) {
- progressRef.current!.style.setProperty('--progress-color', mergedProgressBarColor);
- }
- }, [mergedProgressBarColor]);
// 在 progress 元素上直接使用 style
<progress
- ref={progressRef}
className={`${noticePrefixCls}-progress`}
+ style={{ '--progress-color': mergedProgressBarColor }}
max="100"
value={validPercent}
>Committable suggestion skipped: line range outside the PR's diff.
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #363 +/- ##
=======================================
Coverage 99.73% 99.74%
=======================================
Files 7 7
Lines 759 774 +15
Branches 123 126 +3
=======================================
+ Hits 757 772 +15
Misses 2 2 ☔ View full report in Codecov by Sentry. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
New feature for #52268
Summary by CodeRabbit
新功能
测试
样式
--progress-color以控制进度条颜色