From 78891128b0b8060f585528c3b86ca8f4c425e2b0 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Sun, 28 Sep 2025 12:32:53 +0800 Subject: [PATCH 1/2] perf: uninstall classnames, install clsx --- package.json | 2 +- src/Divider.tsx | 2 +- src/Menu.tsx | 4 ++-- src/MenuItem.tsx | 4 ++-- src/MenuItemGroup.tsx | 8 ++++---- src/SubMenu/PopupTrigger.tsx | 8 +++----- src/SubMenu/SubMenuList.tsx | 12 +++++++----- src/SubMenu/index.tsx | 4 ++-- tests/Private.spec.tsx | 10 +++------- 9 files changed, 25 insertions(+), 29 deletions(-) diff --git a/package.json b/package.json index 198c7455..f6ba6184 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,7 @@ "@rc-component/motion": "^1.1.4", "@rc-component/trigger": "^3.0.0", "@rc-component/util": "^1.3.0", - "classnames": "2.x", + "clsx": "^2.1.1", "rc-overflow": "^1.3.1" }, "devDependencies": { diff --git a/src/Divider.tsx b/src/Divider.tsx index 616af405..50228fb4 100644 --- a/src/Divider.tsx +++ b/src/Divider.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import classNames from 'classnames'; +import { clsx } from 'clsx'; import { MenuContext } from './context/MenuContext'; import { useMeasure } from './context/PathContext'; import type { MenuDividerType } from './interface'; diff --git a/src/Menu.tsx b/src/Menu.tsx index 2bca5add..b87d2024 100644 --- a/src/Menu.tsx +++ b/src/Menu.tsx @@ -1,4 +1,4 @@ -import classNames from 'classnames'; +import { clsx } from 'clsx'; import type { CSSMotionProps } from '@rc-component/motion'; import Overflow from 'rc-overflow'; import useControlledState from '@rc-component/util/lib/hooks/useControlledState'; @@ -563,7 +563,7 @@ const Menu = React.forwardRef((props, ref) => { prefixCls={`${prefixCls}-overflow`} component="ul" itemComponent={MenuItem} - className={classNames( + className={clsx( prefixCls, `${prefixCls}-root`, `${prefixCls}-${internalMode}`, diff --git a/src/MenuItem.tsx b/src/MenuItem.tsx index 6b179e73..952ee41b 100644 --- a/src/MenuItem.tsx +++ b/src/MenuItem.tsx @@ -1,4 +1,4 @@ -import classNames from 'classnames'; +import { clsx } from 'clsx'; import Overflow from 'rc-overflow'; import KeyCode from '@rc-component/util/lib/KeyCode'; import omit from '@rc-component/util/lib/omit'; @@ -214,7 +214,7 @@ const InternalMenuItem = React.forwardRef((props: MenuItemProps, ref: React.Ref< ...directionStyle, ...style, }} - className={classNames( + className={clsx( itemCls, { [`${itemCls}-active`]: active, diff --git a/src/MenuItemGroup.tsx b/src/MenuItemGroup.tsx index 7bc04740..9de75f26 100644 --- a/src/MenuItemGroup.tsx +++ b/src/MenuItemGroup.tsx @@ -1,4 +1,4 @@ -import classNames from 'classnames'; +import { clsx } from 'clsx'; import omit from '@rc-component/util/lib/omit'; import * as React from 'react'; import { MenuContext } from './context/MenuContext'; @@ -30,11 +30,11 @@ const InternalMenuItemGroup = React.forwardRef e.stopPropagation()} - className={classNames(groupPrefixCls, className)} + className={clsx(groupPrefixCls, className)} >
@@ -42,7 +42,7 @@ const InternalMenuItemGroup = React.forwardRef
    {children} diff --git a/src/SubMenu/PopupTrigger.tsx b/src/SubMenu/PopupTrigger.tsx index cd4f46bc..a2a33946 100644 --- a/src/SubMenu/PopupTrigger.tsx +++ b/src/SubMenu/PopupTrigger.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import Trigger from '@rc-component/trigger'; -import classNames from 'classnames'; +import { clsx } from 'clsx'; import raf from '@rc-component/util/lib/raf'; import type { CSSMotionProps } from '@rc-component/motion'; import { MenuContext } from '../context/MenuContext'; @@ -96,11 +96,9 @@ export default function PopupTrigger({ return ( { +export interface SubMenuListProps extends React.HTMLAttributes { children?: React.ReactNode; } @@ -15,7 +14,7 @@ const InternalSubMenuList = ( return (
      ((props, re {...restProps} component="li" style={style} - className={classNames(subMenuPrefixCls, `${subMenuPrefixCls}-${mode}`, className, { + className={clsx(subMenuPrefixCls, `${subMenuPrefixCls}-${mode}`, className, { [`${subMenuPrefixCls}-open`]: open, [`${subMenuPrefixCls}-active`]: mergedActive, [`${subMenuPrefixCls}-selected`]: childrenSelected, diff --git a/tests/Private.spec.tsx b/tests/Private.spec.tsx index 06bdac9b..29116a89 100644 --- a/tests/Private.spec.tsx +++ b/tests/Private.spec.tsx @@ -1,6 +1,6 @@ /* eslint-disable no-undef */ import { render } from '@testing-library/react'; -import classnames from 'classnames'; +import { clsx } from 'clsx'; import React from 'react'; import Menu, { MenuItem, SubMenu } from '../src'; @@ -9,9 +9,7 @@ describe('Private Props', () => { const { container } = render( - React.cloneElement(node, { - className: classnames(node.props.className, 'inject-cls'), - }) + React.cloneElement(node, { className: clsx(node.props.className, 'inject-cls') }) } > 1 @@ -27,9 +25,7 @@ describe('Private Props', () => { mode="inline" openKeys={['1']} _internalRenderSubMenuItem={node => - React.cloneElement(node, { - className: classnames(node.props.className, 'inject-cls'), - }) + React.cloneElement(node, { className: clsx(node.props.className, 'inject-cls') }) } > From 5f9bdaddcd5ce905e4c6246b2246f74693ed9459 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Sun, 28 Sep 2025 12:33:53 +0800 Subject: [PATCH 2/2] perf: uninstall classnames, install clsx --- src/Divider.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/Divider.tsx b/src/Divider.tsx index 50228fb4..a30b177c 100644 --- a/src/Divider.tsx +++ b/src/Divider.tsx @@ -15,10 +15,6 @@ export default function Divider({ className, style }: DividerProps) { } return ( -
    • +
    • ); }