feat: make full antd style #22
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
📝 WalkthroughWalkthrough此次更改主要调整了组件黑名单 Changes
Sequence Diagram(s)sequenceDiagram
participant 调用方
participant defaultNode
participant ComponentCustomizeRender
调用方->>defaultNode: 请求渲染组件
defaultNode-->>ComponentCustomizeRender: 检查是否有自定义渲染
alt 有自定义渲染
ComponentCustomizeRender-->>defaultNode: 返回自定义JSX
else 没有自定义渲染
defaultNode-->>调用方: 返回默认JSX
end
defaultNode-->>调用方: 返回最终组件节点
Possibly related PRs
Poem
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
tests/index.test.tsxOops! Something went wrong! :( ESLint: 8.57.1 Error: Cannot read config file: /.eslintrc.js
src/index.tsxOops! Something went wrong! :( ESLint: 8.57.1 Error: Cannot read config file: /.eslintrc.js
✨ 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. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![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/index.tsx (1)
79-79: 过滤逻辑更新合理，但条件表达式可读性有待提升更新过滤逻辑以显式包含 'notification' 和 'message' 组件是合理的，因为这些组件名不符合首字母大写的命名约定。
建议提升代码可读性：
- ![...defaultBlackList, ...excludes].includes(name) && (name[0] === name[0].toUpperCase() || ['notification', 'message'].includes(name)), + ![...defaultBlackList, ...excludes].includes(name) && + (name[0] === name[0].toUpperCase() || ['notification', 'message'].includes(name)),或者更清晰的写法：
- ![...defaultBlackList, ...excludes].includes(name) && (name[0] === name[0].toUpperCase() || ['notification', 'message'].includes(name)), + { + const isNotBlacklisted = ![...defaultBlackList, ...excludes].includes(name); + const isCapitalized = name[0] === name[0].toUpperCase(); + const isSpecialComponent = ['notification', 'message'].includes(name); + return isNotBlacklisted && (isCapitalized || isSpecialComponent); + }tests/index.test.tsx (1)
72-73: 测试覆盖改进良好，验证了新的组件包含逻辑新增的测试断言很好地验证了 notification 和 message 组件现在会被包含在样式提取中，这与源代码的更改保持一致。
这些测试确保了：
- notification 和 message 组件的样式被正确提取
- 黑名单过滤逻辑按预期工作
- 与现有的 Button 和 Card 组件测试保持一致
建议考虑添加更多测试用例来覆盖新的自定义渲染函数：
+ it('should extract styles for components with custom render functions', () => { + const cssText = extractStyle(); + expect(cssText).toContain('.ant-tag'); + expect(cssText).toContain('.ant-badge'); + expect(cssText).toContain('.ant-space'); + expect(cssText).toContain('.ant-modal'); + });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/index.tsx(2 hunks)tests/index.test.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: setup
🔇 Additional comments (2)
src/index.tsx (2)
30-63: 请补充类型定义并验证私有 API 的稳定性新增的渲染器逻辑基本合理，但为了增强类型安全和稳定性，建议：
- 避免使用
any，为 Badge、Space、Modal、message、notification 等渲染函数补充精确的组件类型。- 私有 API
_InternalPanelDoNotUseOrYouWillBeFired未在公开文档中说明，请确认其在当前 antd 版本中的稳定性或是否存在公开替代方案。- 如确实需要使用该私有面板，建议在调用处添加容错逻辑（如 try/catch 或条件判断），以防未来升级时 API 变动导致运行时错误。
示例类型调整（请根据项目中实际引入的 antd 版本校准）：
- Badge: (Badge: any) => ( + Badge: (Badge: React.ComponentType<any> & { Ribbon: React.ComponentType<any> }) => ( - Space: (Space: any) => ( + Space: (Space: React.ComponentType<any> & { Compact: React.ComponentType<any> }) => ( - Modal: (Modal: any) => ( + Modal: (Modal: React.ComponentType<any> & { _InternalPanelDoNotUseOrYouWillBeFired: React.ComponentType<any> }) => ( - message: (message: any) => { + message: (message: { _InternalPanelDoNotUseOrYouWillBeFired: React.ComponentType<any> }) => { - notification: (notification: any) => { + notification: (notification: { _InternalPanelDoNotUseOrYouWillBeFired: React.ComponentType<any> }) => {请针对以上几点进行确认与调整，确保类型正确且对私有 API 的依赖可控。
7-10: 确认黑名单调整实际影响• 受影响文件：
src/index.tsx（7–10 行），defaultBlackList中移除了
['Drawer', 'Modal', 'Popconfirm', 'Popover', 'Tooltip', 'Tour']。
• 搜索结果：
– Drawer、Popconfirm、Popover、Tooltip、Tour 在.tsx/.ts文件中均未被引用，移除它们不会改变样式提取结果。
– 仅 Modal 在src/index.tsx中有引用，移除后会将 Modal 样式纳入提取，可能导致样式包体积增大。请确认：
- 是否确实需要将 Modal 样式包含在提取中？如是，是否已评估样式文件大小的变化？
- 如需保留本次变更，是否同步更新文档或变更日志说明对黑名单的调整？
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit
新功能
修复
测试
.ant-notification和.ant-message样式被正确包含。