feat: Panel use optionRender #618
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Walkthrough在 Panel 组件中新增公开属性 optionRender，并通过 CascaderContext 向下传递；相应更新了类型定义与 useMemo 依赖。新增测试覆盖 Panel 的 optionRender 渲染行为与动态变更。 Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant Panel as Panel
participant Ctx as CascaderContext
participant Menu as Menu/OptionItem
User->>Panel: render with { optionRender }
Panel->>Ctx: provide { ... , optionRender }
Ctx-->>Menu: consume optionRender
Menu->>Menu: optionRender(option) -> ReactNode
Menu-->>User: display customized option content
note over Panel,Ctx: 当 optionRender 变化时，useMemo 促使上下文更新
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 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 @EmilyyyLiu, 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 enhances the Panel component by adding a new optionRender prop. This feature provides users with the ability to customize the visual representation of individual options, significantly increasing the component's flexibility and adaptability to diverse UI design requirements.
Highlights
- New Feature: Custom Option Rendering: Introduced an
optionRenderprop to thePanelcomponent, allowing developers to provide a custom function for rendering individual options within the panel. - Type Definition and Prop Integration: Updated the
PickTypedefinition insrc/Panel.tsxto includeoptionRenderand integrated the prop into the component's internal logic and memoization dependencies. - Comprehensive Test Coverage: Added a new test case in
tests/Panel.spec.tsxto thoroughly validate the functionality of theoptionRenderprop, ensuring it correctly customizes option display, including for disabled options.
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. ↩
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #618 +/- ##
=======================================
Coverage 99.83% 99.83%
=======================================
Files 23 23
Lines 612 612
Branches 186 186
=======================================
Hits 611 611
Misses 1 1 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/Panel.tsx (1)
164-165: 添加尾随逗号popupMenuColumnStyle: undefined, - optionRender + optionRender,tests/Panel.spec.tsx (1)
114-133: 断言更稳健与命名一致性：使用 textContent，测试名与文件风格保持统一；另建议补一例仅变更 optionRender 的重渲染
- 建议用 textContent 避免与潜在的 HTML 结构/转义耦合。
- 测试名可与本文件其余用例风格统一（如 “optionRender in Panel”）。
可微调如下：
- it('Should optionRender work in Panel', () => { + it('optionRender in Panel', () => { @@ - expect(container.querySelector('.rc-cascader-menu-item-content')?.innerHTML).toEqual( + expect(container.querySelector('.rc-cascader-menu-item-content')?.textContent).toEqual( 'bamboo - test', ); @@ - expect(container.querySelector('.rc-cascader-menu-item-content')?.innerHTML).toEqual( + expect(container.querySelector('.rc-cascader-menu-item-content')?.textContent).toEqual( '{"label":"bamboo","disabled":true,"value":"bamboo"}', );另外可新增一例仅替换 optionRender（不改 options），以验证依赖项变更触发渲染更新：
it('optionRender update only', () => { const { container, rerender } = render( <Cascader.Panel options={[{ label: 'bamboo', value: 'bamboo' }]} optionRender={o => o.label} />, ); expect(container.querySelector('.rc-cascader-menu-item-content')?.textContent).toEqual('bamboo'); rerender( <Cascader.Panel options={[{ label: 'bamboo', value: 'bamboo' }]} optionRender={o => `${o.label}-x`} />, ); expect(container.querySelector('.rc-cascader-menu-item-content')?.textContent).toEqual('bamboo-x'); });
📜 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 (2)
src/Panel.tsx(4 hunks)tests/Panel.spec.tsx(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
🔇 Additional comments (3)
src/Panel.tsx (3)
39-41: 将 disabled 与 optionRender 纳入 Panel 的公开类型，修正类型缺口并公开新能力这同步了 Panel 实际支持的 props（此前测试已使用 disabled）与类型定义，方向正确。建议在变更说明/文档中补充 “Panel 现支持 disabled 与 optionRender” 以避免使用者遗漏。
74-74: 解构新增 optionRender 合理与下文 Context 透传保持一致，无其他问题。
178-179: useMemo 依赖补齐 optionRender确保自定义渲染变更时及时触发重算，👍。
相关issue：ant-design/ant-design#54839
Panel 支持使用optionRender自定义渲染选项
Summary by CodeRabbit
新功能
测试