feat: support creating different format value by range index #932
Conversation
| The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough本次更改为 RangePicker 组件引入了自定义格式化示例，并将自定义格式化函数的签名扩展为支持索引参数。相关类型定义、工具函数和钩子均已同步调整，以便格式化函数能够接收并利用日期项的索引信息。 Changes
Sequence Diagram(s)sequenceDiagram participant User participant RangePicker participant formatValue participant CustomFormat User->>RangePicker: 选择日期范围 RangePicker->>formatValue: formatValue(date, { format, index }) formatValue->>CustomFormat: CustomFormat(date, index) CustomFormat-->>formatValue: 返回格式化字符串 formatValue-->>RangePicker: 返回格式化结果 RangePicker-->>User: 显示格式化后的日期文本 Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
src/PickerInput/Selector/hooks/useInputProps.tsOops! Something went wrong! :( ESLint: 8.57.1 Error: Cannot read config file: /.eslintrc.js
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ 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. 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: 0
🧹 Nitpick comments (1)
docs/examples/range.tsx (1)
205-215: 很好的功能演示示例这个示例清晰地展示了如何使用索引参数对范围选择器的开始和结束日期应用不同的格式。实现简洁明了，很好地说明了新功能的用法。
不过建议考虑格式化逻辑的一致性：对于年份选择器，两个日期都使用
YYYY格式可能更合理。format={(date, index) => { - return index === 0 ? date.format('YYYY') : date.format('YYYY-MM-DD'); + return index === 0 ? date.format('YYYY') : date.format('YYYY'); }}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
docs/examples/range.tsx(1 hunks)src/PickerInput/Selector/hooks/useInputProps.ts(2 hunks)src/interface.tsx(1 hunks)src/utils/dateUtil.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
src/PickerInput/Selector/hooks/useInputProps.ts (1)
src/utils/dateUtil.ts (1)
formatValue(229-250)
src/utils/dateUtil.ts (2)
src/generate/index.ts (1)
GenerateConfig(1-46)src/interface.tsx (2)
Locale(6-84)CustomFormat(284-284)
🔇 Additional comments (5)
src/interface.tsx (1)
284-284: 类型签名更新合理，支持按范围索引格式化
CustomFormat类型新增的index参数能够让格式化函数区分日期在范围中的位置，这为实现不同的开始和结束日期格式提供了基础。类型定义清晰明确。src/PickerInput/Selector/hooks/useInputProps.ts (2)
89-90: 正确实现索引参数传递
getText回调函数的签名更新合理，能够将索引参数正确传递给formatValue函数，确保格式化函数能够获取到位置信息。
101-101: 合理的默认索引值为
firstFormat函数调用传递索引 0 是合理的，因为这里是在计算输入框大小时使用第一个格式。这保持了与现有逻辑的一致性。src/utils/dateUtil.ts (2)
235-241: 良好的向后兼容性设计为
index参数提供默认值 0 确保了向后兼容性，同时类型定义也正确地将其标记为可选参数。这种设计允许现有代码无缝继续工作。
247-249: 正确的条件格式化实现当
format为函数时正确传递index参数，当为字符串时使用原有的格式化逻辑。这种实现方式确保了功能的正确性和兼容性。
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@ ## master #932 +/- ## ======================================= Coverage 98.80% 98.80% ======================================= Files 65 65 Lines 2669 2670 +1 Branches 742 716 -26 ======================================= + Hits 2637 2638 +1 Misses 29 29 Partials 3 3 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
2 participants
在特殊业务场景下，我需要为RangPicker的起始时间和结束时间采用不同的格式化：
现有的api似乎无法做到，结合目前的format prop设计，只要将range的索引传递给customFormat即可实现：
Preview:
Summary by CodeRabbit