diff --git a/packages/components/menu/SubMenu.tsx b/packages/components/menu/SubMenu.tsx index bd6afd3bcc..1522b525aa 100644 --- a/packages/components/menu/SubMenu.tsx +++ b/packages/components/menu/SubMenu.tsx @@ -1,6 +1,6 @@ -import classNames from 'classnames'; import React, { FC, ReactElement, useContext, useMemo, useRef } from 'react'; import { CSSTransition } from 'react-transition-group'; +import classNames from 'classnames'; import parseTNode from '../_util/parseTNode'; import FakeArrow from '../common/FakeArrow'; @@ -12,7 +12,6 @@ import { Popup, type PopupPlacement } from '../popup'; import { calculatePaddingLeft } from './_util/calculatePaddingLeft'; import { checkIsMenuGroup, checkIsSubMenu } from './_util/checkMenuType'; import checkSubMenuChildrenActive from './_util/checkSubMenuChildrenActive'; -import { getSubMenuMaxHeight } from './_util/getSubMenuChildStyle'; import { MenuContext } from './MenuContext'; import type { StyledProps } from '../common'; @@ -59,9 +58,8 @@ const SubAccordion: FC = (props) => { }), ); - // 计算有多少子节点并设置最大高度，为做出动画效果 const childStyle = { - maxHeight: isExpand || (open && isPopUp) ? getSubMenuMaxHeight(children) : 0, + maxHeight: isExpand ? undefined : 0, }; // 是否展开（popup 与 expand 两种状态） diff --git a/packages/components/menu/__tests__/menu.test.tsx b/packages/components/menu/__tests__/menu.test.tsx index f10004b30b..f0b15dcc56 100644 --- a/packages/components/menu/__tests__/menu.test.tsx +++ b/packages/components/menu/__tests__/menu.test.tsx @@ -1,4 +1,4 @@ -import { render, fireEvent, vi, waitFor } from '@test/utils'; +import { fireEvent, render, vi, waitFor } from '@test/utils'; import React from 'react'; import { UserIcon } from 'tdesign-icons-react'; import Menu from '../index'; @@ -48,19 +48,27 @@ describe('Menu 组件测试', () => { }); test('menu defaultExpanded works fine', () => { - const { container, queryByText } = renderSubmenu({ defaultExpanded: ['1'] }); + const { container } = renderSubmenu({ defaultExpanded: ['1'] }); expect(container.firstChild).not.toHaveClass('t-is-collapsed'); expect(container.querySelectorAll('.t-submenu.t-is-opened').length).toBe(1); - expect(queryByText('菜单二').parentElement.parentElement.parentElement.style.maxHeight).not.toBe('0'); - expect(queryByText('二级菜单-1').parentElement.parentElement.parentElement.style.maxHeight).toBe('0'); + + const submenu1 = container.querySelectorAll('.t-submenu')[0]; + expect(submenu1).toHaveClass('t-is-opened'); + + const submenu2 = container.querySelectorAll('.t-submenu')[1]; + expect(submenu2).not.toHaveClass('t-is-opened'); }); test('menu expanded works fine', () => { - const { container, queryByText } = renderSubmenu({ expanded: ['1'] }); + const { container } = renderSubmenu({ expanded: ['1'] }); expect(container.firstChild).not.toHaveClass('t-is-collapsed'); expect(container.querySelectorAll('.t-submenu.t-is-opened').length).toBe(1); - expect(queryByText('菜单二').parentElement.parentElement.parentElement.style.maxHeight).not.toBe('0'); - expect(queryByText('二级菜单-1').parentElement.parentElement.parentElement.style.maxHeight).toBe('0'); + + const submenu1 = container.querySelectorAll('.t-submenu')[0]; + expect(submenu1).toHaveClass('t-is-opened'); + + const submenu2 = container.querySelectorAll('.t-submenu')[1]; + expect(submenu2).not.toHaveClass('t-is-opened'); }); test('menu 测试单层导航', () => { @@ -151,7 +159,7 @@ describe('Menu 组件测试', () => { expect(onExpandFn).toHaveBeenCalledTimes(1); }); - test('menu 测试分组导航', () => { + test('menu 测试分组导航', () => { const clickFn = vi.fn(); const { container, queryByText, getByText } = render( @@ -170,10 +178,12 @@ describe('Menu 组件测试', () => { expect(container.querySelectorAll('.t-submenu').length).toBe(1); fireEvent.click(getByText('仪表盘')); expect(clickFn).toHaveBeenCalledTimes(1); - const ulNode = queryByText('基础列表项').parentElement.parentElement; - expect(ulNode.style.maxHeight).toBe('0'); + + const submenu = container.querySelector('.t-submenu'); + expect(submenu).not.toHaveClass('t-is-opened'); + fireEvent.click(getByText('列表项')); - expect(ulNode.style.maxHeight).not.toBe('0'); + expect(submenu).toHaveClass('t-is-opened'); }); test('menu 測試 menuItem onClick事件', () => { diff --git a/packages/components/menu/_util/getSubMenuChildStyle.ts b/packages/components/menu/_util/getSubMenuChildStyle.ts deleted file mode 100644 index f564205443..0000000000 --- a/packages/components/menu/_util/getSubMenuChildStyle.ts +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import { checkIsSubMenu, checkIsMenuGroup } from './checkMenuType'; - -export const getSubMenuChildCount = (children: React.ReactNode) => { - let count = 0; - React.Children.forEach(children, (child: React.ReactElement) => { - if (checkIsSubMenu(child) || checkIsMenuGroup(child)) { - count += getSubMenuChildCount(child.props.children) + 1; - } else { - count += 1; - } - }); - - return count; -}; - -const MENU_ITEM_HEIGHT = 50; -export const getSubMenuMaxHeight = (children: React.ReactNode) => getSubMenuChildCount(children) * MENU_ITEM_HEIGHT; diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index 3a9ff84862..1537212132 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -71681,7 +71681,7 @@ exports[`csr snapshot test > csr test packages/components/menu/_example/multi-si
  • csr test packages/components/menu/_example/multi-si
    • csr test packages/components/menu/_example/multi-si
      • csr test packages/components/menu/_example/multi-si
        • ssr test packages/components/menu/_example/double.t exports[`ssr snapshot test > ssr test packages/components/menu/_example/group-side.tsx 1`] = `"
            主导航
          • 仪表盘
            • 组件
          • 列表项
            • 基础列表项
            • 卡片列表项
            • 筛选列表项
            • 树状筛选列表项
          • 表单项
          • 详情页
          • 结果页
            • 更多
          • 个人页
          • 登录页
          "`; -exports[`ssr snapshot test > ssr test packages/components/menu/_example/multi-side.tsx 1`] = `"
          • 仪表盘
          • 资源列表
            • 菜单二
          • 调度平台
            • 二级菜单-1
              • 三级菜单-1
              • 三级菜单-2
              • 三级菜单-3
            • 二级菜单-2
          • 精准监控
            • 二级菜单-1
            • 二级菜单-2
          • 根目录
          • 消息区
            • 二级菜单-1
            • 二级菜单-2
          • 仪表盘
          • 资源列表
            • 二级菜单-1
              • 三级菜单-1
              • 三级菜单-2
              • 三级菜单-3
          • 调度平台
            • 二级菜单-1
            • 二级菜单-2
          • 精准监控
            • 二级菜单-1
            • 二级菜单-2
          • 根目录
          • 消息区
            • 二级菜单-1
            • 二级菜单-2
          "`; +exports[`ssr snapshot test > ssr test packages/components/menu/_example/multi-side.tsx 1`] = `"
          • 仪表盘
          • 资源列表
            • 菜单二
          • 调度平台
            • 二级菜单-1
              • 三级菜单-1
              • 三级菜单-2
              • 三级菜单-3
            • 二级菜单-2
          • 精准监控
            • 二级菜单-1
            • 二级菜单-2
          • 根目录
          • 消息区
            • 二级菜单-1
            • 二级菜单-2
          • 仪表盘
          • 资源列表
            • 二级菜单-1
              • 三级菜单-1
              • 三级菜单-2
              • 三级菜单-3
          • 调度平台
            • 二级菜单-1
            • 二级菜单-2
          • 精准监控
            • 二级菜单-1
            • 二级菜单-2
          • 根目录
          • 消息区
            • 二级菜单-1
            • 二级菜单-2
          "`; exports[`ssr snapshot test > ssr test packages/components/menu/_example/multiple.tsx 1`] = `"
          • 电器
          • 女装
          • 水果蔬菜
          • 其他
          • 电器
          • 女装
          • 水果蔬菜
          • 其他
          "`; diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap index 24bec44cc6..b240505eeb 100644 --- a/test/snap/__snapshots__/ssr.test.jsx.snap +++ b/test/snap/__snapshots__/ssr.test.jsx.snap @@ -648,7 +648,7 @@ exports[`ssr snapshot test > ssr test packages/components/menu/_example/double.t exports[`ssr snapshot test > ssr test packages/components/menu/_example/group-side.tsx 1`] = `"
            主导航
          • 仪表盘
            • 组件
          • 列表项
            • 基础列表项
            • 卡片列表项
            • 筛选列表项
            • 树状筛选列表项
          • 表单项
          • 详情页
          • 结果页
            • 更多
          • 个人页
          • 登录页
          "`; -exports[`ssr snapshot test > ssr test packages/components/menu/_example/multi-side.tsx 1`] = `"
          • 仪表盘
          • 资源列表
            • 菜单二
          • 调度平台
            • 二级菜单-1
              • 三级菜单-1
              • 三级菜单-2
              • 三级菜单-3
            • 二级菜单-2
          • 精准监控
            • 二级菜单-1
            • 二级菜单-2
          • 根目录
          • 消息区
            • 二级菜单-1
            • 二级菜单-2
          • 仪表盘
          • 资源列表
            • 二级菜单-1
              • 三级菜单-1
              • 三级菜单-2
              • 三级菜单-3
          • 调度平台
            • 二级菜单-1
            • 二级菜单-2
          • 精准监控
            • 二级菜单-1
            • 二级菜单-2
          • 根目录
          • 消息区
            • 二级菜单-1
            • 二级菜单-2
          "`; +exports[`ssr snapshot test > ssr test packages/components/menu/_example/multi-side.tsx 1`] = `"
          • 仪表盘
          • 资源列表
            • 菜单二
          • 调度平台
            • 二级菜单-1
              • 三级菜单-1
              • 三级菜单-2
              • 三级菜单-3
            • 二级菜单-2
          • 精准监控
            • 二级菜单-1
            • 二级菜单-2
          • 根目录
          • 消息区
            • 二级菜单-1
            • 二级菜单-2
          • 仪表盘
          • 资源列表
            • 二级菜单-1
              • 三级菜单-1
              • 三级菜单-2
              • 三级菜单-3
          • 调度平台
            • 二级菜单-1
            • 二级菜单-2
          • 精准监控
            • 二级菜单-1
            • 二级菜单-2
          • 根目录
          • 消息区
            • 二级菜单-1
            • 二级菜单-2
          "`; exports[`ssr snapshot test > ssr test packages/components/menu/_example/multiple.tsx 1`] = `"
          • 电器
          • 女装
          • 水果蔬菜
          • 其他
          • 电器
          • 女装
          • 水果蔬菜
          • 其他
          "`;