From b78487cd725532000f81876e1826f1918c37b23a Mon Sep 17 00:00:00 2001
From: zhouyun1 <zhouyun1@xiaomi.com>
Date: Mon, 6 Nov 2023 14:35:15 +0800
Subject: [PATCH] =?UTF-8?q?fix(menu):=20=E4=BF=AE=E5=A4=8D=20mini=20?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E4=B8=8B=E5=AD=90=E8=8F=9C=E5=8D=95=E5=86=85?=
 =?UTF-8?q?=E5=AE=B9=E5=B1=95=E7=A4=BA=E4=B8=8D=E5=85=A8=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=20(#2656)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/thick-news-joke.md     |  5 +++++
 .changeset/wet-snails-cover.md    |  5 +++++
 packages/ui/menu/src/Menu.tsx     | 24 +++++++++++++++---------
 packages/ui/menu/src/MenuItem.tsx |  8 ++++----
 4 files changed, 29 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/thick-news-joke.md
 create mode 100644 .changeset/wet-snails-cover.md

diff --git a/.changeset/thick-news-joke.md b/.changeset/thick-news-joke.md
new file mode 100644
index 000000000..7e664397d
--- /dev/null
+++ 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
new file mode 100644
index 000000000..b5bcd47bb
--- /dev/null
+++ 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
index 50bbf7aea..586790d15 100644
--- 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
index bb3b24ab7..42b1a3391 100644
--- 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
 }