feat: add forceRender api
https://github.com/ant-design/ant-design/issues/54798 #54798
Summary by CodeRabbit
新功能
- 为表格可展开行新增
forceRender选项,允许根据指定条件强制渲染行的展开内容。支持布尔值或自定义回调函数配置,提供更灵活的展开行控制能力。
Someone is attempting to deploy a commit to the React Component Team on Vercel.
A member of the Team first needs to authorize it.
功能概览
表格组件的 expandable 配置中添加了新的 forceRender 选项,允许通过布尔值或函数来控制指定行是否强制渲染展开内容,无论该行当前是否处于展开状态。
变更汇总
| 类别 / 文件 | 变更描述 |
|---|---|
类型定义和接口更新 src/interface.ts, src/context/TableContext.tsx |
新增 forceRender 可选属性到 ExpandableConfig 和 TableContextProps,类型为 boolean | ((record: RecordType) => boolean),支持条件式强制渲染 |
主表格组件集成 src/Table.tsx |
从 expandable 配置中提取 forceRender,将其传入 TableContext 和相关的渲染逻辑,并添加到依赖数组以确保上下文正确更新 |
上下文传播 src/Body/index.tsx |
从 TableContext 解构 forceRender,并将其作为 prop 传递给每个 BodyRow 组件 |
行渲染逻辑 src/Body/BodyRow.tsx |
新增 forceRender prop,引入 shouldForceRender() 辅助函数,将强制渲染条件集成到展开行渲染的条件判断中 |
使用示例 docs/examples/expandedRowRender.tsx |
展示在 expandable 配置中使用 forceRender 回调函数,对特定行(key 为 0)强制渲染展开内容的用法 |
序列图
sequenceDiagram
participant User
participant Table
participant Body
participant BodyRow
User->>Table: 传入 expandable 配置 (含 forceRender)
Table->>Table: 从 expandableConfig 提取 forceRender
Table->>Table: 将 forceRender 放入 TableContext
Body->>Body: 从 TableContext 解构 forceRender
Body->>BodyRow: 逐行传递 forceRender prop
BodyRow->>BodyRow: 调用 shouldForceRender(record, index)
alt forceRender 返回 true
BodyRow->>BodyRow: 强制渲染展开行内容
else forceRender 返回 false
BodyRow->>BodyRow: 根据现有 expanded 状态决定是否渲染
end
代码审查工作量评估
🎯 3 (中等复杂度) | ⏱️ ~20-25 分钟
该 PR 涉及多个文件的协调变更,从接口定义到组件实现,再到上下文传播形成了完整的特性链路。变更模式相对一致(均为在各层添加 forceRender 支持),但需要验证:(1) 类型定义的一致性;(2) 上下文传播链路的正确性;(3) BodyRow 中的条件渲染逻辑是否正确处理了 forceRender 与现有 expanded 状态的交互。
可能相关的 PR
- react-component/table#1261: 同样修改表格渲染管线的多个层级(Table、TableContext、Body、BodyRow),通过上下文和 props 传播新的配置字段。
建议审查者
- afc163
- zombieJ
- MadCcc
兔子的诗
🐰 展开行有新魔法,
forceRender 让你掌控,
层层传递若春风,
条件渲染成永恒,
表格优雅又灵动!✨
Pre-merge checks and finishing touches
❌ Failed checks (1 warning)
| Check name | Status | Explanation | Resolution |
|---|---|---|---|
| Docstring Coverage | ⚠️ Warning | Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. | You can run @coderabbitai generate docstrings to improve docstring coverage. |
✅ Passed checks (2 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Title Check | ✅ Passed | PR标题"feat: add forceRender api"清晰地反映了本次变更集的主要目标。根据提供的原始总结,所有更改都围绕一个核心功能展开:在表格组件中添加新的forceRender API,该功能通过在ExpandableConfig、TableContext和BodyRowProps中添加forceRender属性,使用户能够强制渲染展开行。标题简洁明了,不含模糊措辞或无关内容,准确传达了变更的要点。 |
✨ Finishing touches
- [ ] 📝 Generate docstrings
🧪 Generate unit tests (beta)
- [ ] Create PR with unit tests
- [ ] Post copyable unit tests in a comment
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 help to get the list of available commands and usage tips.
Summary of Changes
Hello @rubbishmaker, I'm Gemini Code Assist[^1]! 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 introduces a new forceRender API to the Table component's expandable configuration, providing enhanced control over the rendering lifecycle of expanded rows. This feature allows developers to ensure that the content of expanded rows is always present in the DOM, even when visually collapsed, which can be crucial for scenarios requiring consistent DOM presence, such as for accessibility or complex interactions. The implementation seamlessly integrates this new capability across the table's internal components, from the main Table down to individual BodyRows.
Highlights
-
New
forceRenderAPI: Introduced a newforceRenderproperty within theexpandableconfiguration of theTablecomponent. This API allows expanded rows to be rendered in the DOM even when they are not visually expanded, either globally or conditionally based on a record. -
Conditional Rendering Control: The
forceRenderAPI accepts either a boolean value to force render all expanded rows, or a function that receives the record and its index to conditionally force render specific rows. -
Integration with Table Components: The
forceRenderproperty is propagated through theTableContextand utilized by theBodyRowcomponent to determine whether an expanded row's content should be rendered regardless of its expanded state.
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 by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.
| 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 pull request 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 :thumbsup: and :thumbsdown: 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.
[^1]: 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.
Codecov Report
:x: Patch coverage is 85.71429% with 2 lines in your changes missing coverage. Please review.
:white_check_mark: Project coverage is 96.05%. Comparing base (998c134) to head (d773321).
| Files with missing lines | Patch % | Lines |
|---|---|---|
| src/Body/BodyRow.tsx | 75.00% | 2 Missing :warning: |
Additional details and impacted files
@@ Coverage Diff @@
## master #1386 +/- ##
==========================================
- Coverage 96.09% 96.05% -0.05%
==========================================
Files 57 57
Lines 3434 3447 +13
Branches 632 634 +2
==========================================
+ Hits 3300 3311 +11
- Misses 129 131 +2
Partials 5 5
:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.
:rocket: New features to boost your workflow:
- :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
- :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.