Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: The fixed attribute does not take effect #1193

Open
wants to merge 6 commits into
base: master
Choose a base branch
from

Conversation

yezhonghu0503
Copy link

@yezhonghu0503 yezhonghu0503 commented Sep 21, 2024

修复表格expandable中设置fixed:right不生效,issues:ant-design/ant-design#50846

  • 问题原因

对于fixed的处理不正确,一个是判断逻辑有问题,fixed不应该和expandIconColumnIndex一起判断,一个是插入扩展列的时候没有按照fixed的值来处理

  • 如何修复
  1. 插入时增加判断,当设置fixed为left或者,fixed没设置时,默认插入到列数据数组第一个,如果fixed为right则插入到最后一个
  2. 修改fixedColumn变量表达传入位置到逻辑

Summary by CodeRabbit

  • 新功能
    • 增强了列管理的灵活性,允许更动态地处理展开列的位置和列的固定状态。
  • 测试
    • 新增测试用例以验证固定列在可展开行中的行为,确保固定列功能与可展开特性正确配合。

Copy link

vercel bot commented Sep 21, 2024

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 28, 2024 3:06pm

Copy link

coderabbitai bot commented Sep 21, 2024

Walkthrough

此次更改涉及useColumns函数的逻辑修改,主要集中在插入展开列和确定列的固定位置的逻辑。更新后的条件允许在更多场景下插入展开列,并简化了确定固定列的逻辑,以提高列管理的灵活性。此外,新增的测试用例确保了固定列在可展开行中的正确行为。

Changes

文件路径 更改摘要
src/hooks/useColumns/index.tsx 修改了插入展开列的逻辑和固定列的确定方式,增强了列管理的灵活性。
tests/ExpandRow.spec.jsx 新增了测试用例以验证固定列在可展开行中的行为,并修改了现有测试以覆盖固定列的渲染。

Possibly related PRs

Suggested reviewers

  • zombieJ
  • MadCcc

Poem

在列中跳跃的小兔子,
展开新列乐无比。
固定位置随心变,
灵活管理乐无边。
代码更新如春风,
兔子欢跳乐融融! 🐇✨


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
🪧 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.

@afc163
Copy link
Member

afc163 commented Sep 21, 2024

搞个测试用例 cover 一下

@yezhonghu0503
Copy link
Author

搞个测试用例 cover 一下

ok,稍等

@yezhonghu0503
Copy link
Author

看了下测试用例,没考虑到expandIconColumnIndex小于0时是不渲染的,修改了一下判断条件

Copy link

codecov bot commented Sep 22, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 97.75%. Comparing base (26f9746) to head (38d1147).

Additional details and impacted files
@@           Coverage Diff           @@
##           master    #1193   +/-   ##
=======================================
  Coverage   97.75%   97.75%           
=======================================
  Files          75       75           
  Lines        7484     7404   -80     
  Branches     1121     1124    +3     
=======================================
- Hits         7316     7238   -78     
+ Misses        162      160    -2     
  Partials        6        6           

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

@yezhonghu0503
Copy link
Author

搞个测试用例 cover 一下

佬,这个pr为啥还不给合并捏

