fix(menu): fix head-menu not render icon

Tencent · Jan 8, 2025 · 0d56b54 · 0d56b54
1 parent e24d41c
commit 0d56b54
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 4 deletions.
diff --git a/src/_common b/src/_common
diff --git a/src/menu/SubMenu.tsx b/src/menu/SubMenu.tsx
@@ -12,6 +12,7 @@ import FakeArrow from '../common/FakeArrow';
 import { checkIsSubMenu, checkIsMenuGroup } from './_util/checkMenuType';
 import { cacularPaddingLeft } from './_util/cacularPaddingLeft';
 import { Popup, PopupPlacement } from '../popup';
+import parseTNode from '../_util/parseTNode';
 
 export interface SubMenuProps extends TdSubmenuProps, StyledProps {}
 
@@ -153,7 +154,7 @@ const SubAccordion: FC<SubMenuWithCustomizeProps> = (props) => {
 };
 
 const SubTitleMenu: FC<SubMenuWithCustomizeProps> = (props) => {
-  const { className, style, children, disabled, title, value, level = 1, popupProps } = props;
+  const { className, style, children, disabled, icon, title, value, level = 1, popupProps } = props;
 
   const { overlayClassName, overlayInnerClassName, ...restPopupProps } = popupProps || {};
 
@@ -224,6 +225,7 @@ const SubTitleMenu: FC<SubMenuWithCustomizeProps> = (props) => {
         onClick={handleClick}
         style={style}
       >
+        {parseTNode(icon)}
         <span>{title}</span>
         {isPopUp && <FakeArrow style={fakeArrowStyle} isActive={level === 1 && open} />}
       </div>

diff --git a/src/menu/__tests__/menu.test.tsx b/src/menu/__tests__/menu.test.tsx
@@ -1,5 +1,6 @@
 import { render, fireEvent, vi, waitFor } from '@test/utils';
 import React from 'react';
+import { UserIcon } from 'tdesign-icons-react';
 import Menu from '../index';
 
 describe('Menu 组件测试', () => {
@@ -192,4 +193,19 @@ describe('Menu 组件测试', () => {
     fireEvent.click(getByText('仪表盘'));
     expect(clickFn).toHaveBeenCalledTimes(1);
   });
+
+  test('menu head-menu render icon', async () => {
+    const { container, getByText } = render(
+      <HeadMenu>
+        <SubMenu value="sub-2" title="水果蔬菜" icon={<UserIcon />}>
+          <MenuItem value="5">
+            <span>苹果</span>
+          </MenuItem>
+        </SubMenu>
+      </HeadMenu>,
+    );
+
+    expect(getByText('水果蔬菜')).toBeInTheDocument();
+    expect(container.querySelector('.t-icon-user')).toBeInTheDocument();
+  });
 });