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 Cell
participant FixedHolder
participant Panel
User->>Table: 传入 classNames/styles 属性
Table->>TableContext: 通过 Provider 传递 classNames/styles
Table->>Panel: 渲染 title/footer，传递对应 classNames/styles
Table->>FixedHolder: 渲染 header，传递 classNames/styles
Table->>Cell: 渲染单元格，context 获取 classNames.item/styles.item
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/context/TableContext.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/FixedHolder/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/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. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (3)
✨ 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: 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 属性，使得这些样式配置可以传递给子组件，这是实现全局样式定制的关键。
| @@ -3,10 +3,11 @@ import * as React from 'react'; | |||
| export interface TitleProps { | |||
| className: string; | |||
| children: React.ReactNode; | |||
| style: React.CSSProperties; | |||
There was a problem hiding this comment.
🛠️ Refactor suggestion
样式属性应该是可选的
在 TitleProps 接口中，新增的 style 属性被定义为必须项，这可能会导致现有使用 Panel 组件的地方出现兼容性问题。建议将其修改为可选属性。
- style: React.CSSProperties;
+ style?: React.CSSProperties;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| style: React.CSSProperties; | |
| style?: React.CSSProperties; |
Summary by CodeRabbit
新功能
测试