refactor: update component renders from antd#28
Conversation
- Enhance Layout render with all sub-components (Header, Sider, Content, Footer) - Add Input.Password to Input render - Add Input.Group with nested Inputs - Move Space.Addon inside Space.Compact with content - Add default Modal._InternalPanelDoNotUseOrYouWillBeFired - Simplify Cascader and Layout render functions Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
Warning Rate limit exceeded
⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📝 WalkthroughWalkthrough在 Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes 诗意庆祝
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 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 |
- Add test for Modal.confirm style extraction - Add Input.Group deprecation warning to allowed list - Fix minor formatting issues (trailing commas, semicolons) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Add explicit types for component render functions (typeof antd.XXX) - Optimize import statements structure - Apply consistent code formatting Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (1)
tests/index.test.tsx (1)
83-86: 让Modal.confirm用例只覆盖Modal分支。现在这里调用
extractStyle()会把整套组件都渲染一遍，这个断言更像是全量烟测，回归定位也会更模糊。建议收窄到includes: ['Modal']，让它直接验证这次新增的Modal渲染逻辑。可选修改
it('should extract Modal.confirm', () => { - const cssText = extractStyle(); + const cssText = extractStyle({ + includes: ['Modal'], + }); expect(cssText).toContain('.ant-modal-confirm-title'); });🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@tests/index.test.tsx` around lines 83 - 86, The test "should extract Modal.confirm" currently calls extractStyle() without scoping and renders all components; update the call to extractStyle({ includes: ['Modal'] }) so the run only covers the Modal branch and verifies Modal.confirm-specific output (keep the expect(cssText).toContain('.ant-modal-confirm-title') assertion). Locate the call to extractStyle in the test and replace it with the scoped options form to limit rendering to the Modal component.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@tests/index.test.tsx`:
- Around line 83-86: The test "should extract Modal.confirm" currently calls
extractStyle() without scoping and renders all components; update the call to
extractStyle({ includes: ['Modal'] }) so the run only covers the Modal branch
and verifies Modal.confirm-specific output (keep the
expect(cssText).toContain('.ant-modal-confirm-title') assertion). Locate the
call to extractStyle in the test and replace it with the scoped options form to
limit rendering to the Modal component.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 369db342-6ecf-405d-afe4-19e62345d787
📒 Files selected for processing (2)
tests/index.test.tsxtests/ssr.test.tsx
Summary of ChangesHello, 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 refactors the component rendering logic within the static style extraction utility for Ant Design. The primary goal is to ensure that a wider range of Ant Design components and their sub-components, including various Input types, Layout sections, Space.Compact with Addon, and Modal internal panels, are correctly rendered and their styles are extracted. This enhancement improves the robustness of server-side rendering (SSR) and static style generation by covering more component variations and simplifying existing render functions. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Changelog
Using Gemini Code AssistThe 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
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 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
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
The code changes add renderers for Cascader, Input, and Layout components, and modify the existing Space renderer. The reviewer suggests that the Cascader and Layout renderers should accept the component as a parameter for consistency, and that the Cascader component should include the options prop to prevent runtime errors. The reviewer also suggests that the Space and Input and Modal renderers should be typed with a specific type instead of 'any' for better type safety and consistency.
| BackTop: () => <antd.FloatButton.BackTop />, | ||
| Cascader: (Cascader: typeof antd.Cascader) => ( | ||
| <> | ||
| <Cascader /> | ||
| <Cascader.Panel /> | ||
| </> |
There was a problem hiding this comment.
For consistency with other component renderers in this file, the Cascader renderer should accept the component as a parameter instead of hardcoding antd.Cascader. The defaultNode function is designed to pass the component to this renderer. Additionally, the Cascader and Cascader.Panel components require an options prop, which is missing and could cause runtime warnings or errors.
| BackTop: () => <antd.FloatButton.BackTop />, | |
| Cascader: (Cascader: typeof antd.Cascader) => ( | |
| <> | |
| <Cascader /> | |
| <Cascader.Panel /> | |
| </> | |
| Cascader: (Cascader: typeof antd.Cascader) => ( | |
| <> | |
| <Cascader options={[]} /> | |
| <Cascader.Panel options={[]} /> | |
| </> | |
| ), |
| ), | ||
| Space: (Space: any) => ( | ||
| Space: (Space: typeof antd.Space) => ( | ||
| <> | ||
| <Space /> | ||
| <Space.Addon /> | ||
| <Space.Compact> | ||
| <antd.Button /> | ||
| <Space.Addon>1</Space.Addon> | ||
| </Space.Compact> | ||
| </> |
There was a problem hiding this comment.
The Space renderer hardcodes antd.Space.Addon instead of using the Addon from the passed Space component. Also, the Space parameter is typed as any. For consistency and type safety, it should use the passed component and have a specific type.
| ), | |
| Space: (Space: any) => ( | |
| Space: (Space: typeof antd.Space) => ( | |
| <> | |
| <Space /> | |
| <Space.Addon /> | |
| <Space.Compact> | |
| <antd.Button /> | |
| <Space.Addon>1</Space.Addon> | |
| </Space.Compact> | |
| </> | |
| Space: (Space: typeof antd.Space) => ( | |
| <> | |
| <Space /> | |
| <Space.Compact> | |
| <antd.Button /> | |
| <Space.Addon>1</Space.Addon> | |
| </Space.Compact> | |
| </> | |
| ), |
| ), | ||
| Modal: (Modal: any) => ( | ||
| Input: (Input: typeof antd.Input) => ( | ||
| <> | ||
| <Input /> | ||
| <Input.Group> | ||
| <Input /> | ||
| <Input /> | ||
| </Input.Group> | ||
| <Input.Search /> | ||
| <Input.TextArea /> | ||
| <Input.Password /> | ||
| <Input.OTP /> | ||
| </> |
There was a problem hiding this comment.
The Input parameter is typed as any. For better type safety and consistency with how components were previously typed, it's better to use a specific type like typeof antd.Input.
| ), | |
| Modal: (Modal: any) => ( | |
| Input: (Input: typeof antd.Input) => ( | |
| <> | |
| <Input /> | |
| <Input.Group> | |
| <Input /> | |
| <Input /> | |
| </Input.Group> | |
| <Input.Search /> | |
| <Input.TextArea /> | |
| <Input.Password /> | |
| <Input.OTP /> | |
| </> | |
| Input: (Input: typeof antd.Input) => ( | |
| <> | |
| <Input /> | |
| <Input.Group> | |
| <Input /> | |
| <Input /> | |
| </Input.Group> | |
| <Input.Search /> | |
| <Input.TextArea /> | |
| <Input.Password /> | |
| <Input.OTP /> | |
| </> | |
| ), |
| ), | ||
| Modal: (Modal: typeof antd.Modal) => ( | ||
| <> | ||
| <Modal /> | ||
| <Modal._InternalPanelDoNotUseOrYouWillBeFired /> | ||
| <Modal._InternalPanelDoNotUseOrYouWillBeFired type="confirm" /> | ||
| </> |
There was a problem hiding this comment.
The Modal parameter is typed as any. For better type safety and consistency, it's better to use a specific type like typeof antd.Modal.
| ), | |
| Modal: (Modal: typeof antd.Modal) => ( | |
| <> | |
| <Modal /> | |
| <Modal._InternalPanelDoNotUseOrYouWillBeFired /> | |
| <Modal._InternalPanelDoNotUseOrYouWillBeFired type="confirm" /> | |
| </> | |
| Modal: (Modal: typeof antd.Modal) => ( | |
| <> | |
| <Modal /> | |
| <Modal._InternalPanelDoNotUseOrYouWillBeFired /> | |
| <Modal._InternalPanelDoNotUseOrYouWillBeFired type="confirm" /> | |
| </> | |
| ), |
| }, | ||
| Layout: (Layout: typeof antd.Layout) => ( | ||
| <> | ||
| <Layout /> | ||
| <Layout.Sider /> | ||
| </> | ||
| ), | ||
| Cascader: (Cascader: typeof antd.Cascader) => ( | ||
| <> | ||
| <Cascader options={[]} /> | ||
| <Cascader.Panel options={[]} /> | ||
| </> | ||
| ), | ||
| Input: (Input: typeof antd.Input) => ( | ||
| <> | ||
| <Input /> | ||
| <Input.OTP /> | ||
| <Input.Search /> | ||
| <Input.TextArea /> | ||
| </> | ||
| <Layout> | ||
| <Layout.Header>Header</Layout.Header> | ||
| <Layout.Sider>Sider</Layout.Sider> | ||
| <Layout.Content>Content</Layout.Content> | ||
| <Layout.Footer>Footer</Layout.Footer> | ||
| </Layout> |
There was a problem hiding this comment.
For consistency with other component renderers, the Layout renderer should accept the component as a parameter. The current implementation ignores the component passed by defaultNode and hardcodes antd.Layout. Using the passed parameter makes the code more robust and consistent.
| }, | |
| Layout: (Layout: typeof antd.Layout) => ( | |
| <> | |
| <Layout /> | |
| <Layout.Sider /> | |
| </> | |
| ), | |
| Cascader: (Cascader: typeof antd.Cascader) => ( | |
| <> | |
| <Cascader options={[]} /> | |
| <Cascader.Panel options={[]} /> | |
| </> | |
| ), | |
| Input: (Input: typeof antd.Input) => ( | |
| <> | |
| <Input /> | |
| <Input.OTP /> | |
| <Input.Search /> | |
| <Input.TextArea /> | |
| </> | |
| <Layout> | |
| <Layout.Header>Header</Layout.Header> | |
| <Layout.Sider>Sider</Layout.Sider> | |
| <Layout.Content>Content</Layout.Content> | |
| <Layout.Footer>Footer</Layout.Footer> | |
| </Layout> | |
| Layout: (Layout: typeof antd.Layout) => ( | |
| <Layout> | |
| <Layout.Header>Header</Layout.Header> | |
| <Layout.Sider>Sider</Layout.Sider> | |
| <Layout.Content>Content</Layout.Content> | |
| <Layout.Footer>Footer</Layout.Footer> | |
| </Layout> | |
| ), |
2 participants
Summary
Test plan
🤖 Generated with Claude Code
Summary by CodeRabbit
发布说明