feat: ConfigProvider support classNames and styles for menu #53324
Conversation
|
|
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the 📝 WalkthroughSummary by CodeRabbit
Walkthrough本次更改主要提升了菜单组件的定制化能力。通过扩展类型声明和接口，新增了 Changes
Sequence Diagram(s)sequenceDiagram
participant Menu
participant useMergeSemantic
participant MenuContext
participant RcMenu
Menu->>MenuContext: 获取 context 中的 classNames 与 styles
Menu->>useMergeSemantic: 传入 props 自定义的 classNames 与 styles
useMergeSemantic->>MenuContext: 合并 context 与 props 的样式信息
useMergeSemantic-->>Menu: 返回合并后的 classNames 与 styles
Menu->>RcMenu: 渲染菜单并应用合并后的样式
Possibly related PRs
Suggested reviewers
Poem
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:
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 (
|
|
|
👁 Visual Regression Report for PR #53324 Passed ✅
🎊 Congrats! No visual-regression diff found. |
WalkthroughThis pull request introduces a new feature that allows Changes
|
size-limit report 📦
|
Bundle ReportChanges will decrease total bundle size by 7.76MB (-67.46%) ⬇️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: antd.min-array-pushAssets Changed:
Files in
Files in
|
More templates
commit: |
Deploying ant-design with
|
| Latest commit: |
3182766
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://d4c8deed.ant-design.pages.dev |
| Branch Preview URL: | https://cp-menu.ant-design.pages.dev |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## next #53324 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 783 783
Lines 14172 14189 +17
Branches 3724 3730 +6
=========================================
+ Hits 14172 14189 +17 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
604aca9 to
d6850aa
Compare
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (5)
components/menu/MenuItem.tsx (1)
54-57: 应用自定义样式到 title-content 元素通过
cls函数将基础类名与自定义类名classNames?.itemContent结合，并应用可选的styles?.itemContent样式。确保即使classNames或styles未定义时也不会出现错误。components/menu/SubMenu.tsx (1)
39-41: 图标元素样式处理需要考虑空值情况当前代码将
classNames?.itemIcon和styles?.itemIcon直接应用到图标元素上，但没有检查这些值是否存在，可能导致潜在的未定义值问题。建议添加条件检查或使用空值合并运算符来确保安全访问：
- className: cls(oriProps.className, `${prefixCls}-item-icon`, classNames?.itemIcon), - style: { ...oriProps.style, ...styles?.itemIcon }, + className: cls(oriProps.className, `${prefixCls}-item-icon`, classNames?.itemIcon ?? undefined), + style: { ...oriProps.style, ...(styles?.itemIcon ?? {}) },components/menu/menu.tsx (3)
152-152: 确保上下文类名正确应用在组合菜单类名时使用了
contextClassName，但没有检查其是否为 undefined。建议添加条件检查或使用空值合并运算符：
-const menuClassName = cls(`${prefixCls}-${theme}`, contextClassName, className); +const menuClassName = cls(`${prefixCls}-${theme}`, contextClassName ?? undefined, className);
228-235: 确保根类名正确应用在组合根类名时使用了
classNames?.root，但没有检查其是否为 undefined。建议添加条件检查或使用空值合并运算符：
-cls( - rootClassName, - hashId, - overrideObj.rootClassName, - cssVarCls, - rootCls, - classNames?.root, -) +cls( + rootClassName, + hashId, + overrideObj.rootClassName, + cssVarCls, + rootCls, + classNames?.root ?? undefined, +)
38-40:⚠️ Potential issue语义名称类型定义不完整
SemanticName类型缺少 'popup' 值，这与在语义演示中使用的值不一致，会导致类型安全问题。请更新类型定义以包含 'popup'：
-type SemanticName = 'root' | 'item' | 'itemIcon' | 'itemContent'; +type SemanticName = 'root' | 'item' | 'itemIcon' | 'itemContent' | 'popup';
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
.dumi/components/SemanticPreview.tsx(1 hunks)components/config-provider/context.ts(1 hunks)components/menu/MenuContext.tsx(2 hunks)components/menu/MenuItem.tsx(3 hunks)components/menu/SubMenu.tsx(4 hunks)components/menu/__tests__/index.test.tsx(1 hunks)components/menu/demo/_semantic.tsx(1 hunks)components/menu/index.en-US.md(1 hunks)components/menu/index.zh-CN.md(1 hunks)components/menu/menu.tsx(9 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (4)
components/menu/MenuContext.tsx (1)
components/menu/menu.tsx (1)
MenuProps(41-61)
components/menu/demo/_semantic.tsx (2)
components/menu/menu.tsx (1)
MenuProps(41-61).dumi/components/TemplateSemanticPreview.tsx (1)
locales(6-25)
components/config-provider/context.ts (1)
components/menu/menu.tsx (1)
MenuProps(41-61)
components/menu/MenuItem.tsx (2)
components/menu/MenuContext.tsx (1)
MenuContextProps(8-18)components/menu/style/index.ts (1)
prefixCls(980-1111)
🪛 GitHub Actions: Publish Any Commit
components/menu/SubMenu.tsx
[error] 62-62: Type '{ title: ReactElement<unknown, string | JSXElementConstructor>; classNames: { list: string | undefined; listTitle: string | undefined; }; ... 18 more ...; onTitleMouseLeave?: MenuHoverEventHandler | undefined; }' is not assignable to type 'IntrinsicAttributes & Omit<SubMenuProps, "ref"> & RefAttributes'. Property 'classNames' does not exist on type 'IntrinsicAttributes & Omit<SubMenuProps, "ref"> & RefAttributes'. Did you mean 'className'?
components/menu/menu.tsx
[error] 192-192: Type 'Partial<Record<"popup" | SemanticName, CSSProperties>>' is not assignable to type 'Partial<Record<SemanticName, CSSProperties> & { popup?: Partial<Record<PopupName, CSSProperties>> | undefined; }>'. Types of property 'popup' are incompatible.
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: test-react-latest (dom, 2/2)
- GitHub Check: test-react-latest (dom, 1/2)
- GitHub Check: test-react-legacy (18, 2/2)
- GitHub Check: test-react-legacy (18, 1/2)
- GitHub Check: visual-diff snapshot (2/2)
- GitHub Check: visual-diff snapshot (1/2)
- GitHub Check: build preview
- GitHub Check: Cloudflare Pages
🔇 Additional comments (28)
components/menu/index.zh-CN.md (1)
150-152: 增加了语义化 DOM 文档，提升了可用性！添加的"语义化 DOM"部分通过引用 _semantic.tsx 示例代码，向用户展示了如何利用新增的 classNames 和 styles 特性来自定义菜单样式。这与 ConfigProvider 支持菜单 classNames 和 styles 的新功能相符，方便开发者理解如何使用这一特性。
components/menu/__tests__/index.test.tsx (1)
1196-1266: 测试用例很完善，验证了新功能的正确性！这个测试用例很好地验证了菜单组件对 classNames 和 styles 的支持：
- 覆盖了根节点、菜单项、图标、内容等多个组件部分
- 包含了嵌套结构（SubMenu）的测试
- 同时验证了类名添加和样式应用是否正确
测试结构清晰，断言逻辑合理，确保了功能的正确实现。
components/menu/index.en-US.md (1)
150-152: 英文文档也同步添加了语义化 DOM 部分，保持了文档一致性！英文文档中添加的"Semantic DOM"部分与中文文档保持一致，引用了相同的示例代码。这确保了中英文文档的同步更新，有助于国际用户理解如何使用新增的 classNames 和 styles 功能。
components/menu/MenuContext.tsx (2)
4-4: 引入 MenuProps 类型，保持类型定义清晰！从 './menu' 引入 MenuProps 类型是一个好的做法，避免了类型定义的重复，保持了类型系统的一致性。
16-17: 扩展了 MenuContextProps 接口，支持自定义样式！添加 classNames 和 styles 属性到 MenuContextProps 接口中，使得菜单组件可以通过 Context 传递样式信息。这是实现 ConfigProvider 支持菜单自定义样式的关键部分，类型定义也直接引用了 MenuProps 中的定义，保持了类型的一致性。
.dumi/components/SemanticPreview.tsx (1)
91-107: 改进了语义类名的嵌套结构支持代码中改进了
semanticClassNames的实现，新的实现支持通过点号分隔的嵌套语义类名（如popup.listItem）。这样可以更好地组织和管理复杂组件的样式结构，特别是对于菜单这种具有多层级嵌套元素的组件。改动从简单的扁平结构转变为嵌套对象结构，更加灵活。components/config-provider/context.ts (1)
165-166: MenuConfig 类型增加了 classNames 和 styles 支持通过扩展
MenuConfig类型，现在可以通过 ConfigProvider 向菜单组件传递classNames和styles属性，这大大增强了菜单组件的样式定制能力。此更改与MenuProps接口中相应属性的添加相一致，确保了样式配置的一致性传递。components/menu/MenuItem.tsx (4)
4-6: 更新了导入语句，引入更高效的工具函数将
classnames的导入改为cls别名，并引入了@rc-component/util中的toArray和omit工具函数，这有助于代码整洁性和性能优化。
46-48: 从 MenuContext 中获取 styles 和 classNames 属性从上下文中提取
styles和classNames属性，以便在组件内部使用。这是支持 ConfigProvider 中样式定制的关键步骤。
96-104: 菜单项元素支持条件样式应用根据
firstLevel标志动态应用不同的样式和类名，区分顶级菜单项和弹出菜单项。这种方式使得样式可以精确地应用到不同层级的菜单元素上。
107-110: 图标元素支持自定义样式使用
cloneElement函数为图标元素应用自定义类名和样式，同时保留原有属性。这样可以确保图标样式与整体菜单样式保持一致性。components/menu/demo/_semantic.tsx (1)
1-102: 新增菜单组件的语义化预览示例此文件创建了一个演示组件，展示了菜单组件中可以自定义的各种语义类名和样式。通过
SemanticPreview包装器，用户可以直观地了解如何使用classNames和styles属性来定制菜单的各个部分。代码结构清晰，使用了多语言支持（中英文），并展示了水平导航菜单和子菜单的典型用例。这个示例对于理解和使用新增的样式定制功能非常有帮助。
components/menu/SubMenu.tsx (4)
3-4: 引入了 omit 和 cls 模块以支持类名和样式的处理代码重构使用
@rc-component/util/lib/omit模块来移除不需要的属性，并将classnames导入更改为别名cls，使命名更加清晰。
20-20: 从上下文中解构出新增的 classNames 和 styles 属性此处从 MenuContext 中提取了
classNames和styles属性，为组件提供自定义样式的能力。
69-73: 使用 cls 函数合并多个类名使用
cls函数处理弹出菜单的类名合并，包括自定义类名classNames?.popup?.root，提升了样式自定义能力。
75-80: 合并弹出菜单样式属性将
styles?.popup?.root与现有样式合并，增强了弹出菜单的样式自定义能力。components/menu/menu.tsx (12)
6-8: 引入了新的工具函数以支持样式和类名处理代码引入了
useEvent和omit工具函数，并将classnames模块重命名为cls，使代码更加清晰。
10-10: 新增语义化样式合并钩子引入
useMergeSemantic钩子用于合并来自不同来源的类名和样式，这是实现 ConfigProvider 支持菜单样式自定义的关键部分。
16-16: 使用组件配置钩子使用
useComponentConfig钩子获取组件配置，这是连接 ConfigProvider 上下文与菜单组件的桥梁。
53-60: 新增的 classNames 和 styles 属性类型定义为
MenuProps接口添加了classNames和styles属性，支持自定义组件各部分的样式，包括弹出菜单。
86-87: 新增 props 解构从组件 props 中解构出
classNames和styles属性，为后续处理做准备。
93-101: 从配置上下文获取样式和类名使用
useComponentConfig钩子获取 menu 组件相关的配置，包括前缀、弹出容器、方向以及样式和类名相关属性。
103-106: 合并语义化样式和类名使用
useMergeSemantic钩子合并来自上下文和 props 的类名和样式，实现统一和层级化的样式管理。
167-167: 用 cls 替换直接字符串拼接使用
cls函数替代直接的字符串拼接来处理图标类名，提高了代码的可读性和可维护性。
190-192: 添加合并后的样式和类名到上下文将合并后的
mergedClassNames和mergedStyles添加到上下文中，使下级组件能够访问这些样式信息。🧰 Tools
🪛 GitHub Actions: Publish Any Commit
[error] 192-192: Type 'Partial<Record<"popup" | SemanticName, CSSProperties>>' is not assignable to type 'Partial<Record<SemanticName, CSSProperties> & { popup?: Partial<Record<PopupName, CSSProperties>> | undefined; }>'. Types of property 'popup' are incompatible.
193-201: 更新上下文依赖数组更新了
contextValue的依赖数组，包含了新添加的mergedClassNames和mergedStyles，确保上下文在这些值变化时正确重新计算。
211-215: 使用 cls 函数处理溢出指示器弹出类名使用
cls函数合并溢出指示器弹出框的类名，保持与其他地方一致的类名处理方式。
221-221: 合并根元素样式将
mergedStyles?.root与上下文样式和组件样式合并，实现样式的层次化应用。
64e5895 to
5158bf8
Compare
|
有一个坑就是 vertical 和 inline 看起来，应该把第一层元素命名和 subMenu 保持一致来着。但是horizontal下又不是另外两个模式的group(list)结构，又感觉叫 list 怪怪的。待讨论～ |
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
🤔 This is a ...
💡 Background and Solution
wait for react-component/menu#770
react-component/menu#775
合并后记得去评论
close:#50626
📝 Change Log