feat: Switch support classnames and styles #157
Conversation
Walkthrough此次变更为 Changes
Sequence Diagram(s)sequenceDiagram
participant P as Parent Component
participant S as Switch Component
participant E as Rendered Element
participant T as Test Runner
P->>S: 传入 styles 与 classNames 属性
S->>E: 渲染 checked/unChecked children，附加自定义样式与类名
T->>S: 执行测试，验证 E 的样式和类名
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/index.tsxOops! Something went wrong! :( ESLint: 8.57.1 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. tests/index.spec.jsOops! Something went wrong! :( ESLint: 8.57.1 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. ✨ Finishing Touches
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/index.tsx (1)
106-117: 建议为选中和未选中状态提供独立的样式配置当前实现将相同的样式应用于选中和未选中状态，这可能限制了组件的自定义能力。建议将样式配置分离：
interface SwitchProps { - styles?: { content: React.CSSProperties }; - classNames?: { content: string }; + styles?: { + checkedContent?: React.CSSProperties; + uncheckedContent?: React.CSSProperties; + }; + classNames?: { + checkedContent?: string; + uncheckedContent?: string; + }; }相应的 JSX 更新：
<span - className={classNames(`${prefixCls}-inner-checked`, switchClassNames?.content)} - style={styles?.content} + className={classNames(`${prefixCls}-inner-checked`, switchClassNames?.checkedContent)} + style={styles?.checkedContent} > {checkedChildren} </span> <span - className={classNames(`${prefixCls}-inner-unchecked`, switchClassNames?.content)} - style={styles?.content} + className={classNames(`${prefixCls}-inner-unchecked`, switchClassNames?.uncheckedContent)} + style={styles?.uncheckedContent} > {unCheckedChildren} </span>tests/index.spec.js (1)
132-140: 建议增加更多测试用例当前测试用例仅验证了基本的样式应用，建议添加以下测试场景：
- 验证样式在切换状态时的正确性
- 验证自定义类名与默认类名的组合
- 验证样式属性的响应式更新
it('should apply different styles for checked and unchecked states', () => { const wrapper = createSwitch({ classNames: { checkedContent: 'custom-checked', uncheckedContent: 'custom-unchecked' }, styles: { checkedContent: { background: 'green' }, uncheckedContent: { background: 'red' } } }); // 验证未选中状态 expect(wrapper.find('.custom-unchecked').prop('style')).toEqual({ background: 'red' }); // 切换到选中状态 wrapper.simulate('click'); expect(wrapper.find('.custom-checked').prop('style')).toEqual({ background: 'green' }); }); it('should combine custom classNames with default classNames', () => { const wrapper = createSwitch({ classNames: { content: 'custom-content' } }); const element = wrapper.find('.rc-switch-inner-unchecked.custom-content'); expect(element.exists()).toBe(true); }); it('should update styles when props change', () => { const wrapper = createSwitch({ styles: { content: { background: 'red' } } }); wrapper.setProps({ styles: { content: { background: 'blue' } } }); expect(wrapper.find('.rc-switch-inner-unchecked').prop('style')) .toEqual({ background: 'blue' }); });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/index.tsx(3 hunks)tests/index.spec.js(1 hunks)
🔇 Additional comments (2)
src/index.tsx (2)
28-29: 接口定义清晰且类型完整！新增的
styles和classNames属性定义合理，类型声明准确。
46-47: 属性解构命名合理！将
classNames重命名为switchClassNames可以避免与classnames工具函数产生命名冲突。
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #157 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 1 1
Lines 51 57 +6
Branches 7 11 +4
=========================================
+ Hits 51 57 +6 ☔ View full report in Codecov by Sentry. |
Summary by CodeRabbit