feat: add popupRender prop to support custom popup content #747
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
Walkthrough新增了关于自定义弹出层渲染的文档章节、示例代码及样式文件，同时在核心组件（Menu、SubMenu、MenuContext 和接口定义）中增加了对 Changes
Sequence Diagram(s)sequenceDiagram
participant U as 用户
participant M as Menu组件
participant SM as 子菜单组件
participant PR as popupRender函数
participant D as 自定义渲染组件
U->>M: 鼠标悬停或点击菜单项
M->>SM: 通知显示子菜单
SM->>PR: 检查并调用 popupRender（若定义）
alt 使用自定义 popupRender
PR->>D: 返回自定义渲染内容
D-->>SM: 替换默认渲染
else 未使用自定义
SM-->>SM: 使用默认渲染
end
SM-->>M: 展示最终弹出层效果
Suggested reviewers
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
.eslintrc.jsOops! Something went wrong! :( ESLint: 8.57.1 Error: Cannot read config file: /.eslintrc.js
src/Menu.tsxOops! Something went wrong! :( ESLint: 8.57.1 Error: Cannot read config file: /.eslintrc.js
src/context/MenuContext.tsxOops! Something went wrong! :( ESLint: 8.57.1 Error: Cannot read config file: /.eslintrc.js
✨ Finishing Touches
🪧 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 (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (7)
src/interface.ts (1)
146-149: 建议改进 PopupRender 类型定义
info参数中的item类型使用any过于宽松，建议使用更具体的类型定义。建议如下修改：
export type PopupRender = ( node: React.ReactElement, - info: { item: any; keys: string[] }, + info: { item: SubMenuType | MenuItemType; keys: string[] }, ) => React.ReactNode;docs/examples/customPopupRender.tsx (2)
70-82: 建议优化 popupRender 函数的性能当前实现在每次渲染时都会重新创建函数，建议使用
useCallback来优化性能。建议如下修改：
+import { useCallback } from 'react'; const NavigationDemo = () => { - const popupRender = (node: ReactElement) => ( + const popupRender = useCallback((node: ReactElement) => ( <div className="navigation-popup"> <div className="navigation-grid"> {React.Children.map(node.props.children.props.children, child => ( <div className="navigation-item"> {React.cloneElement(child, { className: `${child.props.className || ''} navigation-menu-item`, })} </div> ))} </div> </div> - ); + ), []);
7-69: 建议添加 menuItems 的类型定义为了提高代码的可维护性和类型安全性，建议为
menuItems添加明确的类型定义。建议如下修改：
+import type { ItemType } from 'rc-menu'; const NavigationDemo = () => { - const menuItems = [ + const menuItems: ItemType[] = [ { key: 'home', label: 'Home', }, // ... ];tests/popupRender.test.tsx (1)
6-175: 建议增加更多边缘测试用例当前的测试覆盖了基本功能，但建议添加以下场景的测试：
- 处理
popupRender返回null的情况- 测试动态切换
popupRender函数- 测试错误处理场景
我可以帮助生成这些额外的测试用例，是否需要？
src/SubMenu/index.tsx (1)
281-303: 建议优化 renderPopupContent 函数的实现当前实现逻辑清晰，但建议考虑以下优化：
- 添加对
mergedPopupRender返回值的类型检查- 考虑添加错误边界处理
建议修改实现如下：
const mergedPopupRender = propsPopupRender || contextPopupRender; const renderPopupContent = () => { const triggerMode = triggerModeRef.current; const originNode = ( <MenuContextProvider mode={triggerMode === 'horizontal' ? 'vertical' : triggerMode} > <SubMenuList id={popupId} ref={popupRef}> {children} </SubMenuList> </MenuContextProvider> ); + try { if (mergedPopupRender) { - return mergedPopupRender(originNode, { + const customNode = mergedPopupRender(originNode, { item: props, keys: connectedPath, }); + return React.isValidElement(customNode) ? customNode : originNode; } return originNode; + } catch (error) { + console.error('Failed to render custom popup content:', error); + return originNode; + } };docs/examples/customPopupRender.less (2)
1-44: 建议优化 navigation-popup 样式实现当前导航弹出层样式结构清晰，但建议考虑以下优化：
- 考虑添加媒体查询以支持响应式布局
- 建议使用 CSS 变量管理颜色和间距值
- 可以添加暗色主题支持
建议添加如下样式：
+:root { + --navigation-popup-padding: 24px; + --navigation-popup-bg: #fff; + --navigation-popup-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); + --navigation-text-secondary: rgba(0, 0, 0, 0.45); +} +@media (max-width: 768px) { + .navigation-popup { + min-width: 100%; + + .navigation-grid { + grid-template-columns: 1fr; + } + } +} +@media (prefers-color-scheme: dark) { + :root { + --navigation-popup-bg: #1f1f1f; + --navigation-popup-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); + --navigation-text-secondary: rgba(255, 255, 255, 0.45); + } +}
46-76: 建议优化 panel-popup 样式实现面板弹出层样式实现简洁，但建议：
- 使用 CSS 变量统一管理样式值
- 添加过渡动画提升交互体验
- 考虑无障碍支持
建议添加如下样式：
+.panel-popup { + /* ... existing styles ... */ + + .panel-content { + .rc-menu-item { + /* ... existing styles ... */ + + transition: background-color 0.2s ease; + + &:focus-visible { + outline: 2px solid #1890ff; + outline-offset: -1px; + } } } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
docs/demo/customPopupRender.md(1 hunks)docs/examples/customPopupRender.less(1 hunks)docs/examples/customPopupRender.tsx(1 hunks)src/Menu.tsx(4 hunks)src/SubMenu/index.tsx(6 hunks)src/context/MenuContext.tsx(2 hunks)src/interface.ts(1 hunks)tests/popupRender.test.tsx(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- docs/demo/customPopupRender.md
🔇 Additional comments (3)
src/context/MenuContext.tsx (1)
11-11: 代码变更看起来不错！新增的
popupRender属性和相关类型导入的位置恰当，保持了代码的整洁性和可维护性。Also applies to: 50-50
src/SubMenu/index.tsx (1)
7-7: 新增 PopupRender 类型导入和接口定义
popupRender属性的添加增强了 SubMenu 组件的自定义能力，使其能够支持自定义弹出层内容渲染。Also applies to: 39-39
src/Menu.tsx (1)
34-34: 完善 Menu 组件的 PopupRender 支持
popupRender属性的添加使 Menu 组件能够在全局层面支持自定义弹出层渲染，与 SubMenu 组件形成完整的自定义渲染体系。Also applies to: 163-163
| node: ReactElement, | ||
| info: { item: any; keys: string[] }, | ||
| ) => { | ||
| const isSecondLevel = info.keys.length == 2; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
修复相等性比较
使用 == 进行相等性比较不是最佳实践，建议使用 ===。
建议如下修改：
- const isSecondLevel = info.keys.length == 2;
+ const isSecondLevel = info.keys.length === 2;Also applies to: 114-114
zombieJ
reviewed
Feb 18, 2025
src/SubMenu/index.tsx
Outdated
| const mergedPopupRender = propsPopupRender || contextPopupRender; | ||
|
|
||
| // renderPopupContent | ||
| const renderPopupContent = () => { |
There was a problem hiding this comment.
看起来不用封装成一个函数，如果为了代码结构可以考虑直接改成 useMemo
zombieJ
reviewed
Feb 18, 2025
tests/popupRender.test.tsx
Outdated
| import type { ReactElement } from 'react'; | ||
|
|
||
| describe('Menu PopupRender Tests', () => { | ||
| // 基础测试数据 |
zombieJ
reviewed
Feb 18, 2025
tests/popupRender.test.tsx
Outdated
| </SubMenu> | ||
| </Menu>, | ||
| ); | ||
| fireEvent.mouseEnter(screen.getByText('Test')); |
There was a problem hiding this comment.
不用这么复杂，直接 Menu 受控展开 key 就行了，我们只需要测 render，交互不用测
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #747 +/- ##
==========================================
+ Coverage 99.59% 99.72% +0.13%
==========================================
Files 27 27
Lines 742 734 -8
Branches 203 198 -5
==========================================
- Hits 739 732 -7
+ Misses 3 2 -1 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
zombieJ
reviewed
Mar 2, 2025
src/interface.ts
Outdated
|
|
||
| export type PopupRender = ( | ||
| node: React.ReactElement, | ||
| info: { item: any; keys: string[] }, |
zombieJ
reviewed
Mar 2, 2025
src/SubMenu/index.tsx
Outdated
| </SubMenuList> | ||
| </MenuContextProvider> | ||
| } | ||
| popup={renderPopupContent} |
There was a problem hiding this comment.
@MadCcc 有点蛋疼，这个 Context 还是需要重构去掉。
MadCcc
approved these changes
Mar 12, 2025
|
CI 挂了 |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (9)
docs/examples/customPopupRender.tsx (9)
88-88: 改进类型安全性
info参数中的item属性使用了any类型，这降低了类型安全性。建议定义一个更具体的接口或类型。- const totalPopupRender = (node: ReactElement, info: { item: any; keys: string[] }) => { + interface PopupRenderInfo { + item: { + title?: string; + [key: string]: any; + }; + keys: string[]; + } + + const totalPopupRender = (node: ReactElement, info: PopupRenderInfo) => {
107-107: 类型定义复用此处
info参数的类型定义与totalPopupRender中的相同，应考虑提取共用的类型定义。+ interface PopupRenderInfo { + item: { + title?: string; + [key: string]: any; + }; + keys: string[]; + } - const singlePopupRender = (node: ReactElement, info: { item: any; keys: string[] }) => { + const singlePopupRender = (node: ReactElement, info: PopupRenderInfo) => {
113-113: 添加空值检查
info.item.title没有进行空值检查，可能导致运行时错误。- <h4>{info.item.title}</h4> + <h4>{info.item?.title || 'Untitled'}</h4>
70-82: 添加错误处理和可访问性支持当
node.props.children.props.children可能为 undefined 时，缺少错误处理。同时，建议添加 ARIA 属性以提高可访问性。const popupRender = (node: ReactElement) => ( - <div className="navigation-popup"> - <div className="navigation-grid"> + <div className="navigation-popup" role="menu" aria-orientation="horizontal"> + <div className="navigation-grid"> + {node.props.children?.props?.children ? ( {React.Children.map(node.props.children.props.children, child => ( - <div className="navigation-item"> + <div className="navigation-item" role="menuitem"> {React.cloneElement(child, { className: `${child.props.className || ''} navigation-menu-item`, })} </div> ))} + ) : null} </div> </div> );
91-103: 添加错误处理和可访问性支持类似于
NavigationDemo中的popupRender，这里也需要添加错误处理和可访问性支持。return ( - <div className="navigation-popup"> - <div className="navigation-grid"> + <div className="navigation-popup" role="menu" aria-orientation="horizontal"> + <div className="navigation-grid"> + {node.props.children?.props?.children ? ( {React.Children.map(node.props.children.props.children, child => ( - <div className="navigation-item"> + <div className="navigation-item" role="menuitem"> {React.cloneElement(child, { className: `${child.props.className || ''} navigation-menu-item`, })} </div> ))} + ) : null} </div> </div> );
110-117: 添加可访问性支持建议为自定义弹出面板添加适当的 ARIA 属性，以提高可访问性。
return ( - <div className="panel-popup"> + <div className="panel-popup" role="menu" aria-labelledby="panel-header-title"> <div className="panel-header"> - <h4>{info.item.title}</h4> + <h4 id="panel-header-title">{info.item?.title || 'Untitled'}</h4> </div> - <div className="panel-content">{node}</div> + <div className="panel-content" role="group">{node}</div> </div> );
6-85: 添加组件文档建议为组件添加 JSDoc 注释，说明组件的用途和用法。
+/** + * NavigationDemo 组件展示了如何使用 popupRender 自定义导航菜单的弹出层样式。 + * 该示例创建了一个水平导航栏，弹出层以网格布局显示子菜单项。 + */ const NavigationDemo = () => { // 组件实现... };
87-152: 添加组件文档建议为组件添加 JSDoc 注释，说明组件的用途和用法。
+/** + * MixedPanelDemo 组件展示了如何在不同级别（菜单级和子菜单级）使用 popupRender。 + * 该示例包含两种不同的弹出层渲染函数： + * - totalPopupRender: 用于整个菜单的弹出层渲染 + * - singlePopupRender: 仅用于特定子菜单的弹出层渲染 + */ const MixedPanelDemo = () => { // 组件实现... };
154-164: 添加组件文档为示例的主要组件添加 JSDoc 注释，以便于理解其用途。
+/** + * Demo 组件展示了使用 popupRender 自定义弹出层的不同方式。 + * 包含两个示例： + * - NavigationDemo: 展示全局自定义弹出层 + * - MixedPanelDemo: 展示混合使用全局和局部自定义弹出层 + */ const Demo = () => { // 组件实现... };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
docs/examples/customPopupRender.tsx(1 hunks)
🔇 Additional comments (2)
docs/examples/customPopupRender.tsx (2)
89-89: 使用严格相等运算符使用
==进行相等性比较不是最佳实践，建议使用===。建议如下修改：
- const isSecondLevel = info.keys.length == 2; + const isSecondLevel = info.keys.length === 2;
108-108: 使用严格相等运算符使用
==进行相等性比较不是最佳实践，建议使用===。建议如下修改：
- const isSecondLevel = info.keys.length == 2; + const isSecondLevel = info.keys.length === 2;
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
.eslintrc.js (1)
15-21: 更新ESLint规则配置这些变更禁用了多个TypeScript的ESLint规则，这与新增的
popupRender属性相关功能一致。注意到第15行将@typescript-eslint/no-empty-interface的格式从字符串"off"改为数字0，两者功能相同但保持了一致的格式风格。新增的规则都设置为0（禁用），允许代码中使用：
- 空接口
- 不同风格的索引对象
- 非详尽的switch语句
- 类中的参数属性
- 抛出非Error对象
- 不一致的类型注解空格
- 被认为有问题的类型（如
Object、{}等）这种方式简化了开发，但长期来看，建议考虑是否所有这些规则都需要完全禁用，或者可以有选择地启用某些规则以提高代码质量。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
.eslintrc.js(1 hunks)src/Menu.tsx(14 hunks)src/context/MenuContext.tsx(5 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- src/context/MenuContext.tsx
- src/Menu.tsx
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.
This implements the RFC for customizable SubMenu popup content.
Summary by CodeRabbit