feat: tab support classnames and styles #784
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
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
src/TabNavList/index.tsxOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-react". (The package "eslint-plugin-react" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-react" was referenced from the config file in ".eslintrc.js » /node_modules/.pnpm/@umijs+fabric@4.0.1_jest@29.7.0_@types+node@22.13.4__postcss@8.5.3/node_modules/@umijs/fabric/dist/eslint.js". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. 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: 0
🧹 Nitpick comments (2)
src/TabNavList/index.tsx (1)
425-428: 应用自定义类名和样式到标签项为标签项添加自定义类名和样式支持，同时保持原有的样式逻辑。建议添加注释说明样式的优先级和合并策略。
className={tabsClassNames?.item} /* first node should not have margin left */ -style={i === 0 ? styles?.item : { ...tabNodeStyle, ...styles?.item }} +// 自定义样式优先级高于默认样式 +style={i === 0 ? styles?.item : { ...tabNodeStyle, ...styles?.item }}tests/index.test.tsx (1)
692-716: 完善类名和样式的测试用例测试用例完整验证了自定义类名和样式的功能，建议补充以下场景的测试：
- 动态更新样式和类名
- 样式优先级
- 空值处理
建议添加如下测试场景：
// 测试动态更新 it('should update styles and classNames dynamically', () => { const { container, rerender } = render( <Tabs items={[{ key: 'test', label: 'test' }]} styles={{ item: { color: 'blue' } }} classNames={{ item: 'custom-item' }} /> ); // 验证初始样式 const item = container.querySelector('.rc-tabs-tab'); expect(item).toHaveStyle({ color: 'blue' }); expect(item).toHaveClass('custom-item'); // 更新样式 rerender( <Tabs items={[{ key: 'test', label: 'test' }]} styles={{ item: { color: 'red' } }} classNames={{ item: 'new-item' }} /> ); // 验证更新后的样式 expect(item).toHaveStyle({ color: 'red' }); expect(item).toHaveClass('new-item'); }); // 测试空值处理 it('should handle empty styles and classNames', () => { const { container } = render( <Tabs items={[{ key: 'test', label: 'test' }]} styles={{}} classNames={{}} /> ); const item = container.querySelector('.rc-tabs-tab'); expect(item).toBeInTheDocument(); });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
src/TabNavList/OperationNode.tsx(4 hunks)src/TabNavList/TabNode.tsx(3 hunks)src/TabNavList/index.tsx(5 hunks)src/Tabs.tsx(3 hunks)tests/index.test.tsx(1 hunks)tests/overflow.test.tsx(3 hunks)
🔇 Additional comments (13)
src/TabNavList/TabNode.tsx (2)
27-27: 新增 className 属性以支持自定义样式为
TabNodeProps接口添加了可选的className属性，增强了组件的样式定制能力。
86-91: 正确集成了 className 属性使用
classNames工具函数合并了默认类名和自定义类名，保持了良好的样式继承性。src/Tabs.tsx (3)
37-37: 引入语义化样式类型定义新增
SemanticName类型，用于定义标签页组件中不同部分的语义化样式标识。
44-45: 增强样式定制能力新增两个属性以支持更细粒度的样式定制：
classNames: 用于定制不同部分的类名styles: 用于定制不同部分的内联样式
188-190: 优化弹出层样式处理逻辑合理地整合了弹出层的类名和样式属性，使用
classNames工具函数确保样式正确合并。src/TabNavList/OperationNode.tsx (2)
29-29: 支持弹出层样式定制为
OperationNodeProps接口添加了styles属性，支持自定义弹出层样式。
187-199: 优化下拉菜单样式处理改进了下拉菜单的样式应用逻辑：
- 使用
classNames合并类名- 通过
overlayStyle应用自定义样式tests/overflow.test.tsx (2)
509-515: 完善样式相关测试用例扩展了弹出层样式测试，验证：
- 自定义类名
custom-popup- 语义化类名
classnames-popup- 内联样式
{ color: 'red' }
526-528: 验证样式应用正确性全面测试了样式应用结果：
- 验证自定义类名存在
- 验证语义化类名存在
- 验证内联样式正确应用
src/TabNavList/index.tsx (4)
33-33: 导入 SemanticName 类型以支持语义化样式从 Tabs 组件导入 SemanticName 类型，用于类名和样式的语义化定制。
59-60: 新增类名和样式的类型定义使用 Partial 类型来定义可选的语义化类名和样式属性，提供了良好的类型安全性和灵活性。
115-116: 解构新增的样式属性在组件参数中解构 classNames 和 styles 属性，并使用更具语义化的命名 tabsClassNames。
616-620: 完善指示器的样式定制为指示器添加自定义类名和样式支持，保持动画效果的同时支持样式定制。
src/TabNavList/OperationNode.tsx
Outdated
| @@ -26,6 +26,7 @@ export interface OperationNodeProps { | |||
| tabMoving?: boolean; | |||
| getPopupContainer?: (node: HTMLElement) => HTMLElement; | |||
| popupClassName?: string; | |||
| styles?: { popup?: React.CSSProperties }; | |||
There was a problem hiding this comment.
只要一个 popup 就够了吗？ Tab 应该还有 item 的
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #784 +/- ##
=======================================
Coverage 98.96% 98.96%
=======================================
Files 18 18
Lines 772 772
Branches 224 227 +3
=======================================
Hits 764 764
Misses 8 8 ☔ View full report in Codecov by Sentry. |
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (1)
src/TabNavList/index.tsx (1)
1-644: 💡 Verification agent❓ Verification inconclusive
验证新增属性的类型安全性
建议添加类型测试以确保
classNames和styles属性只接受有效的语义名称。
🏁 Script executed:
#!/bin/bash # 搜索是否存在相关的类型测试 rg -t typescript "describe.*TabNavList.*types?" tests/Length of output: 91
请重新验证类型测试覆盖情况
当前使用的rg -t typescript命令因文件类型 “typescript” 未被识别而没有产生预期输出。建议改为搜索所有 TypeScript 测试文件以确认是否存在针对TabNavList组件的类型测试。请运行下面的新脚本以验证是否存在相关测试代码：
🏁 Script executed:
#!/bin/bash # 使用 -g "*.ts" 参数在 tests 目录中搜索包含 TabNavList 类型测试描述的测试代码 rg "describe.*TabNavList.*types?" -g "*.ts" tests/Length of output: 52
请补充类型测试以确保
classNames和styles属性的类型安全性
目前在 tests 目录下未搜索到针对TabNavList组件中classNames和styles属性的类型测试代码。为确保这两个属性只接受有效的语义名称，建议添加如下类型测试：
- 为组件传入无效的语义名称时应触发 TypeScript 错误
- 确认传入正确的语义名称时，不会报错
这将有助于在未来避免因属性值不符合预期而引起的问题。
🧹 Nitpick comments (1)
src/TabNavList/index.tsx (1)
425-427: 建议优化样式合并逻辑当前实现在处理第一个标签页的样式时使用了条件运算符，可以通过优化合并逻辑使代码更简洁。
建议修改为：
-style={i === 0 ? styles?.item : { ...tabNodeStyle, ...styles?.item }} +style={{ ...(i === 0 ? {} : tabNodeStyle), ...styles?.item }}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/TabNavList/index.tsx(5 hunks)
🔇 Additional comments (2)
src/TabNavList/index.tsx (2)
33-33: 新增的类型和接口定义清晰且符合预期接口设计合理，使用
Partial<Record>允许用户只定义需要的样式和类名。Also applies to: 59-60
616-619: 指示器样式实现正确且优雅样式和类名的应用方式正确，同时保持了原有的动画功能。
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/TabNavList/index.tsx (2)
115-116: 解构属性命名需要优化将
classNames重命名为tabsClassNames是个好的实践，但styles也应该遵循同样的命名模式以保持一致性。建议修改为：
- styles, + tabsStyles,
425-427: 样式合并逻辑需要优化当前的样式合并逻辑对第一个节点做了特殊处理，但实现方式不够优雅。
建议修改为：
- style={i === 0 ? styles?.item : { ...tabNodeStyle, ...styles?.item }} + style={{ ...(i !== 0 ? tabNodeStyle : {}), ...styles?.item }}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/TabNavList/index.tsx(6 hunks)
🔇 Additional comments (3)
src/TabNavList/index.tsx (3)
33-33: 新增的类型和接口属性定义清晰且合理接口扩展通过
SemanticName类型为不同的组件部分提供了样式自定义能力，设计合理。Also applies to: 59-60
616-620: 指示器样式实现合理指示器的类名和样式合并逻辑实现得当，保持了良好的扩展性。
633-633: 弹出层样式传递正确
OperationNode组件的popupStyle属性传递正确。
Summary by CodeRabbit