perf: uninstall classnames, install clsx (#539)

Author: li-jia-nan

package.json

@@ -46,15 +46,14 @@
     "@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",
     "@rc-component/father-plugin": "^2.0.2",
     "@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",

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 })}

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}

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}`,
     {