[codex] extract group header component

[zombieJ]

Summary

• Add an internal GroupHeader component to centralize grouped header rendering.
• Replace the inline list and virtual sticky header <div> render paths with GroupHeader while keeping the existing class names and behavior.

Validation

• npm test -- --runInBand
• npm run lint

Summary by CodeRabbit

发版说明

• 依赖更新

  • 升级虚拟列表库依赖至最新版本，提升性能与兼容性。

• 功能优化

  • 改进分组表头的定位策略，优化虚拟列表中分组头部的粘性固定表现。
  • 增强虚拟列表启用状态下的分组头部渲染能力，提供更灵活的样式控制。

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: fdb1e431-e6e3-44cb-a1d5-7b621c37bf14

📥 Commits

Reviewing files that changed from the base of the PR and between e39fe69 and e6b5395.

📒 Files selected for processing (7)

• assets/index.less
• package.json
• src/GroupHeader.tsx
• src/List.tsx
• src/hooks/useStickyGroupHeader.tsx
• tests/hooks.test.tsx
• tests/listy.behavior.test.tsx

---

概览

PR 将虚拟列表库从 rc-virtual-list 迁移至 @rc-component/virtual-list，同时重构了分组粘性头部实现：新增 GroupHeader 组件、简化 useStickyGroupHeader hook 参数设计、改进 extraRender 逻辑，并完整更新了相关测试覆盖。

变更

虚拟列表迁移与粘性头部重构

层级 / 文件	摘要
依赖与样式基础更新 package.json, assets/index.less	依赖从 rc-virtual-list@^3.19.2 更新至 @rc-component/virtual-list@^1.1.0；样式中 &-sticky-header 改为 &-fixed，移除白色背景色设置。
GroupHeader 组件创建 src/GroupHeader.tsx	新增泛型 GroupHeader 组件与 GroupHeaderProps 接口，支持 sticky/fixed 属性动态拼接 CSS 类名，并将分组标题和行内样式透传至根元素。
useStickyGroupHeader hook 核心重构 src/hooks/useStickyGroupHeader.tsx	StickyHeaderParams 移除 containerRef/listRef 字段，extraRender 改为直接利用虚拟列表回调参数逆序扫描定位活跃头部，计算受约束粘性位置，直接渲染 GroupHeader 替代旧的 Portal 方案。
List 组件集成新组件与 hook src/List.tsx	更新虚拟列表类型导入源，引入新 GroupHeader 组件；调整 useStickyGroupHeader 启用条件加入 virtual 约束并移除旧参数，重构头部渲染逻辑为 GroupHeader 组件，移除容器 ref 挂载。
测试全面更新：类型迁移与断言重构 tests/hooks.test.tsx, tests/listy.behavior.test.tsx	迁移 ExtraRenderInfo 类型至 @rc-component/virtual-list；移除旧 ref 相关辅助函数；重写所有用例断言，改为查询 group-header-fixed 的 class、文本与行内 top 样式；覆盖激活组、虚拟禁用、滚动偏移、头部推送等完整场景。

相关 PR

• react-component/listy#44: 对 useStickyGroupHeader hook 文件的类型导入迁移与 hook 逻辑调整在两个 PR 中存在重叠，具有直接的代码级依赖关系。

评估

🎯 3 (中等复杂度) | ⏱️ ~25 分钟

诗歌

🐰 旧的 ref 不再缚，虚拟列表已迁移，
粘性头部换新妆，scroll 参数自计算，
GroupHeader 轻轻起，Portal 隐没去无踪，
测试检验皆通过，迁徙之路已圆满！✨

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codex/extract-group-header

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

src/GroupHeader.tsx

Oops! Something went wrong! :(

ESLint: 8.57.1

ESLint couldn't find the plugin "eslint-plugin-react".

(The package "eslint-plugin-react" was not found when loaded as a Node module from the directory "".)

It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:

npm install eslint-plugin-react@latest --save-dev

The plugin "eslint-plugin-react" was referenced from the config file in ".eslintrc.js » /node_modules/.pnpm/@umijs+fabric@4.0.1_postcss@8.5.14/node_modules/@umijs/fabric/dist/eslint.js".

If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.

src/List.tsx

Oops! Something went wrong! :(

ESLint: 8.57.1

ESLint couldn't find the plugin "eslint-plugin-react".

(The package "eslint-plugin-react" was not found when loaded as a Node module from the directory "".)

It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:

npm install eslint-plugin-react@latest --save-dev

The plugin "eslint-plugin-react" was referenced from the config file in ".eslintrc.js » /node_modules/.pnpm/@umijs+fabric@4.0.1_postcss@8.5.14/node_modules/@umijs/fabric/dist/eslint.js".

If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.

src/hooks/useStickyGroupHeader.tsx

Oops! Something went wrong! :(

ESLint: 8.57.1

ESLint couldn't find the plugin "eslint-plugin-react".

(The package "eslint-plugin-react" was not found when loaded as a Node module from the directory "".)

It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:

npm install eslint-plugin-react@latest --save-dev

The plugin "eslint-plugin-react" was referenced from the config file in ".eslintrc.js » /node_modules/.pnpm/@umijs+fabric@4.0.1_postcss@8.5.14/node_modules/@umijs/fabric/dist/eslint.js".

If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.

• 2 others

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[gemini-code-assist]

Code Review

This pull request introduces a new GroupHeader component to centralize the rendering logic for group headers. It refactors List.tsx and the useStickyGroupHeader hook to utilize this component, which supports both standard and sticky header variants. I have no feedback to provide.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 98.94%. Comparing base (e39fe69) to head (e6b5395).
⚠️ Report is 1 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff             @@
##           master      #45      +/-   ##
==========================================
+ Coverage   95.90%   98.94%   +3.04%     
==========================================
  Files           4        5       +1     
  Lines         122       95      -27     
  Branches       34       23      -11     
==========================================
- Hits          117       94      -23     
+ Misses          5        1       -4     

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

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	@​rc-component/​virtual-list@​1.1.0

View full report