feat: support classNames and styles #587
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough本次更改为 Cascader 组件引入了自定义样式和类名的能力。通过在组件属性中新增 Changes
Sequence Diagram(s)sequenceDiagram
participant Demo
participant Cascader
participant Context
participant BaseSelect
participant OptionList
Demo->>Cascader: 传递 classNames/styles/prefix/suffixIcon props
Cascader->>Context: 通过 context 提供 classNames/styles
Cascader->>BaseSelect: 传递 classNames/styles
BaseSelect->>OptionList: 渲染弹出列表
OptionList->>OptionList: 合并并应用 classNames/styles 到 ul/li
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
examples/search.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. src/Cascader.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. src/OptionList/Column.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.
✨ Finishing Touches
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:
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)
src/Cascader.tsx (1)
394-395: 将样式属性添加到上下文中将
classNames和styles添加到上下文对象中，使其可以在整个组件树中使用，这是一个良好的做法。不过，这些属性未被包含在依赖数组（412-428行）中，这可能导致上下文在这些属性更新时不会重新计算。
考虑将
classNames和styles添加到cascaderContext的依赖数组中：[ + classNames, + styles, mergedOptions, mergedFieldNames, // ...其他依赖项 ],
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
examples/search.tsx(2 hunks)src/Cascader.tsx(7 hunks)src/OptionList/Column.tsx(4 hunks)src/context.ts(1 hunks)tests/semantic.spec.tsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
src/context.ts (1)
src/Cascader.tsx (1)
CascaderProps(151-169)
🔇 Additional comments (14)
src/context.ts (1)
25-26: 新增了样式自定义支持在
CascaderContextProps接口中添加了classNames和styles属性，与CascaderProps保持一致，使得自定义样式和类名能够通过上下文传递到组件树的更深层次。这种设计允许开发者更灵活地自定义组件各部分的样式。examples/search.tsx (2)
5-19: 新增样式和类名定义结构清晰为 Cascader 组件定义了
testClassNames和testStyles对象，结构清晰地展示了组件各部分（前缀、后缀、输入框、弹出列表及列表项）的样式自定义能力。这些常量对使用者理解如何构造自定义样式对象很有帮助。
86-89: 正确演示了新增属性的使用方法为 Cascader 组件添加了
prefix、suffixIcon、classNames和styles属性，完整展示了新功能的使用方法。这些示例对开发者了解如何使用新增的自定义样式功能非常有帮助。tests/semantic.spec.tsx (1)
6-53: 测试用例全面覆盖样式和类名自定义功能测试用例全面验证了 Cascader 组件对样式和类名自定义的支持。通过检查各个元素（input、prefix、suffix、list、listItem）是否正确应用了自定义样式和类名，确保了功能的正确性。测试结构清晰，断言明确，是一个优秀的测试案例。
src/OptionList/Column.tsx (5)
1-1: 将 classnames 库的导入别名从 classNames 改为 cls修改了 classnames 库的导入别名，避免与新增的 context 属性
classNames产生命名冲突。这是一个必要的修改，确保代码清晰可读。
56-58: 从上下文中获取新增的样式属性从 CascaderContext 中解构出新增的
classNames和styles属性，为后续应用这些样式做准备。这符合 React 的上下文使用模式。
122-127: 正确应用弹出列表的自定义样式和类名为弹出列表（ul 元素）应用了从上下文获取的自定义类名和样式，使用
cls函数合并默认类名与自定义类名，保证了样式的正确应用和扩展性。
173-174: 正确应用列表项的自定义类名为列表项（li 元素）应用了从上下文获取的自定义类名，同时保留了原有的条件类名逻辑，确保了自定义类名与组件内部状态类名的共存。
180-180: 正确应用列表项的自定义样式为列表项应用了自定义样式，通过对象展开运算符合并原有样式与自定义样式，确保了样式的正确应用和优先级。
src/Cascader.tsx (5)
149-150: 新增语义化类型定义，提高类型安全性这两个类型定义清晰地描述了可以自定义样式的组件部分，增强了代码的类型安全性和可读性。
156-161: 新增样式和类名自定义属性，增强组件可定制性通过引入
styles和classNames属性，组件现在支持对不同部分（输入框、前缀、后缀、弹出列表及列表项）进行样式自定义。类型定义良好，结构清晰，符合React组件的最佳实践。
227-229: 从props中提取新增的样式属性正确地从组件props中提取了新增的
classNames和styles属性以供后续使用。
456-465: 将样式和类名属性传递给BaseSelect组件这段代码正确地将相关的样式和类名属性传递给了BaseSelect组件，使用了适当的属性映射结构。只传递了与BaseSelect相关的属性（prefix, suffix, input），这是一个良好的做法。
439-444: 优化弹出层最小宽度样式这个小调整优化了空内容状态下的弹出层样式，保持了与搜索结果匹配时的一致行为。
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #587 +/- ##
=======================================
Coverage 99.83% 99.83%
=======================================
Files 23 23
Lines 610 610
Branches 186 186
=======================================
Hits 609 609
Misses 1 1 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Summary by CodeRabbit
新功能
测试