chore: sync antd-5.x to master #1336
Conversation
* fix: sticky event loop * chore: adjust script
* fix: scroll logic (react-component#1239) * fix: scroll logic * fix: ci * chore: fix lint
* feat: test * feat: test * feat: test * feat: test * feat: test * feat: test * feat: test * feat: test * feat: test * feat: test * feat: test * feat: test * feat: test * feat: test * feat: test * feat: test * feat: test * feat: test * feat: test * feat: 迁移 * feat: 同步
…eact-component#1318) Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
…lder and Table components (react-component#1317)
…1323) Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
…lculation (react-component#1331) Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
…act-component#1332) Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
…ent#1333) Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. Walkthrough此变更将列定义传入测量链路（MeasureRow → MeasureCell），调整测量单元格渲染与样式；在 FixedHolder 中新增 tableLayout 与 scrollTableStyle 配置并重构 ColGroup 渲染以支持动态列宽；示例 docs 扩展粘性表头空数据用例；版本升至 1.5.3。 Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant App as Table
participant FH as FixedHolder
participant TC as TableComponent
participant CG as ColGroup
App->>FH: render FixedHolder({ scrollTableStyle, tableLayout, ... })
activate FH
FH->>FH: compute mergedColumnWidth, combinationScrollBarSize
alt 有数据且已计算列宽
FH->>CG: build ColGroup(按合并列宽+滚动条宽)
else 无数据或无列宽
FH->>CG: build ColGroup(原始列定义)
end
FH->>TC: render table with { tableLayout, style: scrollTableStyle }
TC-->>FH: table element
FH-->>App: rendered fixed holder
deactivate FH
sequenceDiagram
autonumber
participant Body as Body
participant MR as MeasureRow
participant MC as MeasureCell
Body->>MR: render MeasureRow({ columnsKey, columns, onColumnResize })
MR->>MR: for each key → find column by key
MR->>MC: render MeasureCell({ columnKey, column, onColumnResize })
MC->>MC: render hidden content: column.title ||
MC-->>MR: measured width
MR-->>Body: report onColumnResize(key, width)
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested reviewers
Poem
✨ Finishing Touches🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary of Changes
Hello @crazyair, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!
This pull request primarily focuses on refining the sticky header functionality within the table component. It introduces new examples to cover various sticky header use cases, particularly with empty data and complex column structures. Additionally, it enhances the underlying column measurement logic and provides more granular control over table layout and styling, contributing to a more robust and flexible table component.
Highlights
- Enhanced Sticky Header Examples: New examples added to
stickyHeader.tsxdemonstrating sticky headers with empty data, fixed widths, and grouped columns. - Improved Column Measurement: The
MeasureCellandMeasureRowcomponents now receive column data, allowing for more accurate column width calculations, especially for sticky headers. - Flexible Table Layout: Added
scrollTableStyleandtableLayoutprops toFixedHolderandTablecomponents, providing more control over table styling and layout. - Version Bump: The package version has been updated to
1.5.3.
Using Gemini Code Assist
The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.
Invoking Gemini
You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in issue comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
Customization
To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.
Limitations & Feedback
Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.
You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.
Footnotes
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
There was a problem hiding this comment.
Code Review
This pull request introduces several enhancements and fixes for the sticky header feature, particularly for tables with empty data or when using scroll.x: 'max-content'. It improves column width measurement by rendering column titles in a hidden row. While the changes are mostly good, I've found a critical bug in FixedHolder that could cause a runtime error, and a performance issue in MeasureRow that could affect tables with many columns. My review includes suggestions to fix these issues.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (11)
package.json (1)
5-7: engines 要求过低，建议与工具链对齐当前 dev 依赖（如 husky@9、vitest@3、dumi@2）通常需要 Node ≥18。建议提升 engines 以避免本地/CI 使用低版本 Node 导致的不可预期问题。
可选调整示例：
"engines": { - "node": ">=8.x" + "node": ">=18" },docs/examples/stickyHeader.tsx (2)
89-115: columnsGrouped 中的 rowScope 属性需确认类型来源代码里使用了
rowScope: 'row'。在 rc-table 的列类型里常见的是通过onHeaderCell传递 th 的scope属性。请确认现有类型是否显式支持rowScope，否则建议改为onHeaderCell。参考修改：
{ - title: '', - dataIndex: 'productType', - key: 'productType', - rowSpan: 2, - rowScope: 'row', + title: '', + dataIndex: 'productType', + key: 'productType', + rowSpan: 2, + onHeaderCell: () => ({ scope: 'row' }), },
247-318: “空数据”多用例演示：建议补充 rowKey 避免控制台警告多处传入
data={[]}或data={[{}]}，默认rowKey: 'key'会在开发环境产生 “missing key” 警告。建议为示例加一个按索引生成的 rowKey，顺带可去重样板代码。可最小改动如下：
@@ -const columnsGrouped: ColumnsType<any> = [ +const columnsGrouped: ColumnsType<any> = [ /* ... */ ]; + +// 示例专用：空数据/无 key 的行避免警告 +const rowIndexKey = (_: unknown, i: number) => i; @@ - <Table + <Table columns={fixedColumns} data={[]} scroll={{ x: 'max-content', }} + rowKey={rowIndexKey} sticky /> @@ - <Table + <Table columns={fixedColumns} data={[]} scroll={{ x: 1200, }} + rowKey={rowIndexKey} sticky /> @@ - <Table + <Table columns={columnsWithWidth} data={[]} scroll={{ x: 'max-content', }} + rowKey={rowIndexKey} sticky /> @@ - <Table + <Table columns={fixedColumns} data={[{}]} scroll={{ x: 'max-content', }} + rowKey={rowIndexKey} sticky /> @@ - <Table + <Table columns={columnsWithWidth} data={[{}]} scroll={{ x: 1200, }} + rowKey={rowIndexKey} sticky /> @@ - <Table + <Table columns={fixedColumns.map(column => ({ ...column, width: undefined }))} data={[]} scroll={{ x: 'max-content', }} + rowKey={rowIndexKey} sticky /> @@ - <Table + <Table columns={fixedColumns.map(column => ({ ...column, width: undefined }))} data={[{}]} scroll={{ x: 'max-content', }} + rowKey={rowIndexKey} sticky /> @@ - <Table + <Table columns={columnsGrouped} data={[{}, {}]} scroll={{ x: 'max-content', }} + rowKey={rowIndexKey} sticky />另外，这一组 Table 块存在较多重复 props，可考虑提炼一个小渲染函数以减少重复。
src/Table.tsx (1)
816-817: CSS 类名使用tableLayout而非mergedTableLayout：可能与真实布局不一致当未显式传入
tableLayout、但计算得到mergedTableLayout='fixed'时，类名${prefixCls}-layout-fixed不会生效。建议使用合并后的布局值。修正示例：
- [`${prefixCls}-layout-fixed`]: tableLayout === 'fixed', + [`${prefixCls}-layout-fixed`]: mergedTableLayout === 'fixed',src/Body/MeasureCell.tsx (2)
9-12: 将 ColumnType 泛型透传，避免 any 侵入。当前
column?: ColumnType<any>会丢失记录类型信息。建议为组件与 props 增加可推断的泛型，以保持端到端的类型安全。-export interface MeasureCellProps { +export interface MeasureCellProps<RecordType = unknown> { columnKey: React.Key; onColumnResize: (key: React.Key, width: number) => void; - column?: ColumnType<any>; + column?: ColumnType<RecordType>; } -export default function MeasureCell({ columnKey, onColumnResize, column }: MeasureCellProps) { +export default function MeasureCell<RecordType = unknown>({ + columnKey, + onColumnResize, + column, +}: MeasureCellProps<RecordType>) {
23-29: 测量节点样式建议加固：禁用换行避免测量抖动。若表头样式是单行展示，建议在隐藏测量容器上加
whiteSpace: 'nowrap'，以避免换行导致的宽度偏差；同时保持加粗有助于更贴近真实渲染。- <div style={{ height: 0, overflow: 'hidden', fontWeight: 'bold' }}> + <div style={{ height: 0, overflow: 'hidden', fontWeight: 'bold', whiteSpace: 'nowrap' }}> {column?.title || '\xa0'} </div>src/FixedHolder/index.tsx (1)
199-205: 样式合并顺序请确认意图。当前将
...scrollTableStyle置于最后，允许外部覆写tableLayout与visibility。若不期望外部覆盖可见性（例如无宽度时强制隐藏），建议调整合并顺序或白名单式透传。可选调整（若希望内部优先生效）：
- style={{ - tableLayout, - visibility: noData || mergedColumnWidth ? null : 'hidden', - ...scrollTableStyle, - }} + style={{ + ...(scrollTableStyle || {}), + tableLayout, + visibility: noData || mergedColumnWidth ? undefined : 'hidden', + }}src/Body/MeasureRow.tsx (4)
7-12: 为 MeasureRow 引入泛型，避免any。将
columns: readonly ColumnType<any>[]改为可推断的泛型，保证列定义类型一致性。-export interface MeasureRowProps { +export interface MeasureRowProps<RecordType = unknown> { prefixCls: string; onColumnResize: (key: React.Key, width: number) => void; columnsKey: React.Key[]; - columns: readonly ColumnType<any>[]; + columns: readonly ColumnType<RecordType>[]; }
14-19: 提前构建 key→column 映射，避免 O(n²) 查找。在列数较多时，逐项
find会退化为 O(n²)。预先用useMemo构建 Map，渲染阶段 O(1) 读取。-export default function MeasureRow({ - prefixCls, - columnsKey, - onColumnResize, - columns, -}: MeasureRowProps) { +export default function MeasureRow<RecordType = unknown>({ + prefixCls, + columnsKey, + onColumnResize, + columns, +}: MeasureRowProps<RecordType>) { const ref = React.useRef<HTMLTableRowElement>(null); + const columnMap = React.useMemo(() => { + const m = new Map<React.Key, ColumnType<RecordType>>(); + columns.forEach(col => m.set(col.key, col)); + return m; + }, [columns]);
23-23: 移除fontSize: 0可能影响极端场景下行高。历史上在部分浏览器（尤其是旧版 Safari/Firefox）中，表格隐藏测量行若没有
fontSize: 0，可能出现极细微的高度撑开。建议保留以稳妥。- <tr aria-hidden="true" className={`${prefixCls}-measure-row`} style={{ height: 0 }} ref={ref}> + <tr aria-hidden="true" className={`${prefixCls}-measure-row`} style={{ height: 0, fontSize: 0 }} ref={ref}>
33-43: 用 Map 读取列定义，避免重复线性查找。将
find替换为columnMap.get，性能与可读性更好。- {columnsKey.map(columnKey => { - const column = columns.find(col => col.key === columnKey); + {columnsKey.map(columnKey => { + const column = columnMap.get(columnKey); return ( <MeasureCell key={columnKey} columnKey={columnKey} onColumnResize={onColumnResize} column={column} /> ); })}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (8)
docs/examples/stickyHeader.tsx(4 hunks)package.json(1 hunks)src/Body/MeasureCell.tsx(2 hunks)src/Body/MeasureRow.tsx(2 hunks)src/Body/index.tsx(1 hunks)src/ColGroup.tsx(1 hunks)src/FixedHolder/index.tsx(5 hunks)src/Table.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
📚 Learning: 2024-11-08T12:53:09.293Z
Learnt from: bbb169
PR: react-component/table#1202
File: src/Table.tsx:903-904
Timestamp: 2024-11-08T12:53:09.293Z
Learning: 在 `src/Table.tsx` 文件的 React 组件 `Table` 中，即使 `bodyScrollLeft` 频繁更新，也需要在 `TableContextValue` 的 `useMemo` 依赖数组中包含 `bodyScrollLeft` 和 `headerCellRefs`，因为每次滚动时重新计算 `TableContextValue` 是解决该问题所必须的。
Applied to files:
docs/examples/stickyHeader.tsxsrc/Table.tsxsrc/FixedHolder/index.tsx
🧬 Code graph analysis (3)
docs/examples/stickyHeader.tsx (1)
src/interface.ts (2)
ColumnType(118-133)ColumnsType(135-138)
src/FixedHolder/index.tsx (1)
src/interface.ts (1)
TableLayout(30-30)
src/Body/MeasureRow.tsx (2)
src/interface.ts (1)
Key(21-21)src/Body/MeasureCell.tsx (1)
MeasureCell(12-33)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: test / react component workflow
🔇 Additional comments (11)
package.json (1)
3-3: 版本号提升到 1.5.3：就绪发布与本 PR 的 API/样式增强相匹配，变更合理。
发布前请确认：
- 已在 CHANGELOG/Release Notes 标注 “FixedHolder: 新增 scrollTableStyle/tableLayout；测量链路传递 column”等。
- 打上 v1.5.3 git tag，并确认 npm 上的 dist 文件已包含本次变化。
docs/examples/stickyHeader.tsx (3)
5-5: 类型导入扩展：与接口定义一致新增 ColumnsType 的按需 type 导入正确，能覆盖分组列用例。
82-87: 新增 columnsWithWidth：示例完备为空数据/固定宽度场景提供了更清晰的演示。建议保持各列 key 唯一且稳定（当前 OK）。
143-143: 容器高度限制移除：更贴近真实滚动将外层固定高度容器移除有助于验证 sticky 在多种布局下的行为，变更合理。
src/Body/index.tsx (1)
149-150: 将完整列定义传入 MeasureRow：与测量链路改造对齐传入
columns={flattenColumns}使 MeasureCell 能使用column.title进行隐藏测量，变更正确。src/Table.tsx (1)
723-724: 向 FixedHolder 传递 scrollTableStyle 与 tableLayout：铺平固定区域布局一致性与 FixedHolder 的新增 props 对齐，有助于头/尾/体三处表格在固定布局下保持一致宽度与布局策略。
请确认：
FixedHolderProps已包含scrollTableStyle?: React.CSSProperties与tableLayout?: TableLayout，并在内部透传至TableComponent。- 两条渲染路径（fixHeader/isSticky 与非固定）对
tableLayout的使用保持一致（当前看已在两处都用mergedTableLayout）。src/Body/MeasureCell.tsx (1)
4-4: 类型导入对齐接口，OK。与
../interface的类型收敛良好，无需改动。src/FixedHolder/index.tsx (3)
10-10: 类型导入扩展合理。引入
TableLayout与现有接口保持一致，为后续样式控制提供类型约束。
39-41: API 扩展 LGTM。新增
scrollTableStyle?与tableLayout?（默认'fixed'）与现有行为兼容，向后不破坏。
64-66: 默认值设计合理。
tableLayout = 'fixed'保持历史默认渲染语义，scrollTableStyle外部可覆写细节样式。src/Body/MeasureRow.tsx (1)
5-5: 类型导入 OK。与
MeasureCell的新签名对齐。
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #1336 +/- ##
==========================================
+ Coverage 96.07% 96.11% +0.03%
==========================================
Files 57 57
Lines 3417 3448 +31
Branches 622 628 +6
==========================================
+ Hits 3283 3314 +31
Misses 129 129
Partials 5 5 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (3)
tests/__snapshots__/ExpandRow.spec.jsx.snapis excluded by!**/*.snaptests/__snapshots__/FixedColumn.spec.tsx.snapis excluded by!**/*.snaptests/__snapshots__/Table.spec.jsx.snapis excluded by!**/*.snap
📒 Files selected for processing (1)
.npmrc(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: test / react component workflow
| @@ -0,0 +1 @@ | |||
| shamefully-hoist=true No newline at end of file | |||
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
请确认团队确实使用 pnpm；shamefully-hoist 为 pnpm 专属配置。
若项目并未统一使用 pnpm，此项在 npm/yarn 下无效，且可能让新同学误解。若确需启用，建议补充注释或以更细粒度的 public-hoist-pattern 限定，以避免无差别提升带来的体积增大与掩盖 peerDependencies 问题。
可运行下列脚本核实仓库是否以 pnpm 为标准（检查 lockfile、packageManager 字段与 CI 使用情况）：
如需仅保留说明，可采纳以下微调，以增加可维护性：
-shamefully-hoist=true
+# pnpm only: flatten node_modules for legacy deps; prefer public-hoist-pattern when possible.
+shamefully-hoist=true🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== Lockfiles =="
fd -a -H 'pnpm-lock.yaml' || true
fd -a -H 'yarn.lock' || true
fd -a -H 'package-lock.json' || true
echo "== packageManager field =="
if [ -f package.json ]; then
jq -r '.packageManager // "N/A"' package.json
else
echo "package.json not found"
fi
echo "== CI references to pnpm/corepack =="
rg -nP -C2 '\bpnpm\b|\bcorepack\b' -g '.github/workflows/**' || trueLength of output: 579
确认并纠正 .npmrc 中的 pnpm 专属配置
当前仓库未检测到 pnpm-lock.yaml、packageManager 字段或 CI 工作流中的 pnpm 相关引用，说明并未使用 pnpm。
- 若非 pnpm 项目，删除
shamefully-hoist=true； - 若确需使用 pnpm 并保持此配置，请添加注释并优先采用
public-hoist-pattern以限定依赖提升范围，避免体积膨胀和 peerDependencies 被隐藏。
🤖 Prompt for AI Agents
In .npmrc around line 1, the file currently contains a pnpm-specific setting
(shamefully-hoist=true) but the repo lacks pnpm indicators; if this is not a
pnpm project, remove that line from .npmrc; if you do intend to use pnpm and
keep this behavior, add a comment explaining why shamefully-hoist is required
and replace or accompany it with a public-hoist-pattern setting to limit which
packages are hoisted (thereby preventing bundle bloat and hiding
peerDependencies).
1b75be2...antd-5.x
Summary by CodeRabbit
新功能
文档
杂务