feat(circle,line): enable indeterminate mode #216
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #216 +/- ##
==========================================
+ Coverage 99.36% 99.41% +0.05%
==========================================
Files 6 8 +2
Lines 157 172 +15
Branches 50 52 +2
==========================================
+ Hits 156 171 +15
Misses 1 1 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
👍 |
|
Rebase please |
|
@yoyo837 Done 😄 |
|
code coverage is down. |
|
Hi, will this be merged anytime soon? |
|
|
""" Walkthrough此次变更为进度组件引入了新的 Changes
Sequence Diagram(s)sequenceDiagram
participant U as 用户
participant C as 进度组件 (Circle/Line)
participant T as 工具函数 (getIndeterminate...)
U->>C: 传入 loading=true 渲染组件
C->>T: 调用工具函数获取样式和动画
T-->>C: 返回 indeterminate 样式和动画
C->>C: 合并样式并渲染包含动画的 SVG
Note over C: 不确定加载状态激活
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
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: 3
🧹 Nitpick comments (6)
docs/examples/loading.tsx (1)
4-11: 建议完善示例组件建议增加以下场景的演示：
- 不设置 percent 属性时的加载状态
- percent 为不同值时的加载效果
- 添加错误处理，验证 percent 的有效范围
建议按如下方式修改代码：
const Loading = () => { return ( <div style={{ margin: 10, width: 200 }}> - <Circle loading percent={10} /> - <Line loading percent={50} /> + <Circle loading /> + <Circle loading percent={10} /> + <Circle loading percent={50} /> + <Line loading /> + <Line loading percent={30} /> + <Line loading percent={70} /> </div> ); };src/utils/getIndeterminateCircle.tsx (1)
20-22: 建议将动画时间和缓动函数设置为可配置项当前动画时间是硬编码的 1s，建议将其作为配置项，以支持不同的动画速度需求。同时建议添加缓动函数以使动画更流畅。
建议修改如下：
indeterminateStyleProps: { transform: 'rotate(0deg)', - animation: `${animationName} 1s linear infinite`, + animation: `${animationName} ${duration}s ${easing} infinite`, },src/utils/getIndeterminateLine.tsx (2)
20-20: 建议简化 strokeDashOffset 的计算逻辑当前计算逻辑较为复杂，可以提取为一个独立的函数以提高可读性。
建议修改如下：
+ const calculateStrokeDashOffset = ( + percent: number, + strokeLinecap: StrokeLinecapType, + strokeWidth: number, + ): number => { + const roundStrokeOffset = strokeLinecap === 'round' ? strokeWidth : 0; + return 100 - (percent + roundStrokeOffset); + }; - const strokeDashOffset = 100 - (percent + (strokeLinecap === 'round' ? strokeWidth : 0)); + const strokeDashOffset = calculateStrokeDashOffset(percent, strokeLinecap, strokeWidth);
24-26: 建议将动画参数设置为可配置项与圆形进度条类似，建议将动画时间和缓动函数设置为可配置项。
建议修改如下：
indeterminateStyleProps: { strokeDasharray: `${percent} 100`, - animation: `${animationName} .6s linear alternate infinite`, + animation: `${animationName} ${duration}s ${easing} alternate infinite`, strokeDashoffset: 0, },src/Circle/index.tsx (1)
103-103: 建议优化样式合并逻辑当前的样式合并方式可能会在某些边缘情况下出现问题。建议使用更健壮的合并策略：
-style={{ ...circleStyleForStack, ...indeterminateStyleProps }} +style={loading ? { ...circleStyleForStack, ...indeterminateStyleProps } : circleStyleForStack}README.md (1)
139-144: 新增 loading 属性文档描述审核在表格中增加的 loading 属性描述简洁明了，已正确标明类型（Boolean）、默认值（false）以及功能说明。不过建议可以稍微扩展描述，例如添加一句说明当 loading 为 true 时，组件将展示不确定进度状态的动画效果，从而帮助用户更直观地理解该属性的用途。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
tests/__snapshots__/index.spec.js.snapis excluded by!**/*.snap
📒 Files selected for processing (10)
README.md(1 hunks)docs/demo/loading.md(1 hunks)docs/examples/loading.tsx(1 hunks)src/Circle/index.tsx(5 hunks)src/Line.tsx(5 hunks)src/common.ts(1 hunks)src/interface.ts(1 hunks)src/utils/getIndeterminateCircle.tsx(1 hunks)src/utils/getIndeterminateLine.tsx(1 hunks)tests/index.spec.js(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- docs/demo/loading.md
🔇 Additional comments (5)
src/interface.ts (1)
17-17: 接口定义符合规范新增的 loading 属性定义清晰，类型正确，且保持了可选特性，符合 TypeScript 最佳实践。
src/common.ts (1)
13-13: 新增的 loading 属性设置合理！默认值设置为 false 符合 React 布尔属性的最佳实践。
src/Line.tsx (2)
43-49: getIndeterminateLine 的使用恰当！良好地将不确定状态的样式逻辑抽离到工具函数中。
86-86: 建议添加 loading 状态的单元测试用例虽然已经添加了基本的测试，但建议增加以下场景的测试：
- loading 状态切换时的动画效果
- loading 和 percent 属性同时存在时的行为
Also applies to: 111-111
src/Circle/index.tsx (1)
56-59: 实现与 Line 组件保持一致，值得赞赏！良好地保持了组件间的一致性，使用相同的模式处理 loading 状态。
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
tests/indeterminate.spec.tsx (4)
1-4: 移除未使用的导入
waitFor导入后未在测试中使用，建议移除以保持代码整洁。应用以下修改：
import React from 'react'; import { Circle, Line } from '../src'; -import { render, waitFor } from '@testing-library/react'; +import { render } from '@testing-library/react';🧰 Tools
🪛 ESLint
[error] 3-3: 'waitFor' is defined but never used.
(@typescript-eslint/no-unused-vars)
6-30: 建议增加边界测试用例当前测试覆盖了基本场景，建议添加以下边界情况的测试：
- 负数百分比
- 大于100的百分比
loading属性在组件生命周期中的动态变化需要我帮您生成这些测试用例的代码吗？
32-57: 建议添加错误处理测试建议添加以下错误场景的测试：
- 在加载状态下组件卸载的情况
- 动画相关的浏览器兼容性检查
- 样式计算失败的容错处理
需要我帮您生成这些测试用例的代码吗？
5-57: 测试结构清晰，覆盖了主要功能测试代码组织良好，验证了不确定模式的核心功能。建议考虑：
- 添加测试用例描述文档
- 提取常用的测试工具函数
- 添加性能相关的测试用例
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/utils/getIndeterminateCircle.tsx(1 hunks)src/utils/getIndeterminateLine.tsx(1 hunks)tests/indeterminate.spec.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- src/utils/getIndeterminateCircle.tsx
- src/utils/getIndeterminateLine.tsx
🧰 Additional context used
🪛 ESLint
tests/indeterminate.spec.tsx
[error] 3-3: 'waitFor' is defined but never used.
(@typescript-eslint/no-unused-vars)
|
@afc163 done please check |
|
If you wonder why i updated the test snapshot, it is due to useId state (id is undefined at first render) and that's impact useTransitionDuration that executes to quickly which return 0s 0s we already have the same behaviour on Circle snapshot which is already (0s, 0s) At any case, we must update snapshot, even if we fix useId to have an initial value. |
This is an enhancement for the request #84 it enables the indeterminate mode when the user does not define the percent property for both components circle and line.
Summary by CodeRabbit
新功能
文档
测试