feat: new component Statistic.Timer#53401
Merged
thinkasany merged 25 commits intoant-design:featurefrom Apr 11, 2025
Merged
Conversation
|
|
Contributor
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the 📝 WalkthroughSummary by CodeRabbit
## Summary by CodeRabbit
- **新功能**
- 新增 Timer 定时器组件，支持倒计时与正计时两种模式，并提供更多配置选项。
- **文档**
- 更新了中英文 API 文档及示例，详细介绍 Timer 组件的属性和用法。
- **重构**
- 弃用旧版 Countdown 组件，建议用户切换至全新 Timer 组件以获得更好的体验。
## Walkthrough
本次变更对原有的 Countdown 组件进行了重构，移除了其内部定时器逻辑，改为调用新组件 StatisticTimer，并在 API 文档、测试用例及导出声明中将 Countdown 重命名为 Timer，同时新增了 type 属性（支持 countdown 与 countup）。工具函数 formatCountdown 重命名为 formatCounter 并增加了 down 参数，用以调整时间差的计算逻辑。此外，还新增了计时器组件的演示说明和示例代码，并添加了废弃提示，指导用户采用新的用法。
## Changes
| 文件 | 变更摘要 |
|----------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------|
| components/statistic/Countdown.tsx | 移除内部定时器逻辑，改为调用 StatisticTimer 组件；添加废弃注释，提示使用 Statistic.Timer 替代 Countdown。 |
| components/statistic/index.en-US.md <br> components/statistic/index.zh-CN.md | 更新 API 文档：将 Countdown 重命名为 Timer，新增 type 属性说明（countdown/countup），并加入废弃警告。 |
| components/statistic/utils.ts | 将 formatCountdown 重命名为 formatCounter，增加 down 参数，并调整计算倒计时或正计时的逻辑。 |
| components/statistic/Timer.tsx | 新增 StatisticTimer 组件，支持倒计时与正计时，集成定时、格式化及 onChange/onFinish 回调逻辑，利用自定义 Hook 实现定时更新。 |
| components/statistic/__tests__/index.test.tsx | 测试用例中将 Countdown 组件替换为 Timer，更新导入类型及事件处理的相关调用。 |
| components/statistic/demo/timer.md <br> components/statistic/demo/timer.tsx | 新增计时器组件的文档与示例代码，展示多种定时功能及响应式布局配置。 |
| components/statistic/index.tsx <br> components/index.ts | 更新导入与导出声明，将 Countdown 替换为 Timer，同时新增 StatisticTimerProps 类型导出。 |
## Sequence Diagram(s)
```mermaid
sequenceDiagram
participant App as 应用程序
participant Timer as StatisticTimer
participant Hook as 定时器钩子
participant Util as formatCounter
App->>Timer: 挂载组件
Timer->>Hook: 启动定时器 (setInterval)
Hook->>Util: 计算时间差
Util-->>Hook: 返回格式化后的时间
Hook->>Timer: 调用 onChange 或 onFinish 回调
Timer->>App: 更新 UI (useForceUpdate)
Note over Timer,Hook: 条件满足时清理定时器 (clearInterval)Possibly related issues
Poem
|
Contributor
|
|
Contributor
👁 Visual Regression Report for PR #53401 Failed ❌
Important There are 6 diffs found in this PR: 🆕
|
More templates
commit: |
Bundle ReportChanges will increase total bundle size by 104 bytes (0.0%) ⬆️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: antd.min-array-pushAssets Changed:
|
Contributor
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (1)
components/statistic/Countdown.tsx (1)
13-63: 💡 Verification agent🧩 Analysis chain
建议添加单元测试
新增的
reverse功能应当有对应的单元测试，以确保功能在各种场景下都能正常工作，尤其是边界条件。
🏁 Script executed:
#!/bin/bash # 查找是否有针对 reverse 功能的测试用例 echo "检查是否存在针对 reverse 功能的测试：" rg -i "test.*reverse" --glob "*.test.ts*" components/statistic/ echo "----------------------------------------" echo "检查现有的 Countdown 测试文件：" fd "Countdown.test" components/Length of output: 296
请补充 reverse 功能的单元测试
目前代码中新增的
reverse功能尚未配套相应的单元测试，这可能导致在处理边界条件或特定场景时存在不可预见的问题。建议您在相关的测试文件中增加详细的测试用例，例如在Countdown.test.tsx中，针对不同场景（正向计时和反向计时）的边界条件进行测试，以保证功能的正确性和稳定性。
🧹 Nitpick comments (1)
components/statistic/Countdown.tsx (1)
40-40: 条件逻辑处理完善定时器启动和停止条件的处理考虑了正向和反向两种模式，逻辑清晰。建议添加简短注释说明条件逻辑，以便其他开发者理解。
- if ((!reverse && timestamp >= Date.now()) || (reverse && timestamp <= Date.now())) { + // 正向模式：目标时间在将来才启动；反向模式：目标时间在过去才启动 + if ((!reverse && timestamp >= Date.now()) || (reverse && timestamp <= Date.now())) { - if ((!reverse && timestamp < Date.now()) || (reverse && timestamp > Date.now())) { + // 正向模式：目标时间已过期则停止；反向模式：理论上不会发生，保留以确保完整性 + if ((!reverse && timestamp < Date.now()) || (reverse && timestamp > Date.now())) {Also applies to: 45-45
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (2)
components/statistic/__tests__/__snapshots__/demo-extend.test.ts.snapis excluded by!**/*.snapcomponents/statistic/__tests__/__snapshots__/demo.test.ts.snapis excluded by!**/*.snap
📒 Files selected for processing (5)
components/statistic/Countdown.tsx(4 hunks)components/statistic/demo/countdown.tsx(2 hunks)components/statistic/index.en-US.md(1 hunks)components/statistic/index.zh-CN.md(1 hunks)components/statistic/utils.ts(1 hunks)
🧰 Additional context used
🧬 Code Definitions (1)
components/statistic/Countdown.tsx (1)
components/statistic/utils.ts (1)
formatCountdown(62-69)
⏰ Context from checks skipped due to timeout of 90000ms (12)
- GitHub Check: test-react-latest-dist (dist-min, 2/2)
- GitHub Check: test-react-latest-dist (dist-min, 1/2)
- GitHub Check: test-react-latest-dist (dist, 2/2)
- GitHub Check: test-react-latest-dist (dist, 1/2)
- GitHub Check: test-react-legacy (17, 2/2)
- GitHub Check: test-react-legacy (17, 1/2)
- GitHub Check: test-react-legacy (16, 2/2)
- GitHub Check: test-react-latest (dom, 2/2)
- GitHub Check: test-react-legacy (16, 1/2)
- GitHub Check: test-react-latest (dom, 1/2)
- GitHub Check: visual-diff snapshot (2/2)
- GitHub Check: visual-diff snapshot (1/2)
🔇 Additional comments (10)
components/statistic/index.zh-CN.md (1)
59-59: API 文档更新正确参数描述清晰准确，类型定义和默认值设置合理。
components/statistic/index.en-US.md (1)
58-58: API 文档更新正确英文描述"reverse time counter"准确表达了该功能的作用，类型、默认值和版本号标注都很恰当。
components/statistic/utils.ts (1)
62-66: 逻辑实现正确
formatCountdown函数改动合理，增加了reverse参数并正确实现了正反向计时的逻辑差异。时间差值计算
diff = Math.max(reverse ? current - target : target - current, 0)能够根据reverse参数灵活切换计时方向，同时保证差值不为负数。components/statistic/demo/countdown.tsx (3)
8-8: 变量命名合理
before变量命名直观地表示这是一个过去的时间点，用于演示反向计时功能。
28-33: 示例展示完整这两个示例展示了正向和反向计时的对比效果，有助于用户理解新功能。其中
reverse属性的使用方式清晰明了。
37-39: 格式化示例展示完整此示例展示了带有格式化的反向计时，完善了功能演示。
components/statistic/Countdown.tsx (4)
13-13: 很好的接口扩展！
reverse属性的添加使倒计时组件更加灵活，能够满足从过去时间点开始计时的需求。
24-24: 默认值设置合理为
reverse属性设置默认值为false保证了向后兼容性，现有代码无需修改即可继续使用。
43-44: 时间差计算处理正确根据
reverse属性计算时间差的逻辑正确，反向模式下计算当前时间与目标时间的差值，正向模式下计算目标时间与当前时间的差值。
63-63: 格式化函数参数传递完整将
reverse参数正确传递给formatCountdown函数，确保时间格式化能够根据计时方向正确处理。
zombieJ
reviewed
Apr 3, 2025
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## feature #53401 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 771 772 +1
Lines 13908 13914 +6
Branches 3664 3666 +2
=========================================
+ Hits 13908 13914 +6 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Member
|
参考这个 API：#36223 |
Contributor
Author
要直接改成 Timer 么，这个改动会不会有点大，感觉完全是个新的组件了 |
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
components/statistic/Countdown.tsx(4 hunks)
🧰 Additional context used
🧬 Code Definitions (1)
components/statistic/Countdown.tsx (1)
components/statistic/utils.ts (1)
formatCountdown(62-69)
⏰ Context from checks skipped due to timeout of 90000ms (12)
- GitHub Check: test-react-latest-dist (dist-min, 2/2)
- GitHub Check: test-react-latest-dist (dist-min, 1/2)
- GitHub Check: test-react-latest-dist (dist, 2/2)
- GitHub Check: test-react-latest-dist (dist, 1/2)
- GitHub Check: test-react-latest (dom, 2/2)
- GitHub Check: test-react-latest (dom, 1/2)
- GitHub Check: test-react-legacy (17, 2/2)
- GitHub Check: test-react-legacy (17, 1/2)
- GitHub Check: test-react-legacy (16, 2/2)
- GitHub Check: test-react-legacy (16, 1/2)
- GitHub Check: visual-diff snapshot (2/2)
- GitHub Check: visual-diff snapshot (1/2)
🔇 Additional comments (4)
components/statistic/Countdown.tsx (4)
13-13: 增加了reverse属性，很好的功能扩展。这个新增的可选属性让倒计时组件更加灵活，可以支持从过去时间点开始的正向计时。
24-24: 属性解构支持新增的reverse属性，并提供合理的默认值。很好的实现了向后兼容性，默认值为
false保证了原有功能不受影响。
40-41: 建议将重复的Date.now()调用提取为变量根据之前的代码评审建议，interval 中有多处
Date.now()调用，建议提取为一个变量，使代码更简洁易读。const syncTimer = () => { const timestamp = getTime(value); const now = Date.now(); if ((!reverse && timestamp >= now) || (reverse && timestamp <= now)) { countdown.current = setInterval(() => { - const now = Date.now(); + const currentTime = Date.now(); forceUpdate(); - const timeDiff = reverse ? now - timestamp : timestamp - now; + const timeDiff = reverse ? currentTime - timestamp : timestamp - currentTime; onChange?.(timeDiff); - if ((!reverse && timestamp < now) || (reverse && timestamp > now)) { + if ((!reverse && timestamp < currentTime) || (reverse && timestamp > currentTime)) { stopTimer(); } }, REFRESH_INTERVAL); } };
65-65: 正确传递了reverse参数到formatCountdown函数确保了格式化逻辑与计时方向一致，很好。
li-jia-nan
reviewed
Apr 3, 2025
Member
目标就是增加一个新组件，来同时支持正向/倒向的计时功能。 |
Contributor
Author
大佬看看这样改对么 |
afc163
reviewed
Apr 8, 2025
Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com> Signed-off-by: mr-chenguang <37072324+lcgash@users.noreply.github.com>
Member
|
https://github.com/ant-design/ant-design/actions/runs/14329441476/job/40161861632?pr=53401 |
thinkasany
reviewed
Apr 8, 2025
thinkasany
reviewed
Apr 11, 2025
thinkasany
reviewed
Apr 11, 2025
zombieJ
reviewed
Apr 11, 2025
zombieJ
reviewed
Apr 11, 2025
zombieJ
reviewed
Apr 11, 2025
thinkasany
reviewed
Apr 11, 2025
thinkasany
reviewed
Apr 11, 2025
thinkasany
approved these changes
Apr 11, 2025
Contributor
|
🎉 Thank you for your contribution! If you have not yet joined our DingTalk community group, please feel free to join us (when joining, please provide the link to this PR). 🎉 感谢您的贡献！如果您还没有加入钉钉社区群，请扫描下方二维码加入我们（加群时请提供此 PR 链接）。 
|
Member
|
@lcgash Thanks for your contributions！ |
This was referenced Apr 15, 2025
Closed
This was referenced May 6, 2025
Merged
17 tasks
1 task
1 task
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
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.
🤔 这个变动的性质是？
🔗 相关 Issue
#53399
close #36223
💡 需求背景和解决方案
有些场景是需要正计时的，比如从某个时间点过去了多久这样的展示
📝 更新日志