fix(menu): 修复 mini 模式下子菜单内容展示不全问题 (#2656)

XiaoMi · Nov 6, 2023 · b78487c · b78487c
1 parent 7db6a8f
commit b78487c
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 13 deletions.
diff --git a/.changeset/thick-news-joke.md b/.changeset/thick-news-joke.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/hiui": patch
+---
+
+Menu fix: 修复 mini 模式下子菜单内容展示不全问题
diff --git a/.changeset/wet-snails-cover.md b/.changeset/wet-snails-cover.md
@@ -0,0 +1,5 @@
+---
+"@hi-ui/menu": patch
+---
+
+fix: 修复 mini 模式下子菜单内容展示不全问题
diff --git a/packages/ui/menu/src/Menu.tsx b/packages/ui/menu/src/Menu.tsx
@@ -227,6 +227,18 @@ export const Menu = forwardRef<HTMLDivElement | null, MenuProps>(
       )
     }
 
+    const renderItem = useCallback(
+      (menuItem: MenuDataItem, level?: number) => {
+        // 显示缩略内容
+        if (showMini && level === 1) {
+          return renderMenuItemMini(menuItem)
+        }
+
+        return isFunction(render) ? render(menuItem, level) : menuItem.title
+      },
+      [render, showMini]
+    )
+
     const cls = cx(
       prefixCls,
       className,
@@ -260,19 +272,13 @@ export const Menu = forwardRef<HTMLDivElement | null, MenuProps>(
             {mergedTagList.map((item, index) => {
               return showMini ? (
                 <Tooltip title={item.title} key={item.id} placement="right">
-                  <MenuItem
-                    {...item}
-                    level={1}
-                    render={renderMenuItemMini}
-                    raw={item}
-                    size={size}
-                  />
+                  <MenuItem {...item} level={1} render={renderItem} raw={item} size={size} />
                 </Tooltip>
               ) : (
                 <MenuItem
                   hidden={!showVertical && index >= tagMaxCount}
                   {...item}
-                  render={render}
+                  render={renderItem}
                   key={item.id}
                   level={1}
                   raw={item}
@@ -372,7 +378,7 @@ export interface MenuProps extends Omit<HiBaseHTMLProps<'div'>, 'onClick'> {
   /**
    * 自定义渲染菜单项
    */
-  render?: (menuItem: MenuDataItem) => React.ReactNode
+  render?: (menuItem: MenuDataItem, level?: number) => React.ReactNode
   /**
    * 额外的头部内容
    */

diff --git a/packages/ui/menu/src/MenuItem.tsx b/packages/ui/menu/src/MenuItem.tsx
@@ -108,7 +108,7 @@ export const MenuItem = forwardRef<HTMLLIElement | null, MenuItemProps>(
 
             {icon ? <span className={`${prefixCls}-item__icon`}>{icon}</span> : null}
             <span className={`${prefixCls}-item__content`}>
-              {isFunction(render) ? render({ id, icon, title }) : title}
+              {isFunction(render) ? render({ id, icon, title }, level) : title}
             </span>
             {/* 垂直菜单-纵向展开 */}
             {hasChildren &&
@@ -315,7 +315,7 @@ export const MenuItem = forwardRef<HTMLLIElement | null, MenuItemProps>(
                             }}
                             className={cx(`${prefixCls}-item`, {
                               [`${prefixCls}-item--active`]: activeId === item.id,
-                              [`${prefixCls}-item--disabled`]: item.disabled
+                              [`${prefixCls}-item--disabled`]: item.disabled,
                             })}
                             key={item.id}
                           >
@@ -409,7 +409,7 @@ export const MenuItem = forwardRef<HTMLLIElement | null, MenuItemProps>(
                           <div
                             className={cx(`${prefixCls}-item`, {
                               [`${prefixCls}-item--active`]: activeId === item.id,
-                              [`${prefixCls}-item--disabled`]: item.disabled
+                              [`${prefixCls}-item--disabled`]: item.disabled,
                             })}
                             onClick={() => {
                               if (!item.disabled) {
@@ -443,7 +443,7 @@ export interface MenuItemProps extends Omit<HiBaseHTMLProps<'li'>, 'id'> {
   children?: MenuDataItem[]
   level?: number
   parentIds?: React.ReactText[]
-  render?: (node: MenuDataItem) => React.ReactNode
+  render?: (node: MenuDataItem, level?: number) => React.ReactNode
   raw?: MenuDataItem
   size?: HiBaseSizeEnum
 }