refactor: Support all type of shadow #1238
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough本次变更主要对表格固定列样式和逻辑进行了重构，统一使用 “start” 与 “end” 替代之前的 “left” 与 “right”。在 CSS 文件中删除了原有的固定列间隔类，并合并及新增了固定阴影类。同时，相关示例代码中引入了新的固定属性和 RTL 切换按钮，更新了 Table 组件的方向。其他改动包括移除不再需要的依赖、调整各组件和 hooks 的属性接口及测试断言，以符合新的固定列逻辑与类型定义。 Changes
Sequence Diagram(s)sequenceDiagram
participant U as 用户
participant B as 切换按钮
participant S as rtl 状态
participant T as Table 组件
U->>B: 点击切换按钮
B->>S: 切换状态 (true ⇆ false)
S->>T: 更新方向 prop (rtl 或 ltr)
T->>T: 根据新方向重新渲染表格
sequenceDiagram
participant W as 用户滚动
participant FH as FixedHolder 组件
participant O as onScroll 回调
W->>FH: 触发 onWheel 事件
FH->>FH: 根据 scrollLeft、scrollWidth、clientWidth 与方向计算 nextScroll
FH->>O: 调用 onScroll(nextScroll)
O->>FH: 更新滚动状态
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
docs/examples/fixedColumns.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. docs/examples/scrollXY.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.
✨ 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 (
|
|
New, updated, and removed dependencies detected. Learn more about Socket for GitHub ↗︎
🚮 Removed packages: npm/[email protected] |
|
vitest 和 emzyme 冲突了，看了一下之前换 vitest 的 PR 也是遇到一样的问题 #989。这边换成 |
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## master #1238 +/- ##
==========================================
- Coverage 98.04% 98.00% -0.04%
==========================================
Files 76 76
Lines 7469 7427 -42
Branches 1164 1145 -19
==========================================
- Hits 7323 7279 -44
- Misses 140 142 +2
Partials 6 6 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
![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 (7)
tsconfig.json (3)
13-13: 格式调整：路径映射行的缩进这只是一个格式调整，没有功能上的变化。保持了 "rc-table" 的路径映射到 "src/index.ts"。
15-15: 格式调整：types 数组的缩进这只是一个格式调整，没有功能上的变化。测试类型配置保持不变。
18-18: 格式调整：exclude 配置的缩进这只是一个格式调整，没有功能上的变化。排除文件配置保持不变。
src/Footer/Cell.tsx (1)
31-34: 改进了 fixedInfo 的计算方式将 fixedInfo 的计算改为使用 React.useMemo，并移除了 direction 参数，这符合新的定位逻辑。通过记忆化可以避免不必要的重新计算，提高了性能。
建议在注释中简要说明为什么不再需要 direction 参数，以便于其他开发者理解这一设计变更。
src/Table.tsx (1)
466-469: 优化了滚动状态更新逻辑使用isEqual进行前后滚动信息的比较，只在有实际变化时才更新状态，避免了不必要的重渲染。这种优化对于频繁触发的滚动事件尤为重要，可以显著提升性能。
考虑在比较滚动信息时增加一个小的阈值，以减少细微滚动引起的状态更新：
- return isEqual(ori, nextScrollInfo) ? ori : nextScrollInfo; + // 添加1px的阈值来减少不必要的更新 + return Math.abs(ori[0] - nextScrollInfo[0]) < 1 && Math.abs(ori[1] - nextScrollInfo[1]) < 1 + ? ori : nextScrollInfo;src/utils/fixUtil.ts (2)
34-35: 变量初始化不一致性变量类型定义为
number | false，但初始化为null，这存在类型不一致的问题。建议修改初始化方式以匹配类型定义：
- let fixStart: number = null; - let fixEnd: number = null; + let fixStart: number | false = false; + let fixEnd: number | false = false;
52-59: 固定列阴影逻辑实现阴影逻辑实现很巧妙，通过检查相邻列是否固定来决定是否显示阴影。z-index的计算方式确保了固定开始列始终覆盖固定结束列。
不过，z-index的计算方式差异(start使用
columns.length * 2 - colStart而end使用colEnd)可能需要更详细的注释来解释设计意图。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (5)
tests/__snapshots__/ExpandRow.spec.jsx.snapis excluded by!**/*.snaptests/__snapshots__/FixedColumn.spec.jsx.snapis excluded by!**/*.snaptests/__snapshots__/FixedColumn.spec.tsx.snapis excluded by!**/*.snaptests/__snapshots__/Summary.spec.tsx.snapis excluded by!**/*.snaptests/__snapshots__/Table.spec.jsx.snapis excluded by!**/*.snap
📒 Files selected for processing (19)
assets/index.less(2 hunks)docs/examples/fixedColumns.tsx(1 hunks)docs/examples/scrollXY.tsx(3 hunks)package.json(0 hunks)src/Cell/index.tsx(6 hunks)src/FixedHolder/index.tsx(2 hunks)src/Footer/Cell.tsx(1 hunks)src/Header/HeaderRow.tsx(1 hunks)src/Table.tsx(8 hunks)src/context/TableContext.tsx(2 hunks)src/hooks/useColumns/index.tsx(1 hunks)src/hooks/useFixedInfo.ts(1 hunks)src/hooks/useStickyOffsets.ts(2 hunks)src/interface.ts(2 hunks)src/utils/fixUtil.ts(1 hunks)tests/FixedColumn.spec.tsx(4 hunks)tests/FixedHeader.spec.jsx(2 hunks)tests/Sticky.spec.jsx(2 hunks)tsconfig.json(1 hunks)
💤 Files with no reviewable changes (1)
- package.json
🧰 Additional context used
🪛 GitHub Check: codecov/patch
src/FixedHolder/index.tsx
[warning] 93-94: src/FixedHolder/index.tsx#L93-L94
Added lines #L93 - L94 were not covered by tests
🔇 Additional comments (46)
src/Footer/Cell.tsx (1)
26-26: 从 TableContext 中移除了 direction 参数此更改是重构的一部分，不再从 TableContext 中获取 direction 属性，符合新的定位逻辑设计。
docs/examples/fixedColumns.tsx (1)
37-37: 为第11列添加了固定右侧定位为 key 为 'k' 的列添加了
fixed: 'right'属性，使其固定在右侧。这个修改增强了示例的演示效果，展示了新的阴影支持功能。src/context/TableContext.tsx (2)
21-22: 新增 ScrollInfoType 类型定义添加了一个新的类型定义，用于跟踪滚动位置（scrollLeft）和滚动范围（scrollRange）。这是支持堆叠列阴影功能的基础。
38-38:❓ Verification inconclusive
在 TableContextProps 中添加 scrollInfo 属性
在上下文中添加滚动信息属性，移除了原有的 supportSticky 属性。这个变更支持新的滚动阴影逻辑，为未来的虚拟滚动条重构做准备。
可以检查一下是否所有使用 TableContext 的组件都已更新，以适应这一接口变更：
🏁 Script executed:
#!/bin/bash # 查找所有使用 TableContext 的文件 echo "查找使用 TableContext 的文件：" rg -l "TableContext" --type tsx --type ts # 查找可能还在使用 supportSticky 的地方 echo "查找可能仍在使用 supportSticky 的代码：" rg "supportSticky" --type tsx --type tsLength of output: 257
请验证 TableContext 的属性更新：确保所有依赖 TableContext 的组件均已移除对 supportSticky 属性的使用，并正确使用新的 scrollInfo 属性。
- 已在上下文中移除 supportSticky，增加了
scrollInfo: ScrollInfoType;属性。- 请检查代码库中所有引用 TableContext 的文件（例如
.ts和.tsx文件），确认没有残留对 supportSticky 的依赖。由于初次脚本因文件类型过滤问题未能给出预期结果，建议手动或使用如下命令重新验证：
#!/bin/bash echo "查找使用 TableContext 的文件：" rg -l "TableContext" --glob "*.tsx" --glob "*.ts" echo "查找可能仍在使用 supportSticky 的代码：" rg "supportSticky" --glob "*.tsx" --glob "*.ts"src/Header/HeaderRow.tsx (1)
35-35: 从 context 中移除了 direction 属性这个更改是合理的，与代码库中其他部分的更改保持一致，使用标准化的 "start" 和 "end" 代替 "left" 和 "right" 来处理固定列。
getCellFixedInfo函数不再需要 direction 参数，这简化了组件的实现。src/interface.ts (2)
23-26: 更新了 FixedType 类型定义，支持 'start' 和 'end'这是一个很好的改进，使用 'start' 和 'end' 代替 'left' 和 'right' 更符合 RTL（从右到左）布局的需求。注释清晰地表明了 'left' 和 'right' 已被弃用，这有助于开发者理解如何正确使用这些属性。
对于依赖此类型的代码，请确保进行相应的更新以使用新的命名约定。
134-136: 更新了 StickyOffsets 接口的属性名将
left和right更改为start和end与 FixedType 的更改保持一致。这种一致性使代码库更易于维护和理解。src/hooks/useFixedInfo.ts (3)
3-5: 更新了导入和类型定义移除了 Direction 类型的导入并添加了 React 的导入，这与函数签名的更改保持一致。确保类型定义的简洁和精确有助于提高代码的可维护性。
7-10: 从函数签名中移除了 direction 参数这个改变简化了函数接口，与整体重构目标一致，使用 'start' 和 'end' 而不是方向相关的 'left' 和 'right'。
11-17: 使用 React.useMemo 并简化了 fixedInfoList 的计算这个改变更清晰地表达了组件的意图，并通过移除 direction 相关的逻辑简化了实现。React.useMemo 的依赖数组现在只包含 flattenColumns 和 stickyOffsets，这更准确地反映了实际的依赖关系。
src/hooks/useStickyOffsets.ts (3)
2-2: 更新了类型导入移除了不再需要的 Direction 类型导入，保持了代码的简洁性。
7-10: 从函数签名中移除了 direction 参数这与整体重构方向一致，简化了函数接口并移除了对方向特定逻辑的依赖。
32-36: 简化了返回对象的结构之前的实现根据 direction 条件性地设置 left 和 right 属性，现在直接使用 start 和 end 作为属性名。这种改变：
- 简化了代码
- 使接口更一致
- 更好地支持 RTL 布局
- 减少了条件逻辑
依赖数组的更新也反映了参数的变化，这是一个好的实践。
src/hooks/useColumns/index.tsx (1)
284-284: 移除了 hasGapFixed 返回值函数返回值简化，移除了
hasGapFixed参数，与整体重构方向一致。这样的变更使代码更加精简，移除了不必要的返回值。tests/Sticky.spec.jsx (2)
240-243: 更新了固定列的选择器和样式断言将选择器从
.rc-table-cell-fix-right-first.rc-table-cell-fix-sticky更新为.rc-table-cell-fix-end.rc-table-cell-fix-sticky，并将样式断言从检查position和right属性更新为检查inset-inline-end属性。这种变更支持了逻辑属性的使用，更好地适应 RTL 布局。
282-285: 更新了固定列滚动情况下的样式断言与前一处更改类似，更新了选择器和样式断言，使用逻辑属性
inset-inline-end而不是物理属性right。这确保了测试与实现的一致性。src/FixedHolder/index.tsx (2)
142-151: 更新了固定列偏移量计算将偏移量计算从使用
left和right更新为使用逻辑属性start和end，这与整体固定列样式重构保持一致。注释掉的代码清理也有助于提高代码可读性。
88-103:❓ Verification inconclusive
增强了滚动处理逻辑
滚动处理逻辑得到了显著改进：
- 现在考虑了当前元素的
scrollLeft、scrollWidth和clientWidth属性- 增加了
maxScrollWidth计算- 根据滚动方向（RTL 或 LTR）调整滚动位置限制
这些变更提高了滚动体验的一致性和稳定性。
🏁 Script executed:
#!/bin/bash # 检查这段代码的 RTL 分支是否有足够的测试覆盖 rg -A 10 "RTL.*scroll" tests/Length of output: 31
优化滚动处理逻辑验证 - 请核查 RTL 分支的测试覆盖情况
这次提交对滚动逻辑进行了优化：
- 根据当前元素的
scrollLeft、scrollWidth和clientWidth属性计算了maxScrollWidth- 分别针对 LTR 和 RTL 模式限制了滚动范围，使得滚动行为更稳定一致
需要注意，目前自动检索 RTL 分支相关测试的脚本没有返回输出，这可能意味着 RTL 分支的测试覆盖率不足。请开发者手动确认或补充相应的单元测试，以验证在 RTL 模式下滚动逻辑能正常工作。
🧰 Tools
🪛 GitHub Check: codecov/patch
[warning] 93-94: src/FixedHolder/index.tsx#L93-L94
Added lines #L93 - L94 were not covered by testsdocs/examples/scrollXY.tsx (3)
7-7: 更新了固定列定义将列定义中的
fixed属性值从'left'和'right'更新为'start'和'end'，这与组件支持逻辑属性的重构方向一致，更好地支持 RTL 布局。Also applies to: 9-9, 16-16, 18-18
35-35: 添加了 RTL 切换功能增加了 RTL 方向控制状态和切换按钮，使示例可以直观地展示表格在不同文字方向下的布局效果。这是一个很好的功能增强，有助于测试和展示组件的双向文本支持能力。
Also applies to: 48-55
58-64: 更新了表格组件方向属性表格组件添加了
direction属性，根据rtl状态动态切换方向。这个变更配合前面的 RTL 切换功能，使示例更加完整，能够充分展示表格组件的双向布局能力。tests/FixedHeader.spec.jsx (1)
157-210: 适当更新了固定表头的测试验证方法测试用例标题和断言逻辑发生了重要变化，现在使用更符合逻辑的方式来验证固定列的样式类。测试从检查特定的
fix-left-last类名改为验证更通用的fix-start和fix-end类名，这与新的样式系统保持一致。此外，测试的异步处理方式也得到了改进，使用
act配合vi.runAllTimers()和Promise.resolve()确保组件状态更新完全完成后再进行断言，提高了测试的可靠性。tests/FixedColumn.spec.tsx (4)
227-236: 更新了固定列全部为左侧固定时的验证逻辑测试逻辑从检查特定类名改为验证不存在
.rc-table-cell-fix类，这与新的CSS架构相匹配。当所有列都固定时，不再需要添加固定类名。
259-266: 更新了固定列样式的验证方式测试断言从使用方向性的
fix-left类名改为使用逻辑性的fix-start类名，同时样式检查从left属性改为inset-inline-start属性。这些更改更好地支持RTL（从右到左）布局，使组件更加国际化。
284-288: 更新了阴影元素的类名检查测试从检查旧的
fix-left-last和fix-right-first类名改为检查新的fix-start-shadow和fix-end-shadow类名，这反映了CSS架构的变化，使阴影效果实现更加统一和灵活。
319-321: 统一了阴影元素测试中的类名验证在其他测试场景中也一致地使用了新的阴影类名，确保整个测试套件使用相同的类名约定，增强了测试的一致性和可维护性。
assets/index.less (3)
62-65: 简化了固定列的CSS逻辑将原来分散的
&-fix-left和&-fix-right类合并为单一的&-fix类，并使用CSS变量来计算z-index。这种方式更加简洁且易于维护，同时降低了代码重复率。
67-90: 引入了更灵活的阴影实现方式新增的
&-fix-start-shadow和&-fix-end-shadow类使用伪元素和透明度过渡来创建阴影效果，相比原来的实现更加灵活和统一。这种设计支持不同方向（LTR/RTL）的布局，提升了国际化支持能力。通过使用
inset-inline-start和inset-inline-end属性，阴影会根据文本方向自动调整位置，无需额外的方向判断逻辑。
98-99: 更新省略号处理逻辑以适配新的阴影类修改了省略号处理的选择器，使用新的阴影类名来确保文本溢出行为与新的阴影效果一致。这保证了在表格单元格内容溢出时，阴影和省略号可以正确协同工作。
src/Table.tsx (7)
40-40: 更新了TableContext导入，添加了ScrollInfoType类型引入
ScrollInfoType类型用于描述滚动信息，这有助于更好地管理表格的滚动状态。
293-310: 简化了useColumns钩子的返回值解构移除了
hasGapFixed变量，这表明相关的间隔固定逻辑已被移除或重构。这与CSS中移除&-fixed-column-gapped类保持一致，使代码更加精简。
358-358: 更新了useStickyOffsets钩子的调用方式移除了direction参数，表明sticky偏移计算现在是方向无关的，可能内部已经处理了RTL布局的逻辑。这与使用逻辑位置属性（start/end）而非方向属性（left/right）的变化相符。
439-440: 引入了新的scrollInfo状态来跟踪滚动信息添加了scrollInfo状态用于记录滚动位置和可滚动宽度，替代了之前的supportSticky状态。这一变化使滚动状态管理更加明确和集中。
803-803: 更新了useFixedInfo钩子的使用这里保持了API一致性，将新的stickyOffsets作为参数传递给useFixedInfo，确保固定列信息使用了最新的偏移量计算。
809-809: 在上下文中提供滚动信息将新的scrollInfo状态添加到TableContextValue中，使子组件能够访问滚动状态信息。这对于基于滚动位置控制阴影显示等功能非常重要。
859-859: 更新了上下文值的依赖数组将scrollInfo添加到React.useMemo的依赖数组中，确保上下文值在滚动信息变化时能够正确更新。这是React hooks使用的最佳实践，避免了依赖项缺失可能导致的问题。
src/utils/fixUtil.ts (3)
4-15: FixedInfo 接口的改进：支持多种阴影类型接口改进从
fixLeft/fixRight更改为fixStart/fixEnd是一个很好的重构，这为RTL布局提供了更好的支持。增加的阴影相关属性fixedStartShadow和fixedEndShadow也使组件能够处理不同的阴影效果，提高了组件的灵活性。
18-23: 提取通用逻辑到辅助函数：代码复用性提高创建
isFixedStart和isFixedEnd辅助函数是很好的实践，它们:
- 提高了代码复用性
- 保持了向后兼容性（同时支持旧的'left'/'right'和新的'start'/'end'术语）
- 使代码更易读和维护
43-50: 添加阴影效果和z-index逻辑好的设计决策：添加计算阴影效果的逻辑和z-index值，这有助于改善视觉层次和用户体验。注释也很清晰地解释了z-index的计算目的。
src/Cell/index.tsx (7)
40-44: CellProps接口更新：更好的RTL支持将
fixLeft/fixRight替换为fixStart/fixEnd，并添加阴影相关属性是很好的改进，这与fixUtil.ts中的更改保持一致，同时提供了更好的RTL支持。
106-110: 属性名称更新属性名称的更新与接口变更保持一致，代码更加清晰。
136-137: 变量命名更新：更好的语义从
isFixLeft/isFixRight到isFixStart/isFixEnd的变量命名更新提供了更好的语义，与组件的其他部分保持一致。
154-161: 固定样式更新：使用更现代的CSS属性将
left/right替换为insetInlineStart/insetInlineEnd是一个很好的改进，提供了更好的RTL支持。使用CSS变量--z-offset设置z-index也是一种干净的方法。
252-254: 椭圆内容与阴影的结合处理当启用椭圆显示和阴影时，将内容包装在span中是处理两种效果共存的好方法。
206-214:✅ Verification successful
CSS类名更新和阴影逻辑
类名更新与术语变更保持一致，并添加了基于滚动位置的阴影效果类。确保相应的CSS文件中有这些新类的样式定义。
条件类名的应用看起来很合理，分别处理了阴影的存在和显示状态。
检查CSS文件中是否定义了新的阴影类：
🏁 Script executed:
#!/bin/bash # 检查CSS文件中的阴影类定义 grep -r "fix-start-shadow\|fix-end-shadow" assets/Length of output: 366
验证通过：CSS 类名与阴影逻辑定义正确
- 代码中新增的阴影相关类（如
fix-start-shadow、fix-end-shadow及其组合类）与设计要求一致。- 在
assets/index.less文件中已确认存在对应的类及伪元素样式。- 条件类名的应用合理，有效区分了阴影的展示状态。
139-152:✅ Verification successful
阴影效果的滚动逻辑实现
这是一个很好的实现，通过上下文获取滚动信息并根据滚动位置计算是否显示阴影。使用绝对滚动值进行计算是合理的，可以处理各种滚动方向。
注意事项：要确保TableContext中的scrollInfo始终可用，否则可能会导致解构错误。
可以验证TableContext是否始终提供scrollInfo：
🏁 Script executed:
#!/bin/bash # 检查TableContext中的scrollInfo实现 grep -r "scrollInfo" src/context/Length of output: 92
阴影效果的滚动逻辑实现 - 验证通过
该实现通过上下文正确获取滚动信息，并基于绝对滚动值计算是否显示阴影，逻辑清晰且能适应不同滚动方向。脚本输出显示，
TableContext中已定义scrollInfo（见src/context/TableContext.tsx: scrollInfo: ScrollInfoType;），确保了解构操作不会发生错误。
- 确认
TableContext已始终提供scrollInfo。- 计算阴影显示状态的逻辑合理，无需调整。
This update will also support stack column shadow:
TODO:
Refactor table scrollbar to all use virtual scroll bar instead of real one.
ref ant-design/ant-design#52942
close #1237
Summary by CodeRabbit
新特性
重构