Table 组件新增 colHoverable 属性 #1218
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
概述演练这个拉取请求引入了对表格组件的重大改进，主要集中在悬停状态和单元格索引处理上。核心变化包括为单元格引入 变更
建议的相关PR
建议的审阅者
诗歌
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 (10)
src/Footer/Cell.tsx (1)
42-42: 代码变更正确，建议补充文档说明将
index重命名为rowIndex使得参数含义更加明确，这个改动与新增的列悬停功能保持一致。建议在组件文档中补充说明这个变更。src/context/TableContext.tsx (1)
74-75: 建议为新增的 colHoverable 属性补充注释说明新增的
colHoverable属性与现有的rowHoverable属性平行，建议添加 JSDoc 注释说明该属性的用途。+ /** 是否启用列悬停效果 */ colHoverable?: boolean; + /** 是否启用行悬停效果 */ rowHoverable?: boolean;src/Cell/index.tsx (1)
212-213: 建议优化悬停状态的样式类命名当前使用
${cellPrefixCls}-row-hover和${cellPrefixCls}-col-hover作为样式类名，建议考虑更具描述性的命名，比如：- [`${cellPrefixCls}-row-hover`]: !legacyCellProps && rowHovering, - [`${cellPrefixCls}-col-hover`]: !legacyCellProps && colHovering, + [`${cellPrefixCls}-row-highlighted`]: !legacyCellProps && rowHovering, + [`${cellPrefixCls}-column-highlighted`]: !legacyCellProps && colHovering,tests/Hover.spec.tsx (4)
16-16: 建议为默认的 colHoverable 添加注释说明为了提高代码可读性，建议添加注释说明为什么在测试中默认启用 colHoverable。
- return <Table columns={columns} data={data} colHoverable {...props} />; + // 默认启用列悬浮效果以测试新功能 + return <Table columns={columns} data={data} colHoverable {...props} />;
158-158: 性能测试期望值调整合理由于新增列悬浮状态，渲染次数的期望值从 1 调整为 2 是合理的。建议添加注释说明渲染次数增加的原因。
- expect(renderTimes).toBe(2); + // 由于同时处理行列悬浮状态，每次状态变化需要渲染两次 + expect(renderTimes).toBe(2);Also applies to: 170-170
Line range hint
211-245: 行悬浮性能测试设计合理测试用例通过禁用 colHoverable 来独立测试行悬浮的性能表现，验证逻辑完整。但建议移除调试用的 console.log。
253-253: 移除调试代码请移除测试代码中的 console.log 语句。
- console.log('first:', first);src/Cell/useHoverState.ts (1)
14-16: 建议为useHoverState函数添加注释以反映新的参数和返回值为了提高代码的可读性和维护性，请在
useHoverState函数中添加或更新注释，说明新增的colIndex和colSpan参数，以及返回值中的colHovering和onColHover。src/Table.tsx (1)
125-125: 请在接口文档中添加对colHoverable属性的说明为了帮助开发者更好地了解和使用新添加的
colHoverable属性，请在TableProps接口的文档注释中添加对该属性的详细说明。src/hooks/useHover.ts (1)
5-12: 建议为useHover函数添加注释以反映新的返回值为了提高代码的可读性和维护性，请在
useHover函数中添加或更新注释，说明新增的startCol、endCol状态，以及onColHover回调函数。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
src/Body/BodyRow.tsx(1 hunks)src/Cell/index.tsx(6 hunks)src/Cell/useHoverState.ts(1 hunks)src/Footer/Cell.tsx(1 hunks)src/Table.tsx(5 hunks)src/context/TableContext.tsx(1 hunks)src/hooks/useHover.ts(1 hunks)tests/Hover.spec.tsx(7 hunks)
🔇 Additional comments (14)
src/context/TableContext.tsx (2)
60-62: 新增列悬停相关的上下文属性列悬停功能的实现方式与行悬停保持一致，使用了相同的设计模式，这样的实现方式值得肯定。
67-67: 重命名 onHover 为 onRowHover 使语义更清晰将
onHover重命名为onRowHover使得函数的用途更加明确，这是一个好的改进。src/Body/BodyRow.tsx (1)
168-169: Cell 组件参数更新符合新的悬停状态管理方式将
index拆分为colIndex和rowIndex的改动符合逻辑，与新增的列悬停功能保持一致。src/Cell/index.tsx (3)
23-25: Props 接口更新清晰且符合逻辑新增
colIndex并将index重命名为rowIndex的改动使得参数含义更加明确，这是一个很好的改进。
158-163: useHoverState 钩子函数的使用符合最佳实践使用
useHoverState钩子函数来管理行列悬停状态，代码结构清晰，复用性好。
167-168: 悬停事件处理逻辑完整鼠标进入和离开事件中同时处理了行和列的悬停状态，逻辑完整且对称。
Also applies to: 176-177
tests/Hover.spec.tsx (3)
23-23: 测试用例完整性良好基础测试用例完整覆盖了行列悬浮状态的切换，验证了 colHoverable 功能的正确性。
Also applies to: 27-27
39-39: shouldCellUpdate 测试覆盖完整测试用例正确验证了 shouldCellUpdate 优化下的列悬浮功能，确保性能优化不影响悬浮效果。
Also applies to: 43-43
247-285: 列悬浮性能测试实现完整测试用例通过禁用 rowHoverable 来独立测试列悬浮的性能表现，验证逻辑完整。
src/Cell/useHoverState.ts (1)
18-23: 请确认上下文属性已正确定义请确保
TableContext中的colHoverable、hoverStartCol、hoverEndCol和onColHover属性已正确初始化并传递，以避免潜在的未定义错误。src/Table.tsx (3)
225-225: 确认默认值是否符合预期
colHoverable的默认值设为false，rowHoverable的默认值设为true。请确认这是符合预期的默认行为，并在必要时更新文档以反映这些默认设置。
279-279: 已正确更新对useHover的调用成功地更新了对
useHover的调用，解构了新的返回值以支持列的 hover 状态。
840-843: 在TableContext中正确传递了列 hover 状态已将
hoverStartCol、hoverEndCol和onColHover等列 hover 状态正确地传递到TableContext，确保了列 hover 功能的正确性。src/hooks/useHover.ts (1)
23-26:onColHover回调函数实现正确
onColHover使用useCallback正确地实现了列 hover 状态的更新。
Summary by CodeRabbit
新功能
改进
性能优化