feat: support classnames and styles #1128
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough此次变更在多个组件中新增和调整了自定义样式和类名的属性。通过在 Changes
Possibly related PRs
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/BaseSelect/index.tsxOops! Something went wrong! :( ESLint: 8.57.1 Error: Cannot read config file: /.eslintrc.js
src/Select.tsxOops! Something went wrong! :( ESLint: 8.57.1 Error: Cannot read config file: /.eslintrc.js
Tip ⚡🧪 Multi-step agentic review comment chat (experimental)
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (1)
🔇 Additional comments (6)
✨ Finishing Touches
🪧 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 (
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #1128 +/- ##
=======================================
Coverage 98.26% 98.26%
=======================================
Files 39 39
Lines 1499 1501 +2
Branches 424 426 +2
=======================================
+ Hits 1473 1475 +2
Misses 26 26 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
src/Select.tsx
Outdated
| @@ -107,6 +107,7 @@ export type SelectHandler<ValueType, OptionType extends BaseOptionType = Default | |||
|
|
|||
| type ArrayElementType<T> = T extends (infer E)[] ? E : T; | |||
|
|
|||
| export type SemanticName = 'prefix' | 'suffix'; | |||
There was a problem hiding this comment.
感觉有点少，结构上应该是和 Mentions 差不多:
- root
- prefix
- suffix
- input
- popup
- list
- item
- tag (多选时的展示内容，这个名字不一定好)
There was a problem hiding this comment.
ps: 这个搞了 TreeSelect 和 Cascade 除了 option list 应该都是共用的
There was a problem hiding this comment.
tag 或许可以用 selection， 我先用 tag 好了，等后面在讨论一下，对应修改。先写具体逻辑。
There was a problem hiding this comment.
其实有 tagRender 或许可以不提供这个，不然还得去改 rc-overflow
目前做到这样子好像够用了。
|
备注： |
![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/Select.tsx (2)
110-162: 考虑扩展 SemanticName 类型定义根据之前的讨论，组件结构中还应该包含 'root'、'popup' 和 'tag'（多选时的展示内容）这些部分。建议考虑将这些语义名称也添加到 SemanticName 类型中，使样式自定义更加完整。
可以这样扩展类型定义：
-export type SemanticName = 'prefix' | 'suffix' | 'item' | 'list' | 'input'; +export type SemanticName = 'root' | 'prefix' | 'suffix' | 'item' | 'list' | 'input' | 'popup' | 'tag';
161-162: 添加 JSDoc 注释以提高代码可读性建议为新增的属性添加 JSDoc 注释，清晰说明其用途和使用方法，这将有助于其他开发者理解如何使用这些新功能。
+/** + * 为选择器的不同部分提供自定义类名 + */ classNames?: Partial<Record<SemanticName, string>>; +/** + * 为选择器的不同部分提供自定义样式 + */ styles?: Partial<Record<SemanticName, React.CSSProperties>>;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/Select.tsx(4 hunks)
🔇 Additional comments (5)
src/Select.tsx (5)
110-110: 新增 SemanticName 类型定义，用于支持自定义样式这个导出类型很好地定义了可以自定义样式的组件部分，包括 'prefix'、'suffix'、'item'、'list' 和 'input'。这为用户提供了明确的接口来理解哪些部分可以被自定义。
161-162: 为 SelectProps 接口增加了自定义样式和类名的能力添加了两个新属性，使组件具有更细粒度的样式自定义能力：
classNames: 允许为不同的语义部分设置自定义类名styles: 允许为不同的语义部分设置自定义样式这些属性的类型定义正确，使用
Partial<Record<SemanticName, ...>>结构确保了类型安全。
210-212: 从 props 中解构新增的样式属性正确地将
classNames重命名为selectClassNames，避免了可能的命名冲突。
633-635: 将自定义样式属性添加到 SelectContext通过将
classNames和styles添加到 context 中，子组件可以访问这些样式配置，实现了样式的向下传递。
637-639: 更新 useMemo 依赖数组，确保样式变更时重新计算正确地将
selectClassNames和styles添加到依赖数组中，确保这些属性变更时会触发 context 的重新计算。
src/Select.tsx
Outdated
| @@ -107,6 +107,7 @@ export type SelectHandler<ValueType, OptionType extends BaseOptionType = Default | |||
|
|
|||
| type ArrayElementType<T> = T extends (infer E)[] ? E : T; | |||
|
|
|||
| export type SemanticName = 'prefix' | 'suffix' | 'item' | 'list' | 'input'; | |||
src/BaseSelect/index.tsx
Outdated
| @@ -131,6 +132,8 @@ export type BaseSelectPropsWithoutPrivate = Omit<BaseSelectProps, keyof BaseSele | |||
| export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttributes { | |||
| className?: string; | |||
| style?: React.CSSProperties; | |||
| classNames?: Partial<Record<SemanticName, string>>; | |||
There was a problem hiding this comment.
BaseSelect 里不应该反向引用 Select 的定义，因为 TreeSelect 和 Cascader 里是没有这个的。BaseSelect 应该只有 'prefix' | 'suffix' | 'input'，然后 Select 里拓展出来
Summary by CodeRabbit
TransBtn组件新增可选样式属性，支持用户传递自定义样式。Selector组件新增前缀类名和前缀样式属性，增强其自定义选项。OptionList组件增强了对上下文样式的支持，允许更灵活的样式应用。Input组件集成了上下文支持，增强了动态样式的应用能力。