@@ -176,9 +176,13 @@ function useColumns<RecordType>(
// >>> Insert expand column if not exist
if (!cloneColumns.includes(EXPAND_COLUMN)) {
const expandColIndex = expandIconColumnIndex || 0;
if (expandColIndex >= 0) {
console.log(expandColIndex);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

删除调试语句

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok

@afc163
Copy link
Member

afc163 commented Sep 30, 2024

最好还是单独给个用例,单看 snap 的改变不容易看出是不是符合预期。

@yezhonghu0503
Copy link
Author

最好还是单独给个用例,单看 snap 的改变不容易看出是不是符合预期。

哦哦,明白鸟

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 0

🧹 Outside diff range and nitpick comments (2)
src/hooks/useColumns/index.tsx (1)

247-247: 建议完善 useEffect 依赖项的处理

当前代码中存在多处 eslint-disable-next-line react-hooks/exhaustive-deps 注释。建议:

  1. 添加注释说明为什么排除这些依赖项
  2. 评估是否所有被排除的依赖项确实不需要包含在依赖数组中

建议添加类似如下的注释:

  // eslint-disable-next-line react-hooks/exhaustive-deps
+ // 仅在列结构发生实质性变化时才需要重新计算,忽略其他依赖项以避免不必要的重新渲染

Also applies to: 266-266, 275-275

tests/ExpandRow.spec.jsx (1)

233-261: 测试用例实现完整且合理!

测试用例很好地覆盖了固定列在可展开行中的基本功能:

  • 验证了 fixed: 'left' 的场景
  • 验证了 fixed: 'right' 的场景
  • 通过检查 CSS 类名确保了正确的渲染行为

建议增加以下测试场景以提高覆盖率:

  1. 验证嵌套表格中的固定列行为
  2. 测试动态切换 fixed 属性值的情况
  3. 添加边界情况的测试,如空数据时的表现

示例代码:

it('should handle fixed columns in nested expandable rows', () => {
  const nestedData = [
    { 
      key: 0,
      name: 'Parent',
      children: [{ key: 1, name: 'Child' }]
    }
  ];
  
  const wrapper = mount(
    createTable({
      columns,
      data: nestedData,
      scroll: { x: 903 },
      expandable: { expandedRowRender, fixed: 'left' }
    })
  );
  
  expect(wrapper.find('.rc-table-has-fix-left').length).toBe(1);
});
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between c3c5bfe and 38d1147.

⛔ Files ignored due to path filters (1)
  • tests/__snapshots__/ExpandRow.spec.jsx.snap is excluded by !**/*.snap
📒 Files selected for processing (2)
  • src/hooks/useColumns/index.tsx (5 hunks)
  • tests/ExpandRow.spec.jsx (1 hunks)
🔇 Additional comments (2)
src/hooks/useColumns/index.tsx (2)

203-204: 固定列处理逻辑优化合理

代码变更使固定列的处理更加直观:

  • 优先使用传入的 fixed 属性
  • 仅在未指定 fixed 时才参考前一列的状态

这样的改动提高了代码的可预测性和可维护性。


179-184: 展开列插入逻辑的改进值得肯定

新的插入逻辑更好地处理了固定列的场景,特别是:

  • 左固定和非固定列的处理更加明确
  • 为右固定列添加了专门的处理逻辑

建议执行以下脚本验证改动的完整性:

✅ Verification successful

展开列和固定列功能的测试覆盖情况良好

测试用例已经完整覆盖了所有关键场景:

  • 左固定和右固定列的展开功能
  • 不同的 expandIconColumnIndex 配置
  • 固定列与展开列的组合使用
  • EXPAND_COLUMN 的重复检查和位置验证

代码改动与测试用例保持一致,验证通过。

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# 描述:验证展开列在不同固定列场景下的使用情况
# 预期:应该能找到测试用例覆盖所有固定列场景

# 搜索与展开列相关的测试用例
rg -l "EXPAND_COLUMN.*fixed" tests/

Length of output: 37


Script:

#!/bin/bash
# 搜索展开列和固定列相关的测试用例,使用更宽泛的搜索模式
rg -l "expandable.*fixed|fixed.*expand" tests/

# 搜索展开列相关的测试文件
fd "expand.*test" tests/

# 查找包含 EXPAND_COLUMN 常量的测试文件
rg -l "EXPAND_COLUMN" tests/

# 查找表格组件的测试文件
fd "table.*test" tests/

Length of output: 201


Script:

#!/bin/bash
# 检查展开行测试文件中的固定列测试用例
rg "fixed.*expand|expand.*fixed" -A 10 -B 10 tests/ExpandRow.spec.jsx

# 检查表格测试文件中的相关测试用例
rg "fixed.*expand|expand.*fixed" -A 10 -B 10 tests/Table.spec.jsx

# 查看 EXPAND_COLUMN 的具体使用场景
rg "EXPAND_COLUMN" -A 5 -B 5 tests/ExpandRow.spec.jsx tests/Table.spec.jsx

Length of output: 8237

@afc163 afc163 requested a review from zombieJ November 7, 2024 07:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants