From 5c705790cf15b3ca51c2d0d336a3947250841d2e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com>
Date: Sun, 17 Sep 2023 09:36:17 +0800
Subject: [PATCH 1/3] feat: support classNames

---
 src/Drawer.tsx       |  2 ++
 src/DrawerPopup.tsx  |  8 ++++++++
 src/inter.ts         |  4 ++++
 tests/index.spec.tsx | 16 ++++++++++++++++
 4 files changed, 30 insertions(+)
 create mode 100644 src/inter.ts

diff --git a/src/Drawer.tsx b/src/Drawer.tsx
index 70210dcd..4dfe6440 100644
--- a/src/Drawer.tsx
+++ b/src/Drawer.tsx
@@ -7,6 +7,7 @@ import type { DrawerPanelEvents } from './DrawerPanel';
 import type { DrawerPopupProps } from './DrawerPopup';
 import DrawerPopup from './DrawerPopup';
 import { warnCheck } from './util';
+import type { DrawerClassNames } from './inter';
 
 export type Placement = 'left' | 'top' | 'right' | 'bottom';
 
@@ -19,6 +20,7 @@ export interface DrawerProps
   destroyOnClose?: boolean;
   getContainer?: PortalProps['getContainer'];
   panelRef?: React.Ref<HTMLDivElement>;
+  classNames?: DrawerClassNames;
 }
 
 const Drawer: React.FC<DrawerProps> = props => {
diff --git a/src/DrawerPopup.tsx b/src/DrawerPopup.tsx
index b37566e4..b15fddef 100644
--- a/src/DrawerPopup.tsx
+++ b/src/DrawerPopup.tsx
@@ -9,6 +9,7 @@ import DrawerContext from './context';
 import type { DrawerPanelEvents } from './DrawerPanel';
 import DrawerPanel from './DrawerPanel';
 import { parseWidthHeight } from './util';
+import type { DrawerClassNames } from './inter';
 
 const sentinelStyle: React.CSSProperties = {
   width: 0,
@@ -63,6 +64,9 @@ export interface DrawerPopupProps extends DrawerPanelEvents {
   onClose?: (
     event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
   ) => void;
+
+  // classNames
+  classNames?: DrawerClassNames;
 }
 
 function DrawerPopup(props: DrawerPopupProps, ref: React.Ref<HTMLDivElement>) {
@@ -76,6 +80,8 @@ function DrawerPopup(props: DrawerPopupProps, ref: React.Ref<HTMLDivElement>) {
     autoFocus,
     keyboard,
 
+    // classNames
+    classNames: drawerClassNames,
     // Root
     rootClassName,
     rootStyle,
@@ -216,6 +222,7 @@ function DrawerPopup(props: DrawerPopupProps, ref: React.Ref<HTMLDivElement>) {
             className={classNames(
               `${prefixCls}-mask`,
               motionMaskClassName,
+              drawerClassNames?.mask,
               maskClassName,
             )}
             style={{
@@ -285,6 +292,7 @@ function DrawerPopup(props: DrawerPopupProps, ref: React.Ref<HTMLDivElement>) {
           <div
             className={classNames(
               `${prefixCls}-content-wrapper`,
+              drawerClassNames?.wrapper,
               motionClassName,
             )}
             style={{
diff --git a/src/inter.ts b/src/inter.ts
new file mode 100644
index 00000000..0d2b2b58
--- /dev/null
+++ b/src/inter.ts
@@ -0,0 +1,4 @@
+export interface DrawerClassNames {
+  mask?: string;
+  wrapper?: string;
+}
diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
index cad76b7b..142e6808 100755
--- a/tests/index.spec.tsx
+++ b/tests/index.spec.tsx
@@ -395,4 +395,20 @@ describe('rc-drawer-menu', () => {
     ).toHaveAttribute('id', 'customer-id');
     unmount();
   });
+
+  it('should support classNames', () => {
+    const { unmount } = render(
+      <Drawer classNames={{
+        wrapper: 'customer-wrapper',
+        mask: 'customer-mask',
+      }} open/>
+    );
+    expect(
+      document.querySelector('.rc-drawer-content-wrapper')
+    ).toHaveClass('customer-wrapper');
+    expect(
+      document.querySelector('.rc-drawer-mask')
+    ).toHaveClass('customer-mask');
+    unmount();
+  });
 });

From 4421c0f2bfce742f88e1f96012819321eb43aa46 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com>
Date: Sun, 17 Sep 2023 10:37:18 +0800
Subject: [PATCH 2/3] docs: update docs

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index 70d396ad..37d4615a 100755
--- a/README.md
+++ b/README.md
@@ -44,6 +44,7 @@ ReactDom.render(
 | props      | type           | default | description    |
 |------------|----------------|---------|----------------|
 | className       | string | null | - |
+| classNames       | { mask?: string; wrapper?: string; } | - | pass className to target area |
 | prefixCls     |  string  | 'drawer' | prefix class |
 | wrapperClassName | string | null | wrapper class name |
 | width       |  string \| number  |  null  | drawer content wrapper width, drawer level transition width  |

From cb55ed430674f1abde20ef011c2f13374684c5f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com>
Date: Mon, 18 Sep 2023 09:56:15 +0800
Subject: [PATCH 3/3] docs: remove wrapperClassName in document

---
 README.md | 1 -
 1 file changed, 1 deletion(-)

diff --git a/README.md b/README.md
index 37d4615a..7312ba40 100755
--- a/README.md
+++ b/README.md
@@ -46,7 +46,6 @@ ReactDom.render(
 | className       | string | null | - |
 | classNames       | { mask?: string; wrapper?: string; } | - | pass className to target area |
 | prefixCls     |  string  | 'drawer' | prefix class |
-| wrapperClassName | string | null | wrapper class name |
 | width       |  string \| number  |  null  | drawer content wrapper width, drawer level transition width  |
 | height      |  string \| number  |  null  | drawer content wrapper height, drawer level transition height  |
 | open        | boolean  | false |  open or close menu  |