From 5ab0d76c6f55538de3374ab055bf043711b23c76 Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Sun, 28 Sep 2025 02:24:09 +0800
Subject: [PATCH] perf: uninstall classnames, install clsx

---
 package.json         |  3 +--
 src/Collapse.tsx     |  5 +++--
 src/Panel.tsx        | 10 +++++-----
 src/PanelContent.tsx | 13 ++++++-------
 4 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/package.json b/package.json
index ae7ae3c..f942231 100644
--- a/package.json
+++ b/package.json
@@ -48,7 +48,7 @@
     "@babel/runtime": "^7.10.1",
     "@rc-component/motion": "^1.1.4",
     "@rc-component/util": "^1.3.0",
-    "classnames": "2.x"
+    "clsx": "^2.1.1"
   },
   "devDependencies": {
     "@rc-component/father-plugin": "^2.0.1",
@@ -56,7 +56,6 @@
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.5.2",
-    "@types/classnames": "^2.2.9",
     "@types/jest": "^29.4.0",
     "@types/node": "^24.2.0",
     "@types/react": "^19.1.4",
diff --git a/src/Collapse.tsx b/src/Collapse.tsx
index 20eeb38..5348fd3 100644
--- a/src/Collapse.tsx
+++ b/src/Collapse.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import { useControlledState, useEvent } from '@rc-component/util';
 import warning from '@rc-component/util/lib/warning';
 import React from 'react';
@@ -36,12 +36,13 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
     styles,
   } = props;
 
-  const collapseClassName = classNames(prefixCls, className);
+  const collapseClassName = clsx(prefixCls, className);
 
   const [internalActiveKey, setActiveKey] = useControlledState<React.Key[] | React.Key>(
     defaultActiveKey,
     rawActiveKey,
   );
+
   const activeKey = getActiveKeysArray(internalActiveKey);
 
   const triggerActiveKey = useEvent((next) => {
diff --git a/src/Panel.tsx b/src/Panel.tsx
index f5e7bb2..4fa1e34 100644
--- a/src/Panel.tsx
+++ b/src/Panel.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import CSSMotion from '@rc-component/motion';
 import KeyCode from '@rc-component/util/lib/KeyCode';
 import React from 'react';
@@ -52,7 +52,7 @@ const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((prop
     typeof expandIcon === 'function' ? expandIcon(props) : <i className="arrow" />;
   const iconNode = iconNodeInner && (
     <div
-      className={classNames(`${prefixCls}-expand-icon`, customizeClassNames?.icon)}
+      className={clsx(`${prefixCls}-expand-icon`, customizeClassNames?.icon)}
       style={styles?.icon}
       {...(['header', 'icon'].includes(collapsible) ? collapsibleProps : {})}
     >
@@ -60,7 +60,7 @@ const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((prop
     </div>
   );
 
-  const collapsePanelClassNames = classNames(
+  const collapsePanelClassNames = clsx(
     `${prefixCls}-item`,
     {
       [`${prefixCls}-item-active`]: isActive,
@@ -69,7 +69,7 @@ const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((prop
     className,
   );
 
-  const headerClassName = classNames(
+  const headerClassName = clsx(
     headerClass,
     `${prefixCls}-header`,
     {
@@ -91,7 +91,7 @@ const CollapsePanel = React.forwardRef<HTMLDivElement, CollapsePanelProps>((prop
       <div {...headerProps}>
         {showArrow && iconNode}
         <span
-          className={classNames(`${prefixCls}-title`, customizeClassNames?.title)}
+          className={clsx(`${prefixCls}-title`, customizeClassNames?.title)}
           style={styles?.title}
           {...(collapsible === 'header' ? collapsibleProps : {})}
         >
diff --git a/src/PanelContent.tsx b/src/PanelContent.tsx
index f62bd30..81d88b8 100644
--- a/src/PanelContent.tsx
+++ b/src/PanelContent.tsx
@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import React from 'react';
 import type { CollapsePanelProps } from './interface';
 
@@ -33,7 +33,7 @@ const PanelContent = React.forwardRef<
   return (
     <div
       ref={ref}
-      className={classnames(
+      className={clsx(
         `${prefixCls}-panel`,
         {
           [`${prefixCls}-panel-active`]: isActive,
@@ -44,16 +44,15 @@ const PanelContent = React.forwardRef<
       style={style}
       role={role}
     >
-      <div
-        className={classnames(`${prefixCls}-body`, customizeClassNames?.body)}
-        style={styles?.body}
-      >
+      <div className={clsx(`${prefixCls}-body`, customizeClassNames?.body)} style={styles?.body}>
         {children}
       </div>
     </div>
   );
 });
 
-PanelContent.displayName = 'PanelContent';
+if (process.env.NODE_ENV !== 'production') {
+  PanelContent.displayName = 'PanelContent';
+}
 
 export default PanelContent;