fix: Fix the shadow issue when scrollX is smaller than the sum of col…

[linxianxi]

fix ant-design/ant-design#51170

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
table	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 9, 2024 9:18am

[coderabbitai]

Walkthrough

在此次拉取请求中，src/Table.tsx 文件的 Table 组件经历了重要的修改，旨在增强功能性和简化 API。新增了 rowExpandable 和 summary 属性，并将 dataIndex 属性定义为数组类型。同时，重构了 expandable 属性以整合所有与行扩展相关的功能，移除了多个旧属性，标志着 API 的简化。此外，新增了针对 Table.FixedColumn 组件的测试用例，以验证在特定条件下表格阴影的正确显示。

Changes

文件路径	更改摘要
src/Table.tsx	- 新增 rowExpandable 和 summary 属性。 - 将 dataIndex 属性定义为数组类型。 - 重构 expandable 属性，移除多个旧属性。 - 所有旧的扩展属性已弃用。
tests/FixedColumn.spec.tsx	- 新增测试用例，验证在水平滚动小于列总宽度时表格阴影的显示。

Assessment against linked issues

Objective	Addressed	Explanation
固定列能正常显示阴影 (#[51170])	✅

Possibly related PRs

• feat: expandedRowClassName support receive a string #1195: 此 PR 增强了 expandedRowClassName 属性以接受字符串，这与 Table 组件的行扩展和样式处理的 API 修改直接相关。

Suggested reviewers

• zombieJ
• MadCcc

Poem

在表格中跳跃，行扩展新欢，
阴影轻轻飘荡，滚动不再难。
兔子欢庆新变化，API更简洁，
让我们一起欢呼，代码如春天！ 🐇✨

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between 471422d and cd2d125.

⛔ Files ignored due to path filters (2)

• tests/__snapshots__/ExpandRow.spec.jsx.snap is excluded by !**/*.snap
• tests/__snapshots__/FixedColumn.spec.tsx.snap is excluded by !**/*.snap

📒 Files selected for processing (1)

• src/Table.tsx (1 hunks)

🧰 Additional context used

🔇 Additional comments (1)

src/Table.tsx (1)

458-461: 请确保这个改动不会影响其他场景

这个改动看起来是为了优化特定场景下的滚动宽度计算，可能与虚拟表格或自定义滚动行为有关。这是一个很好的优化，但我们需要确保：

1. 这个改动不会对非虚拟表格的情况产生负面影响。
2. useInternalHooks 和 tailor 这两个标志在何处设置，以及它们的具体用途是什么。
3. 在使用这个优化的情况下，mergedScrollX 的值是否总是准确的。

建议添加注释解释这个改动的目的和适用场景，以便其他开发者理解。同时，可以考虑添加单元测试来验证这个改动在各种情况下的正确性。

✅ Verification successful

确认修改对其他场景无影响

通过检查 useInternalHooks 和 tailor 的定义及使用情况，确认这些标志主要用于虚拟表格的滚动行为控制。建议：

1. 确认 tailor 的默认值及其在不同组件中的传递逻辑，确保不会在非虚拟表格场景中引发问题。
2. 添加单元测试覆盖 useInternalHooks 和 tailor 在各种情况下的行为。
3. 在相关代码中添加注释，解释这些标志的用途和此次优化的原因，以便其他开发者理解。

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# 搜索 useInternalHooks 和 tailor 的使用情况
echo "Searching for useInternalHooks usage:"
rg "useInternalHooks" --type ts
echo "\nSearching for tailor usage:"
rg "tailor" --type ts

Length of output: 1305

---

Script:

#!/bin/bash
# 搜索 useInternalHooks 的定义和赋值
echo "Searching for useInternalHooks definitions and assignments:"
rg "const useInternalHooks" --type ts
rg "useInternalHooks\s*=" --type ts

echo "\nSearching for tailor definitions and assignments:"
rg "tailor\s*:" --type ts
rg "tailor\s*=" --type ts

Length of output: 631

---

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?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

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)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 0

🧹 Outside diff range and nitpick comments (1)

tests/FixedColumn.spec.tsx (1)

345-377: 新测试用例有效验证了滚动阴影问题

这个新增的测试用例很好地验证了当 scrollX 小于所有列宽之和时右侧阴影的显示问题。测试结构清晰，并且正确模拟了滚动行为。

为了进一步增强测试的健壮性，建议考虑以下改进：

1. 添加一个额外的断言，验证初始状态下（未滚动时）是否只显示右侧阴影。
2. 考虑测试滚动到最右侧时，是否只显示左侧阴影。

这些额外的检查可以确保阴影在不同滚动状态下的正确行为。例如：

 wrapper.update();
 expect(wrapper.find('.rc-table').hasClass('rc-table-ping-left')).toBeTruthy();
 expect(wrapper.find('.rc-table').hasClass('rc-table-ping-right')).toBeTruthy();
+
+// 滚动到最右侧
+act(() => {
+  wrapper
+    .find('.rc-table-content')
+    .props()
+    .onScroll({
+      currentTarget: {
+        scrollLeft: 400,
+        scrollWidth: 800,
+        clientWidth: 400,
+      },
+    } as any);
+});
+wrapper.update();
+expect(wrapper.find('.rc-table').hasClass('rc-table-ping-left')).toBeTruthy();
+expect(wrapper.find('.rc-table').hasClass('rc-table-ping-right')).toBeFalsy();

这些额外的断言将有助于确保阴影在各种滚动情况下都能正确显示。

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between 7755ae0 and 471422d.

📒 Files selected for processing (2)

• src/Table.tsx (1 hunks)
• tests/FixedColumn.spec.tsx (1 hunks)

🧰 Additional context used

🔇 Additional comments (1)

src/Table.tsx (1)

458-461: 优化 scrollWidth 的计算逻辑

此更改使 scrollWidth 的计算方式与 useColumns 中的逻辑保持一致。当 useInternalHooks 和 tailor 为真且 mergedScrollX 为数字类型时，使用 mergedScrollX，否则使用 measureTarget.scrollWidth。

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 97.75%. Comparing base (7755ae0) to head (cd2d125).
Report is 1 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #1199      +/-   ##
==========================================
+ Coverage   97.71%   97.75%   +0.03%     
==========================================
  Files          75       75              
  Lines        7451     7484      +33     
  Branches     1116     1121       +5     
==========================================
+ Hits         7281     7316      +35     
+ Misses        164      162       -2     
  Partials        6        6              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.