fix: apply expandedRowClassName to virtual tree rows#1482
fix: apply expandedRowClassName to virtual tree rows#1482afc163 merged 1 commit intoreact-component:masterfrom
Conversation
|
@QDyanbing is attempting to deploy a commit to the React Component Team on Vercel. A member of the Team first needs to authorize it. |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request updates the BodyLine component in the virtual table to correctly apply expandedRowClassName to tree rows. The logic for computing the expanded class name was moved outside the conditional block and is now applied to the row's class list when the row indent is at least one. Additionally, a new test case was added to Virtual.spec.tsx to verify that child rows in a tree structure receive the specified class name. I have no feedback to provide as there were no review comments to evaluate.
快速概览该变更修复了虚拟表格中 变更详情
预计代码审查工作量🎯 2 (Simple) | ⏱️ ~10 分钟 相关的 PR
建议审阅者
兔子的贺诗
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
tests/Virtual.spec.tsx (1)
186-210: 建议：补充函数式expandedRowClassName的覆盖。紧邻的
basic用例对expandedRowClassName同时验证了字符串与函数两种形态（Line 170 的['bamboo', () => 'bamboo']）。本用例是本次修复的核心回归测试，但仅覆盖字符串形态，建议参照basic模式也覆盖函数形态，以确保computedExpandedClassName在indent >= 1的树行下能正确接收(record, index, indent)并返回类名。♻️ 参考改写
- it('applies expanded row class to tree rows', () => { - const { container } = getTable({ - data: [ - { - name: 'parent', - age: 0, - address: 'address0', - children: [ - { - name: 'child', - age: 1, - address: 'address1', - }, - ], - }, - ], - expandable: { - expandedRowKeys: ['parent'], - expandedRowClassName: 'bamboo', - expandIcon: () => <span className="custom-expand-icon" />, - }, - }); - - expect(container.querySelector('[data-row-key="child"]')).toHaveClass('bamboo'); - }); + it('applies expanded row class to tree rows', () => { + (['bamboo', () => 'bamboo'] as const).forEach(cls => { + const { container } = getTable({ + data: [ + { + name: 'parent', + age: 0, + address: 'address0', + children: [ + { + name: 'child', + age: 1, + address: 'address1', + }, + ], + }, + ], + expandable: { + expandedRowKeys: ['parent'], + expandedRowClassName: cls, + expandIcon: () => <span className="custom-expand-icon" />, + }, + }); + + expect(container.querySelector('[data-row-key="child"]')).toHaveClass('bamboo'); + // 父行（indent=0）不应被附加该类名 + expect(container.querySelector('[data-row-key="parent"]')).not.toHaveClass('bamboo'); + }); + });附带断言父行（indent=0）不带该类名，可以防止未来不小心把
indent >= 1守卫移除而引入回归。🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@tests/Virtual.spec.tsx` around lines 186 - 210, Update the failing test to also exercise the functional form of expandedRowClassName and assert the parent (indent=0) does not receive the class: when calling getTable pass expandable.expandedRowClassName as a function (e.g., (record, index, indent) => 'bamboo') in addition to the string case so computedExpandedClassName is executed for indent >= 1; assert container.querySelector('[data-row-key="child"]') has the 'bamboo' class and container.querySelector('[data-row-key="parent"]') does not, ensuring the indent guard remains effective.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@tests/Virtual.spec.tsx`:
- Around line 186-210: Update the failing test to also exercise the functional
form of expandedRowClassName and assert the parent (indent=0) does not receive
the class: when calling getTable pass expandable.expandedRowClassName as a
function (e.g., (record, index, indent) => 'bamboo') in addition to the string
case so computedExpandedClassName is executed for indent >= 1; assert
container.querySelector('[data-row-key="child"]') has the 'bamboo' class and
container.querySelector('[data-row-key="parent"]') does not, ensuring the indent
guard remains effective.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 1c172bad-e312-4826-9486-978d749d23e8
📒 Files selected for processing (2)
src/VirtualTable/BodyLine.tsxtests/Virtual.spec.tsx
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #1482 +/- ##
=======================================
Coverage 96.11% 96.11%
=======================================
Files 57 57
Lines 3447 3448 +1
Branches 635 635
=======================================
+ Hits 3313 3314 +1
Misses 129 129
Partials 5 5 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
2 participants
变更说明
virtual模式下树形展开子行未应用expandedRowClassName的问题expandedRowRender展开行现有行为不变验证
npx vitest run tests/Virtual.spec.tsxnpx vitest run tests/ExpandRow.spec.jsx -t "renders expend row class correctly using children without expandedRowRender"Fix ant-design/ant-design#57758
Summary by CodeRabbit
发行说明