feat: support styles (#427)

Author: kiner-tang

README.md

@@ -45,6 +45,7 @@ ReactDom.render(
 |------------|----------------|---------|----------------|
 | className       | string | null | - |
 | classNames       | { mask?: string; wrapper?: string; } | - | pass className to target area |
+| styles       | { mask?: CSSProperties; wrapper?: CSSProperties; } | - | pass style to target area |
 | prefixCls     |  string  | 'drawer' | prefix class |
 | width       |  string \| number  |  null  | drawer content wrapper width, drawer level transition width  |
 | height      |  string \| number  |  null  | drawer content wrapper height, drawer level transition height  |

src/Drawer.tsx

@@ -7,7 +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';
+import type { DrawerClassNames, DrawerStyles } from './inter';
 
 export type Placement = 'left' | 'top' | 'right' | 'bottom';
 
@@ -21,6 +21,7 @@ export interface DrawerProps
   getContainer?: PortalProps['getContainer'];
   panelRef?: React.Ref<HTMLDivElement>;
   classNames?: DrawerClassNames;
+  styles?: DrawerStyles;
 }
 
 const Drawer: React.FC<DrawerProps> = props => {

src/DrawerPopup.tsx

@@ -9,7 +9,7 @@ import DrawerContext from './context';
 import type { DrawerPanelEvents } from './DrawerPanel';
 import DrawerPanel from './DrawerPanel';
 import { parseWidthHeight } from './util';
-import type { DrawerClassNames } from './inter';
+import type { DrawerClassNames, DrawerStyles } from './inter';
 
 const sentinelStyle: React.CSSProperties = {
   width: 0,
@@ -67,6 +67,9 @@ export interface DrawerPopupProps extends DrawerPanelEvents {
 
   // classNames
   classNames?: DrawerClassNames;
+
+  // styles
+  styles?: DrawerStyles;
 }
 
 function DrawerPopup(props: DrawerPopupProps, ref: React.Ref<HTMLDivElement>) {
@@ -113,6 +116,8 @@ function DrawerPopup(props: DrawerPopupProps, ref: React.Ref<HTMLDivElement>) {
     onClick,
     onKeyDown,
     onKeyUp,
+
+    styles,
   } = props;
 
   // ================================ Refs ================================
@@ -228,6 +233,7 @@ function DrawerPopup(props: DrawerPopupProps, ref: React.Ref<HTMLDivElement>) {
             style={{
               ...motionMaskStyle,
               ...maskStyle,
+              ...styles?.mask,
             }}
             onClick={maskClosable && open ? onClose : undefined}
             ref={maskRef}
@@ -299,6 +305,7 @@ function DrawerPopup(props: DrawerPopupProps, ref: React.Ref<HTMLDivElement>) {
               ...wrapperStyle,
               ...motionStyle,
               ...contentWrapperStyle,
+              ...styles?.wrapper,
             }}
             {...pickAttrs(props, { data: true })}
           >

src/inter.ts

@@ -2,3 +2,8 @@ export interface DrawerClassNames {
   mask?: string;
   wrapper?: string;
 }
+
+export interface DrawerStyles {
+  mask?: React.CSSProperties;
+  wrapper?: React.CSSProperties;
+}

tests/index.spec.tsx

@@ -61,23 +61,23 @@ describe('rc-drawer-menu', () => {
       placement: DrawerProps['placement'];
       transform: string;
     }[] = [
-      {
-        placement: 'left',
-        transform: 'translateX(903px)',
-      },
-      {
-        placement: 'right',
-        transform: 'translateX(-903px)',
-      },
-      {
-        placement: 'top',
-        transform: 'translateY(903px)',
-      },
-      {
-        placement: 'bottom',
-        transform: 'translateY(-903px)',
-      },
-    ];
+        {
+          placement: 'left',
+          transform: 'translateX(903px)',
+        },
+        {
+          placement: 'right',
+          transform: 'translateX(-903px)',
+        },
+        {
+          placement: 'top',
+          transform: 'translateY(903px)',
+        },
+        {
+          placement: 'bottom',
+          transform: 'translateY(-903px)',
+        },
+      ];
 
     placementList.forEach(({ placement, transform }) => {
       it(placement, () => {
@@ -359,15 +359,15 @@ describe('rc-drawer-menu', () => {
     );
     errSpy.mockRestore();
   });
-  
-  
+
+
   it('pass data props to internal div', () => {
     const value = 'bamboo';
     const { unmount } = render(<Drawer open data-attr={value} />);
-    expect(document.querySelector('.rc-drawer-content-wrapper')).toHaveAttribute('data-attr',value);
+    expect(document.querySelector('.rc-drawer-content-wrapper')).toHaveAttribute('data-attr', value);
     unmount();
   });
-  
+
   it('support bodyProps', () => {
     const enter = jest.fn();
     const leave = jest.fn();
@@ -386,7 +386,7 @@ describe('rc-drawer-menu', () => {
   });
 
   it('pass id & className props to Panel', () => {
-    const { unmount } = render(<Drawer className='customer-className' id="customer-id" open/>);
+    const { unmount } = render(<Drawer className='customer-className' id="customer-id" open />);
     expect(
       document.querySelector('.rc-drawer-content')
     ).toHaveClass('customer-className');
@@ -401,7 +401,7 @@ describe('rc-drawer-menu', () => {
       <Drawer classNames={{
         wrapper: 'customer-wrapper',
         mask: 'customer-mask',
-      }} open/>
+      }} open />
     );
     expect(
       document.querySelector('.rc-drawer-content-wrapper')
@@ -411,4 +411,19 @@ describe('rc-drawer-menu', () => {
     ).toHaveClass('customer-mask');
     unmount();
   });
+  it('should support styles', () => {
+    const { unmount } = render(
+      <Drawer styles={{
+        wrapper: { background: 'red' },
+        mask: { background: 'blue' },
+      }} open />
+    );
+    expect(
+      document.querySelector('.rc-drawer-content-wrapper')
+    ).toHaveStyle('background: red');
+    expect(
+      document.querySelector('.rc-drawer-mask')
+    ).toHaveStyle('background: blue');
+    unmount();
+  });
 });