feat: support classNames (#426)

* feat: support classNames

* docs: update docs

* docs: remove wrapperClassName in document

Author: kiner-tang

README.md

@@ -44,8 +44,8 @@ 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  |
 | height      |  string \| number  |  null  | drawer content wrapper height, drawer level transition height  |
 | open        | boolean  | false |  open or close menu  |

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

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

src/inter.ts

@@ -0,0 +1,4 @@
+export interface DrawerClassNames {
+  mask?: string;
+  wrapper?: string;
+}

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();
+  });
 });