feat: support name prop to enable grouping
#284
Conversation
Walkthrough此次更改引入了一个新的 React 组件 Changes
Assessment against linked issues
Possibly related PRs
Poem
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
🧹 Outside diff range and nitpick comments (2)
docs/demo/name.tsx (1)
5-17: 建议增强示例的实用性当前示例虽然展示了
name属性的基本用法，但建议通过以下方式增强演示效果：
- 添加多个 Segmented 组件来展示分组功能
- 展示
name属性在表单中的实际应用场景export default function App() { return ( <div> <div className="wrapper"> <Segmented name="group" options={['iOS', 'Android', 'Web']} onChange={(value) => console.log(value, typeof value)} /> + <Segmented + name="group" + options={['开发版', '测试版', '正式版']} + onChange={(value) => console.log(value, typeof value)} + /> </div> </div> ); }docs/example.md (1)
35-38: 文档结构清晰，格式规范！新增的
name示例部分保持了与其他示例相同的文档结构和格式规范，便于用户查阅和理解。建议在该部分添加简要说明，以帮助用户更好地理解
name属性的用途和使用场景。示例：
## name + +用于设置分组的名称，使多个 Segmented 组件能够进行分组管理。 <code src="./demo/name.tsx"></code>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (3)
docs/demo/name.tsx(1 hunks)docs/example.md(1 hunks)src/index.tsx(6 hunks)
🔇 Additional comments (3)
docs/demo/name.tsx (1)
1-3: 导入声明看起来很合理！
导入语句简洁明了，包含了必要的依赖项。
src/index.tsx (2)
43-43: 接口定义正确且完整
name 属性的添加符合 TypeScript 接口定义规范，使用可选属性标记很恰当。
82-82: 验证 name 属性的传递链路
name 属性在组件层级间的传递实现正确，并且成功应用到了 radio input 元素上。建议验证以下几点：
- 在表单提交时，确认 name 分组功能正常工作
- 测试多个 Segmented 组件使用相同或不同 name 值的场景
- 确保与现有表单库的兼容性
Also applies to: 95-95, 112-112, 142-142, 216-216
| <Segmented | ||
| name="group" | ||
| options={['iOS', 'Android', 'Web']} | ||
| onChange={(value) => console.log(value, typeof value)} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
优化 onChange 处理函数
建议移除 console.log，改用更实用的状态管理方式来展示选中值的变化。
- onChange={(value) => console.log(value, typeof value)}
+ onChange={(value) => {
+ // 在实际应用中更新状态
+ setSelectedPlatform(value);
+ }}Committable suggestion skipped: line range outside the PR's diff.
|
@zombieJ 佬，空的时候帮忙review一下~ |
|
加个测试用例 |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #284 +/- ##
=======================================
Coverage 99.21% 99.21%
=======================================
Files 2 2
Lines 127 127
Branches 29 29
=======================================
Hits 126 126
Misses 1 1 ☔ View full report in Codecov by Sentry. 🚨 Try these New Features:
|
@afc163 done |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (1)
tests/index.test.tsx (1)
654-665: 测试用例实现正确，建议补充边界场景测试测试用例正确验证了
name属性的基本功能，确保所有单选输入框都能正确接收name属性值。建议添加以下测试场景以提高覆盖率：
- 验证
name属性为空字符串的情况- 验证动态更新
name属性的情况- 验证带有禁用选项时的
name属性传递示例代码：
it('should handle empty name property', () => { const { container } = render( <Segmented options={['iOS', 'Android', 'Web']} name="" />, ); container .querySelectorAll<HTMLInputElement>('input[type="radio"]') .forEach((el) => { expect(el.name).toEqual(''); }); }); it('should handle name property updates', () => { const { container, rerender } = render( <Segmented options={['iOS', 'Android', 'Web']} name="group1" />, ); rerender(<Segmented options={['iOS', 'Android', 'Web']} name="group2" />); container .querySelectorAll<HTMLInputElement>('input[type="radio"]') .forEach((el) => { expect(el.name).toEqual('group2'); }); }); it('should handle name property with disabled options', () => { const { container } = render( <Segmented options={[ 'iOS', { label: 'Android', value: 'Android', disabled: true }, 'Web' ]} name="group" />, ); container .querySelectorAll<HTMLInputElement>('input[type="radio"]') .forEach((el) => { expect(el.name).toEqual('group'); }); });
close ant-design/ant-design#51698
Summary by CodeRabbit
Summary by CodeRabbit
App组件，包含分段选择功能，支持选择 'iOS'、'Android' 和 'Web' 选项。Segmented组件现在支持可选的name属性，以便对单选按钮进行分组。docs/example.md，增加了新部分和代码引用。Segmented组件生成的所有单选输入元素是否具有指定的name属性。