Table 组件新增 colHoverable 属性 #1221
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
概述演练这个拉取请求主要修改了表格组件的悬停和索引处理机制。核心变化包括在单元格组件中引入了更精细的行和列索引表示，并扩展了悬停状态的管理。修改涉及多个文件，包括 变更
可能相关的 PR
建议的审阅者
序列图sequenceDiagram
participant Table
participant Cell
participant UseHoverState
participant TableContext
Table->>TableContext: 配置悬停属性
Cell->>UseHoverState: 传入行列索引
UseHoverState-->>Cell: 返回悬停状态
Cell->>Table: 更新悬停效果
诗歌
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 (2)
src/Footer/Cell.tsx (1)
42-42: 属性重命名符合新的悬停状态管理设计将
index重命名为rowIndex使属性命名更加明确，与新增的列悬停功能保持一致。建议更新相关文档以反映这个变化。src/context/TableContext.tsx (1)
74-75: 新增悬停开关属性新增
colHoverable属性与现有的rowHoverable保持一致，建议：
- 在组件文档中说明这两个属性的用途
- 添加示例代码展示如何使用这些属性
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
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/VirtualTable/VirtualCell.tsx(1 hunks)src/context/TableContext.tsx(1 hunks)src/hooks/useHover.ts(1 hunks)tests/Hover.spec.tsx(7 hunks)
🔇 Additional comments (23)
src/Table.tsx (5)
125-126: 确认新属性colHoverable和rowHoverable的使用添加了
colHoverable和rowHoverable属性。请确保在所有相关组件中正确处理这些属性，并在文档中更新相关说明。
225-227: 校验colHoverable和rowHoverable的默认值
colHoverable默认设置为false，rowHoverable默认设置为true。请确认默认值与预期行为一致，并在必要时在文档中注明。
840-843: 在TableContext中添加列悬停状态管理在
TableContextValue中新增hoverStartCol、hoverEndCol和onColHover，用于管理列的悬停状态。请确保这些状态在组件中正确传递和使用。
855-856: 在TableContext中添加colHoverable和rowHoverable将
colHoverable和rowHoverable属性添加到TableContextValue中，使悬停配置能够在上下文中共享。请确保上下文中的这些属性与组件属性保持一致。
894-897: 更新useMemo的依赖项在
useMemo的依赖项中添加startCol、endCol和onColHover，确保当这些值变化时，TableContextValue会重新计算。src/hooks/useHover.ts (4)
5-12: 更新useHover函数以支持列悬停
useHover函数的返回值增加了startCol、endCol、onRowHover和onColHover，以支持列的悬停功能。请确保在所有调用useHover的地方，正确处理新的返回值。
15-16: 添加列悬停状态的状态变量新增了
startCol和endCol的状态，以管理列的悬停起始和结束索引，实现与行悬停状态一致的逻辑。
18-21: 定义onRowHover和onColHover回调函数使用
React.useCallback定义了onRowHover和onColHover，用于更新行和列的悬停状态。请确保这些回调在组件中正确传递并使用。
28-28: 返回更新后的悬停状态和回调函数更新了返回值，包含行和列的悬停状态，以及对应的回调函数。请检查在其他模块中对
useHover的解构是否需要调整。src/Cell/useHoverState.ts (3)
14-16: 更新useHoverState函数的参数和返回值
useHoverState函数增加了colIndex和colSpan参数，返回值增加了colHovering、onRowHover和onColHover。请确保在所有使用该函数的地方，传入正确的参数，并处理新的返回值。
18-21: 添加列悬停状态的逻辑在函数内部，增加了
colHovering的计算，基于colIndex、colSpan和上下文中的列悬停状态。请检查逻辑是否正确，实现了列悬停的功能。
23-23: 返回更新后的悬停状态和回调函数更新了返回值，包含行和列的悬停状态，以及对应的回调函数。请确认在调用该函数的地方，正确处理了新增的返回值。
src/context/TableContext.tsx (2)
60-62: 新增列悬停状态追踪属性新增的
hoverStartCol和hoverEndCol属性以及onColHover方法完整实现了列悬停状态管理。
67-67: 方法重命名提高了代码清晰度将
onHover重命名为onRowHover使行悬停处理更加明确，与新增的列悬停处理保持一致的命名风格。src/VirtualTable/VirtualCell.tsx (1)
123-124: 完善单元格位置追踪更新 Cell 组件属性，使用
rowIndex和colIndex明确指定单元格位置，这对于虚拟表格的性能优化和悬停状态管理都很重要。src/Body/BodyRow.tsx (1)
168-169: 更新单元格定位属性将行列索引分别传入 Cell 组件，使单元格定位更加清晰：
- 使用
colIndex追踪列位置- 使用
rowIndex追踪行位置这样的改动有助于：
- 提高代码可读性
- 支持新增的列悬停功能
- 与其他组件保持一致的接口设计
src/Cell/index.tsx (4)
23-23: 属性命名更新得当！将
index重命名为rowIndex并新增colIndex使得属性的用途更加明确，这样的改动有助于提高代码的可读性和可维护性。Also applies to: 25-25
158-163: hover 状态管理逻辑优化合理！
useHoverStatehook 现在同时处理行和列的 hover 状态，参数的设计也很合理：
- 使用
rowIndex和colIndex明确区分行列- 考虑了
rowSpan和colSpan的影响
167-168: 事件处理逻辑完善！鼠标事件处理器同时更新行和列的 hover 状态：
mouseEnter时正确设置 hover 范围mouseLeave时正确清理所有状态Also applies to: 176-177
212-213: CSS 类名设计合理！hover 状态的 CSS 类名设计清晰：
cell-row-hover用于行 hover 效果cell-col-hover用于列 hover 效果- 使用
legacyCellProps判断保证了向后兼容性tests/Hover.spec.tsx (3)
23-23: 测试用例覆盖完整！基础功能测试用例完善：
- 验证了列 hover 类名的添加和移除
- 包含了
shouldCellUpdate场景下的正确性验证Also applies to: 27-27, 39-39, 43-43
Line range hint
211-245: 性能测试设计合理！行 hover 性能测试：
- 通过
renderTimes统计验证了渲染优化- 使用
colHoverable: false隔离测试行为- 正确验证了 hover 状态的应用和清理
247-284: 列 hover 测试完善！列 hover 性能测试设计合理：
- 使用
rowHoverable: false隔离列 hover 行为- 验证了正确的 CSS 类名应用
- 通过
renderTimes确保了渲染性能
Summary by CodeRabbit
新功能
改进
性能