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

---
 package.json         |  3 +--
 src/DrawerPanel.tsx  |  4 ++--
 src/DrawerPopup.tsx  | 38 +++++++++++---------------------------
 src/hooks/useDrag.ts |  4 ++--
 4 files changed, 16 insertions(+), 33 deletions(-)

diff --git a/package.json b/package.json
index 8af86736..192ec688 100644
--- a/package.json
+++ b/package.json
@@ -46,7 +46,7 @@
     "@rc-component/motion": "^1.1.4",
     "@rc-component/portal": "^2.0.0",
     "@rc-component/util": "^1.2.1",
-    "classnames": "^2.2.6"
+    "clsx": "^2.1.1"
   },
   "devDependencies": {
     "@ant-design/icons": "^5.3.0",
@@ -54,7 +54,6 @@
     "@rc-component/np": "^1.0.0",
     "@testing-library/jest-dom": "^6.2.0",
     "@testing-library/react": "^16.3.0",
-    "@types/classnames": "^2.2.9",
     "@types/jest": "^29.5.11",
     "@types/node": "^24.3.0",
     "@types/raf": "^3.4.0",
diff --git a/src/DrawerPanel.tsx b/src/DrawerPanel.tsx
index a8e08374..29c05216 100644
--- a/src/DrawerPanel.tsx
+++ b/src/DrawerPanel.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import * as React from 'react';
 import { RefContext } from './context';
 import pickAttrs from '@rc-component/util/lib/pickAttrs';
@@ -43,7 +43,7 @@ const DrawerPanel: React.FC<Readonly<DrawerPanelProps>> = props => {
 
   return (
     <div
-      className={classNames(`${prefixCls}-section`, className)}
+      className={clsx(`${prefixCls}-section`, className)}
       role="dialog"
       ref={mergedRef}
       {...pickAttrs(props, { aria: true })}
diff --git a/src/DrawerPopup.tsx b/src/DrawerPopup.tsx
index 900a1a41..4f2a9f15 100644
--- a/src/DrawerPopup.tsx
+++ b/src/DrawerPopup.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import type { CSSMotionProps } from '@rc-component/motion';
 import CSSMotion from '@rc-component/motion';
 import KeyCode from '@rc-component/util/lib/KeyCode';
@@ -248,17 +248,13 @@ const DrawerPopup: React.ForwardRefRenderFunction<
         maskRef,
       ) => (
         <div
-          className={classNames(
+          className={clsx(
             `${prefixCls}-mask`,
             motionMaskClassName,
             drawerClassNames?.mask,
             maskClassName,
           )}
-          style={{
-            ...motionMaskStyle,
-            ...maskStyle,
-            ...styles?.mask,
-          }}
+          style={{ ...motionMaskStyle, ...maskStyle, ...styles?.mask }}
           onClick={maskClosable && open ? onClose : undefined}
           ref={maskRef}
         />
@@ -372,11 +368,8 @@ const DrawerPopup: React.ForwardRefRenderFunction<
             id={id}
             containerRef={motionRef}
             prefixCls={prefixCls}
-            className={classNames(className, drawerClassNames?.section)}
-            style={{
-              ...style,
-              ...styles?.section,
-            }}
+            className={clsx(className, drawerClassNames?.section)}
+            style={{ ...style, ...styles?.section }}
             {...pickAttrs(props, { aria: true })}
             {...eventHandlers}
           >
@@ -386,17 +379,13 @@ const DrawerPopup: React.ForwardRefRenderFunction<
         return (
           <div
             ref={wrapperRef}
-            className={classNames(
+            className={clsx(
               `${prefixCls}-content-wrapper`,
               isDragging && `${prefixCls}-content-wrapper-dragging`,
               drawerClassNames?.wrapper,
               !isDragging && motionClassName,
             )}
-            style={{
-              ...motionStyle,
-              ...wrapperStyle,
-              ...styles?.wrapper,
-            }}
+            style={{ ...motionStyle, ...wrapperStyle, ...styles?.wrapper }}
             {...pickAttrs(props, { data: true })}
           >
             {isResizable && <div {...dragElementProps} />}
@@ -419,15 +408,10 @@ const DrawerPopup: React.ForwardRefRenderFunction<
   return (
     <DrawerContext.Provider value={mergedContext}>
       <div
-        className={classNames(
-          prefixCls,
-          `${prefixCls}-${placement}`,
-          rootClassName,
-          {
-            [`${prefixCls}-open`]: open,
-            [`${prefixCls}-inline`]: inline,
-          },
-        )}
+        className={clsx(prefixCls, `${prefixCls}-${placement}`, rootClassName, {
+          [`${prefixCls}-open`]: open,
+          [`${prefixCls}-inline`]: inline,
+        })}
         style={containerStyle}
         tabIndex={-1}
         ref={panelRef}
diff --git a/src/hooks/useDrag.ts b/src/hooks/useDrag.ts
index 234a352b..b33fbf9d 100644
--- a/src/hooks/useDrag.ts
+++ b/src/hooks/useDrag.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import type { Placement } from '../Drawer';
 import { useEvent } from '@rc-component/util';
 
@@ -120,7 +120,7 @@ export default function useDrag(options: UseDragOptions): UseDragReturn {
     }
   }, [isDragging, handleMouseMove, handleMouseUp]);
 
-  const dragElementClassName = classNames(
+  const dragElementClassName = clsx(
     `${prefixCls}-dragger`,
     `${prefixCls}-dragger-${direction}`,
     {