perf: uninstall classnames, install clsx (#402)

Author: li-jia-nan

package.json

@@ -48,15 +48,14 @@
     "@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",
     "@rc-component/np": "^1.0.4",
     "@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",

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) => {

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,15 +52,15 @@ 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 : {})}
     >
       {iconNodeInner}
     </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 : {})}
         >

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;