Fix rtl box-shadow effect #1237
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Walkthrough本次提交涉及三个主要部分的更改：在 CSS 文件中修改了固定列的伪元素选择器，扩展了隐藏规则；在 useColumns 钩子中重构了固定列间隙判断逻辑，引入了辅助函数（findLastIndex、findFirstIndex 和 checkGap）并支持 RTL 与 LTR 布局；在测试文件中更新了固定列的配置，并增加了新的测试用例以验证特定布局下类名的存在性。 Changes
Sequence Diagram(s)sequenceDiagram
participant T as Table Component
participant U as useColumns Hook
participant L as Helper Functions
participant C as checkGap Function
T->>U: 调用 useColumns(..., direction)
U->>L: 查找左侧与右侧固定列索引
L-->>U: 返回索引信息
U->>C: 检查固定列间隙 (基于direction)
C-->>U: 返回间隙状态
U-->>T: 返回更新后的列配置信息
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
tests/FixedColumn.spec.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 (1)
🚧 Files skipped from review as they are similar to previous changes (1)
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 (
|
|
antd中对应的issue中还有一个针对fixed的改动，感觉这块改动的话会影响很大，麻烦大佬们看下是否有必要。 |
![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 (4)
tests/FixedColumn.spec.tsx (1)
379-385: 可在 LTR 场景下同样验证。此测试用例检查在 RTL 模式下是否添加了
rc-table-fixed-column-gapped，建议补充 LTR 模式的断言，以确保阴影效果在双向布局中都能正确处理。assets/index.less (1)
61-63: 谨慎使用!important。本次改动中长度更广的选择器使用了
display: none !important;，能在一定范围内隐藏阴影元素。但若后续需要局部显示或局部覆盖，!important会带来维护难度。建议在可行范围内尽量减少对!important的依赖。src/hooks/useColumns/index.tsx (2)
290-290: 拼写错误小建议。注释里 “dut” 建议更改为 “due”，以使语句在英文语境下表述更准确通顺。
- // dut to old browser not support `findLastIndex` + // due to old browsers not supporting `findLastIndex`
309-334: 避免重复调用，减少不必要的计算开销。对
findLastIndex('left')或findFirstIndex('left')等函数的多次重复调用，会带来无谓的性能损耗。建议先存储结果至局部变量，然后在后续逻辑中服用该变量，提升可读性和运行效率。- const lastLeftIndex = - findLastIndex('left') !== -1 ? findLastIndex('left') : findLastIndex(true); - if (lastLeftIndex >= 0 && checkGap(0, lastLeftIndex, 'left')) { + const leftIndex = findLastIndex('left'); + const trueIndex = findLastIndex(true); + const lastLeftIndex = leftIndex !== -1 ? leftIndex : trueIndex; + if (lastLeftIndex >= 0 && checkGap(0, lastLeftIndex, 'left')) { return true; }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
tests/__snapshots__/FixedColumn.spec.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (3)
assets/index.less(1 hunks)src/hooks/useColumns/index.tsx(1 hunks)tests/FixedColumn.spec.tsx(2 hunks)
🔇 Additional comments (2)
tests/FixedColumn.spec.tsx (1)
53-53: 这个列配置看起来逻辑正确。将列「title10」固定在表格右侧并设置宽度为 100，有助于保证与其他列的渲染一致性。
src/hooks/useColumns/index.tsx (1)
280-289: 提炼检查逻辑，增强可读性。
checkGap函数将列区间的固定属性校验集中处理，使判断逻辑更加清晰，且便于日后扩展多固定列的需求。
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## master #1237 +/- ##
==========================================
- Coverage 97.77% 97.75% -0.02%
==========================================
Files 76 76
Lines 7453 7480 +27
Branches 1132 1142 +10
==========================================
+ Hits 7287 7312 +25
- Misses 160 162 +2
Partials 6 6 ☔ View full report in Codecov by Sentry. |
|
Current Table shadow logic is little complete and not support stack columns. I have the plan to refactor of this. Let me handle it : ) |
fix ant-design/ant-design#52942
1.对
hasGapFixed方法进行了修改，确保在rtl模式下能正确判断。2.改动部分css，保证有在有间隔的固定列下，box-shadow不展示。
Summary by CodeRabbit
样式
重构
测试