feat: support expand all control in expandable column header - #1505
feat: support expand all control in expandable column header#1505nikzanda wants to merge 5 commits into
Conversation
|
Caution The consumer version of Gemini Code Assist on GitHub has been sunset. All code review activity has officially ceased. |
|
@nikzanda is attempting to deploy a commit to the afc163's projects Team on Vercel. A member of the Team first needs to authorize it. |
Walkthrough新增展开全部行功能。该功能支持默认或自定义图标、批量展开与收起、可展开行过滤、受控状态同步和自定义展开列表头。README 文档同步更新。 Changes展开全部行支持
Estimated code review effort: 3 (Moderate) | ~25 minutes Sequence Diagram(s)sequenceDiagram
participant Table
participant useExpand
participant useColumns
participant ExpandIcon
Table->>useExpand: 获取展开全部状态和处理器
useExpand-->>Table: 返回 expandAllInfo
Table->>useColumns: 传递 ExpandIcon 和 expandAllInfo
useColumns->>ExpandIcon: 渲染 type="all" 图标
ExpandIcon->>useExpand: 触发展开或收起全部行
useExpand-->>Table: 更新 expandedRowKeys
Suggested reviewers: Poem Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches 💡 1🛠️ Fix failing CI checks 💡
🧪 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 |
22bede1 to
ef33496
Compare
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #1505 +/- ##
==========================================
+ Coverage 99.05% 99.08% +0.03%
==========================================
Files 45 45
Lines 1376 1426 +50
Branches 413 432 +19
==========================================
+ Hits 1363 1413 +50
Misses 13 13 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
|
Caution The consumer version of Gemini Code Assist on GitHub has been sunset. All code review activity has officially ceased. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/utils/expandUtil.tsx`:
- Around line 57-64: Update the expand-all control in the rendered component
from a span to a native button with type="button", preserving its className and
onClick behavior. Add an aria-label that reflects the current expanded state and
bind aria-expanded to expanded. Extend the interaction tests to verify Tab focus
and activation via Enter and Space.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 3313343f-3c8c-4313-babe-050aa6c7b4e7
📒 Files selected for processing (8)
README.mdREADME.zh-CN.mdsrc/Table.tsxsrc/hooks/useColumns/index.tsxsrc/hooks/useExpand.tssrc/interface.tssrc/utils/expandUtil.tsxtests/ExpandRow.spec.jsx
|
@afc163 @zombieJ, the implementation is now complete and this PR is ready for review. It includes the expand-all API, controlled and uncontrolled behavior, When you have time, could you please review the proposed API and implementation? I’m happy to make any adjustments needed before proceeding with the Ant Design integration for ant-design/ant-design#8791. Thanks! |
| getRowKey: GetRowKey<RecordType>; | ||
| onTriggerExpand: TriggerEventHandler<RecordType>; | ||
| expandIcon?: RenderExpandIcon<RecordType>; | ||
| expandAllIcon?: RenderExpandAllIcon; |
There was a problem hiding this comment.
Maybe we can support components.ExpandIcon which support onClick expanded props for customize instead of passing by props
There was a problem hiding this comment.
@zombieJ I understand components.ExpandIcon as a replacement for expandable.expandAllIcon, used only for the expand-all control in the column header and receiving expanded and onClick.
The existing expandable.expandIcon behavior for individual rows would remain unchanged.
Please let me know if this matches what you had in mind, and I’ll update the implementation, typings, documentation, and tests accordingly.
There was a problem hiding this comment.
I would prefer introducing a unified components.ExpandIcon to replace both expandable.expandIcon and the new expandable.expandAllIcon, rather than keeping separate icon APIs for row expansion and expand-all.
My reasoning is:
- In most cases, the row expand control and the header expand-all control use the same component. If they need to look different, the component can distinguish between the row and header cases through the presence of
record, or through a documented special marker in the props. components.ExpandIconcould later be integrated with the Ant DesignConfigProvider, enabling global customization. If the icon remains anexpandableproperty, it can only be configured per Table and cannot be overridden globally throughConfigProvider.
There was a problem hiding this comment.
Thanks for the clarification. I’ve updated the implementation to use a unified components.ExpandIcon for both row expansion and the expand-all control.
The component now receives:
type: 'row' | 'all'expandedexpandableonClickprefixClsrecordfor row controls only
I also:
- removed the new
expandable.expandAllIconAPI; - kept the existing
expandable.expandIconas a deprecated row-only fallback for backward compatibility; - made
components.ExpandIcontake precedence over the deprecated fallback; - applied the unified component to both
expandedRowRenderand nested/tree rows; - updated the English and Chinese documentation;
- added regression coverage for both icon types, precedence, the deprecated fallback, and nested rows.
2 participants
Summary
Add an opt-in expand/collapse-all control to the expandable column header.
This is intended to support the use case described in ant-design/ant-design#8791.
The implementation is ready for maintainer review. The corresponding Ant Design integration will follow once the API is accepted and released.
API
expandable.showExpandAllto enable the header control.expandable.onExpandAllto observe expand/collapse-all actions.components.ExpandIconfor both row expansion and the expand-all control.expandable.expandIcon, retaining it as a row-only fallback for backward compatibility.expandable.columnTitleto be a render function receiving the generated expand-all control.components.ExpandIconreceives:type: 'row' | 'all'expandedexpandableonClickprefixClsrecordfor row controls onlyBehavior
rowExpandableare affected.expandedRowKeysare supported.components.ExpandIcontakes precedence over the deprecatedexpandable.expandIconfallback.expandedRowRenderand nested/tree row controls.expandedRowRendertables.Summary by CodeRabbit
expandIcon标记为弃用，建议使用components.ExpandIcon。