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

* fix(menu): fix head-menu not render icon * chore(menu): change parseTNode render icon * test(menu): update test snap
Tencent · Jan 9, 2025 · 116cb47 · 116cb47
1 parent 47b0a80
commit 116cb47
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 36 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 {}
 
@@ -107,7 +108,8 @@ const SubAccordion: FC<SubMenuWithCustomizeProps> = (props) => {
         })}
         onClick={handleClick}
       >
-        {icon} <span className={`${classPrefix}-menu__content`}>{title}</span>
+        {parseTNode(icon)}
+        <span className={`${classPrefix}-menu__content`}>{title}</span>
         <FakeArrow style={fakeArrowStyle} isActive={isOpen} disabled={disabled} />
       </div>
       {!isPopUp && (
@@ -153,7 +155,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 +226,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();
+  });
 });