feat: Add attribute itemRender to 'segmented' #301
Conversation
|
""" Walkthrough新增了 Changes
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
tests/index.test.tsxOops! Something went wrong! :( ESLint: 7.32.0 ESLint couldn't find the config "prettier" to extend from. Please check that the name of the config is correct. The config "prettier" was referenced from the config file in "/.eslintrc.js". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. 📜 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: 1
🧹 Nitpick comments (1)
src/index.tsx (1)
101-105: 建议优化类型定义结构当前使用交叉类型的方式可以工作，但可以考虑更清晰的接口继承方式来提高可读性。
可以考虑以下重构：
-const InternalSegmentedOption: React.FC< - { - itemRender?: (node: React.ReactNode, itemInfo: ItemInfo) => React.ReactNode; - } & ItemInfo -> = (props) => { +interface InternalSegmentedOptionProps extends ItemInfo { + itemRender?: (node: React.ReactNode, itemInfo: ItemInfo) => React.ReactNode; +} + +const InternalSegmentedOption: React.FC<InternalSegmentedOptionProps> = (props) => {
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/index.tsx(6 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
src/index.tsx
[error] 168-168: Avoid the delete operator which can impact performance.
Unsafe fix: Use an undefined assignment instead.
(lint/performance/noDelete)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: WIP
🔇 Additional comments (6)
src/index.tsx (6)
47-47: itemRender 属性签名设计合理新增的
itemRender属性提供了node和itemInfo两个参数，很好地解决了之前评论中提到的问题——如何知道要渲染的是哪个 item。通过ItemInfo对象提供了完整的上下文信息。
78-99: ItemInfo 接口设计完善
ItemInfo接口包含了渲染自定义内容所需的所有必要信息，包括样式、状态、事件处理器等。这个设计有助于用户在自定义渲染时获得完整的上下文。
118-118: 默认实现符合最佳实践为
itemRender提供默认的恒等函数实现是很好的做法，确保了组件的向后兼容性。
132-166: 渲染逻辑重构合理将 JSX 内容提取到
ItemContent变量中，然后通过itemRender函数处理，这种模式符合 React 的渲染属性模式最佳实践。
189-189: 正确地转发 itemRender 属性在主组件中正确地解构并准备转发
itemRender属性给子组件。
314-314: 属性传递实现正确正确地将
itemRender属性传递给每个InternalSegmentedOption实例，确保自定义渲染功能能够正常工作。
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #301 +/- ##
==========================================
+ Coverage 99.37% 99.39% +0.01%
==========================================
Files 2 2
Lines 161 164 +3
Branches 40 39 -1
==========================================
+ Hits 160 163 +3
Misses 1 1 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
EmilyyyLiu
changed the title
src/index.tsx
Outdated
| disabled?: boolean; | ||
| checked: boolean; | ||
| label: React.ReactNode; | ||
| title?: string; |
增加 itemRender 属性，用来渲染自定义label内容
Summary by CodeRabbit
新功能
itemRender，允许自定义每个选项内容的渲染方式。测试
itemRender属性的单元测试，确保自定义渲染和默认渲染均正常工作。