feat: support classNames and styles #1261
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
""" Walkthrough本次变更主要为 Table 组件及其相关子组件引入了对自定义 classNames 与 styles 的支持。通过在 TableProps 和 TableContextProps 中增加 classNames 和 styles 属性，开发者可为表格各语义部分（如 section、header、title、footer、body、content、item）灵活指定样式类名与内联样式。相关子组件（如 Cell、FixedHolder、Panel）也同步支持了这些属性。此外，新增了示例与测试用例，展示并验证了自定义样式功能的正确性和覆盖范围。 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Table
participant TableContext
participant Panel
participant FixedHolder
participant Header
participant BodyRow
participant Cell
User->>Table: 传入 classNames/styles 属性
Table->>TableContext: 通过 Provider 传递 classNames/styles
Table->>Panel: 渲染 title/footer，传递对应 classNames/styles
Table->>FixedHolder: 渲染固定头部，传递 style
Table->>Header: 渲染表头，传递 classNames/styles
Table->>BodyRow: 渲染表体行，传递 classNames/styles
BodyRow->>Cell: 渲染单元格，应用 context 中的 classNames.cell/styles.cell
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/Body/BodyRow.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/Cell/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. src/Header/HeaderRow.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.
Note ⚡️ AI Code Reviews for VS Code, Cursor, WindsurfCodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback. Note ⚡️ Faster reviews with cachingCodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (5)
🚧 Files skipped from review as they are similar to previous changes (4)
🔇 Additional comments (7)
✨ Finishing Touches
🧪 Generate Unit Tests
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:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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 comments (1)
src/Table.tsx (1)
871-919:⚠️ Potential issue上下文依赖项列表需考虑新增属性
在 useMemo 依赖项列表中，没有包含新增的
classNames和styles属性。这可能导致当这些属性变化时，上下文值不会更新。[ // Scroll mergedScrollX, scrollInfo, + // Styles + classNames, + styles, + // Table prefixCls, getComponent,
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
docs/examples/className.tsx(1 hunks)src/Cell/index.tsx(4 hunks)src/FixedHolder/index.tsx(2 hunks)src/Panel/index.tsx(1 hunks)src/Table.tsx(9 hunks)src/context/TableContext.tsx(2 hunks)tests/semantic.spec.tsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
src/context/TableContext.tsx (1)
src/Table.tsx (1)
SemanticName(88-88)
docs/examples/className.tsx (1)
tests/FixedColumn-IE.spec.jsx (1)
columns(27-40)
🔇 Additional comments (20)
src/Panel/index.tsx (1)
9-10: 组件样式应用正确Panel 组件正确地接收并应用了 style 属性，符合样式自定义的需求。
src/context/TableContext.tsx (2)
17-17: 导入 SemanticName 类型正确导入了
SemanticName类型，用于定义样式和类名的语义化键名。
27-29: 新增样式和类名支持在
TableContextProps接口中添加了三个可选属性：style、classNames和styles，这些属性正确使用了 TypeScript 类型，并且设置为可选，符合良好的 API 设计原则。src/Cell/index.tsx (4)
2-2: 将 classnames 导入重命名为 cls将
classnames库的导入重命名为更简洁的cls，这是一种常见的实践，可以避免与组件内部变量命名冲突。
125-126: 从上下文中获取样式和类名从
TableContext上下文中获取了classNames和styles属性，用于支持单元格的样式自定义。
213-215: 应用自定义类名到单元格正确地将上下文中的自定义类名
classNames?.item应用到单元格的 className 中，使用cls函数合并多个类名。
251-251: 应用自定义样式到单元格正确地将上下文中的自定义样式
styles?.item应用到单元格的样式对象中，这使得用户可以自定义单元格的外观。src/FixedHolder/index.tsx (2)
49-49: 添加样式属性到组件参数正确地在组件的解构参数中添加了
style属性，使组件能够接收外部传入的样式。
163-163: 合并自定义样式到组件正确地将自定义样式与现有样式合并，确保了原有样式不会被覆盖，同时允许用户添加自定义样式。
tests/semantic.spec.tsx (1)
1-111: 测试用例设计全面，有效验证了自定义样式功能测试文件对 Table 组件的 classNames 和 styles 属性进行了全面测试，覆盖了表格的各个语义部分（section, header, title, footer, body, content, item）。测试分别验证了普通表格和带滚动条的表格场景，确保样式在不同状态下都能正确应用。代码结构清晰，测试断言完整。
docs/examples/className.tsx (1)
55-68: 示例扩展有助于用户理解功能新增的 title 和 footer 示例，以及带滚动功能的表格示例，能有效帮助用户理解如何使用这些新特性。示例代码简洁明了，展示了实际使用场景。
src/Table.tsx (9)
28-28: import 命名更改保持一致性将
classnames导入重命名为cls，保持了代码库内部的命名一致性。
88-95: 类型定义清晰且符合语义化设计新增的
SemanticName类型和TableProps接口扩展设计合理，使用 Partial<Record<...>> 允许用户只指定需要的部分，提高了 API 的灵活性。
196-197: 属性解构位置适当在组件属性解构中适当位置添加了
classNames和styles属性，便于后续使用。
663-667: 样式合并实现优雅表格体（body）部分的自定义样式合并实现优雅，既保留了原有的滚动样式，又允许用户自定义样式覆盖。使用
cls函数合并类名也很合理。
707-708: 表头样式应用方式与其他部分一致表头部分的样式应用方式与其他表格部分保持一致，保持了代码的一致性和可预测性。
749-751: 内容区域样式应用合理表格内容区域样式应用方式与其他部分一致，同时保留了原有的滚动样式特性。
784-784: 类名合并使用 cls 保持一致性将原有的 classnames 函数调用改为使用重命名后的
cls，保持了代码一致性。
803-807: 标题和页脚组件样式应用完整标题和页脚组件应用样式的实现细致全面，同时处理了类名和内联样式，并保持了组件的原有功能。
823-824: 在上下文中添加样式属性在 TableContextValue 中添加 classNames 和 styles 属性，使得这些样式配置可以传递给子组件，这是实现全局样式定制的关键。
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #1261 +/- ##
==========================================
+ Coverage 98.03% 98.08% +0.04%
==========================================
Files 76 77 +1
Lines 7425 7609 +184
Branches 1146 1164 +18
==========================================
+ Hits 7279 7463 +184
Misses 140 140
Partials 6 6 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
@thinkasany is attempting to deploy a commit to the React Component Team on Vercel. A member of the Team first needs to authorize it. |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/Body/BodyRow.tsx (1)
89-225: 关于样式层次结构的建议整体实现逻辑清晰，但可以考虑进一步优化样式的应用方式。目前的实现在行级别应用了
rowType特定的样式，但没有为嵌套的展开行提供相同的样式定制能力。可以考虑在
ExpandedRow组件中也添加基于rowType的样式支持，使样式定制更加一致和完整。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
docs/examples/components.tsx(1 hunks)src/Body/BodyRow.tsx(6 hunks)src/Body/index.tsx(5 hunks)src/Cell/index.tsx(4 hunks)src/Header/Header.tsx(2 hunks)src/Header/HeaderRow.tsx(2 hunks)src/Table.tsx(8 hunks)src/context/TableContext.tsx(2 hunks)tests/semantic.spec.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (4)
- src/context/TableContext.tsx
- tests/semantic.spec.tsx
- src/Cell/index.tsx
- src/Table.tsx
🔇 Additional comments (18)
docs/examples/components.tsx (1)
27-38: 添加自定义样式类支持这里示范了如何为表格不同部分提供自定义的类名。此实现允许开发者精细控制表格的样式，包括对表格主体和表头的包装器、单元格和行分别定制样式。
这是一个很好的示例，展示了新增功能的使用方法，使开发者能够清晰了解如何自定义表格各部分的样式。
src/Header/HeaderRow.tsx (2)
35-41: 正确地从上下文中提取样式信息通过从 TableContext 中提取
styles和classNames，然后安全地解构出特定于表头的样式和类名，实现了样式的灵活传递和应用。这种方式遵循了 React 的最佳实践。特别赞同使用了可选链操作符 (
?.)，这样即使classNames或styles为空，代码也不会出错。
53-53: 将样式应用到表头行元素这里正确地将提取的样式和类名应用到了表头行组件上，使自定义样式能够生效。
此实现与 PR 目标很好地契合，为表格组件提供了灵活的样式定制能力。
src/Header/Header.tsx (3)
14-14: 引入 classnames 工具引入
cls(classnames) 工具用于组合多个类名，这是 React 生态系统中处理条件类名的标准做法。
101-108: 从上下文中提取样式配置代码正确地从 TableContext 中提取了
classNames和styles，并且解构出特定于表头的样式配置。这种实现方式与其他组件保持一致，有助于维护代码的一致性和可预测性。
116-119: 将样式应用到表头包装器组件这里通过
cls工具组合了默认类名和自定义类名，同时应用了自定义样式，实现了对表头包装器的样式定制。使用
cls工具确保了类名的正确合并，这是处理多个类名的推荐方式。同时，通过条件访问保证了即使没有提供自定义样式也不会出错。src/Body/index.tsx (4)
12-12: 引入 classnames 工具引入
cls(classnames) 工具用于组合类名，保持了与 Header.tsx 文件相同的模式，确保了代码风格的一致性。
35-50: 提取和解构表格主体样式配置从 TableContext 中提取
classNames和styles，并正确地解构出特定于表格主体的样式和类名。使用了空值合并操作符提供默认值，确保了代码的健壮性。这种实现与整个 PR 中的其他组件保持一致，维护了代码库的一致性。
76-76: 添加行类型属性为 BodyRow 组件添加
rowType="body"属性，这有助于在 Cell 组件中区分表头行和表格主体行，从而应用不同的样式。这是一个很好的设计决策，增强了组件的语义化和样式的灵活性。
108-111: 将样式应用到表格主体包装器通过
cls工具组合默认类名和自定义类名，同时应用自定义样式，实现了对表格主体包装器的样式定制。这种实现与表头组件中的样式应用保持一致，确保了整个表格样式系统的一致性和可预测性。
src/Body/BodyRow.tsx (8)
1-1: 导入变更和新增上下文支持将
classnames重命名为cls，并引入useContext和TableContext，以支持从上下文获取样式配置。这是一个合理的变更，为组件提供了使用上下文API访问表格相关上下文值的能力。Also applies to: 4-5
23-23: 适当的类型定义扩展添加了可选的
rowType属性，允许指定行的类型（'header' | 'body' | 'footer'）。这是一个良好的改进，使得组件能够根据行类型应用不同的样式。
106-106: 从props中解构新增的rowType属性正确地从props中解构了
rowType属性，为后续条件渲染做准备。
108-110: 使用上下文API访问样式配置通过
useContext从TableContext中获取classNames和styles，并进一步解构出body和header特定的类和样式。这是实现自定义样式支持的关键步骤。
141-151: 条件应用类名基于
rowType条件性地应用类名，使用cls代替原来的classNames进行类名拼接。当rowType === 'header'时添加headerCls?.row类，当rowType === 'body'时添加bodyCls?.row类。增加了可选链操作符（
?.）确保即使headerCls或bodyCls为空时也不会出错，这是一个很好的防御性编程实践。
152-157: 条件应用样式基于
rowType条件性地应用样式，当rowType === 'header'时添加headerStyles?.row样式，当rowType === 'body'时添加bodyStyles?.row样式。这与类名应用的逻辑保持一致，实现了完整的样式定制能力。
172-172: 为Cell组件固定rowType属性为
Cell组件添加了固定的rowType="body"属性。这确保了单元格能够正确应用基于行类型的样式。
203-207: 更新ExpandedRow组件的类名拼接将
ExpandedRow组件的类名拼接从使用classNames更改为cls，保持了整个组件的一致性。
src/Body/BodyRow.tsx
Outdated
| @@ -90,10 +93,11 @@ function BodyRow<RecordType extends { children?: readonly RecordType[] }>( | |||
| if (process.env.NODE_ENV !== 'production') { | |||
| devRenderTimes(props); | |||
| } | |||
|
|
|||
src/Body/BodyRow.tsx
Outdated
|
|
||
| export interface BodyRowProps<RecordType> { | ||
| record: RecordType; | ||
| index: number; | ||
| renderIndex: number; | ||
| className?: string; | ||
| style?: React.CSSProperties; | ||
| classNames?: TableProps['classNames']['body']; |
src/Table.tsx
Outdated
| @@ -85,11 +85,21 @@ const EMPTY_DATA = []; | |||
| // Used for customize scroll | |||
| const EMPTY_SCROLL_TARGET = {}; | |||
|
|
|||
| export type SemanticName = 'section' | 'title' | 'footer' | 'content' | 'cell'; | |||
There was a problem hiding this comment.
table 里的元素是不用的，不是说 item 改成 cell。而是不要这个 cell。
src/Header/HeaderRow.tsx
Outdated
| @@ -20,6 +21,8 @@ export interface RowProps<RecordType> { | |||
| cellComponent: CustomizeComponent; | |||
| onHeaderRow: GetComponentProps<readonly ColumnType<RecordType>[]>; | |||
| index: number; | |||
| classNames?: TableProps['classNames']['header']; | |||
Summary by CodeRabbit
新功能
测试