refactor: remove contentWrapperStyle, use styles.wrapper instead (#439)

Author: afc163

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 |
-| styles       | { mask?: CSSProperties; wrapper?: CSSProperties; } | - | pass style to target area |
+| classNames       | { mask?: string; content?: string; wrapper?: string; } | - | pass className to target area |
+| styles       | { mask?: CSSProperties; content?: 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  |
@@ -63,7 +63,6 @@ ReactDom.render(
 | afterVisibleChange  | func | null | transition end callback(open) |
 | onClose | func | null | close click function |
 | keyboard | boolean | true |  Whether support press esc to close |
-| contentWrapperStyle | CSSProperties | null |  content wrapper style |
 | autoFocus | boolean | true |  Whether focusing on the drawer after it opened |
 | onMouseEnter | React.MouseEventHandler\<HTMLDivElement\> | - | Trigger when mouse enter drawer panel |
 | onMouseOver | React.MouseEventHandler\<HTMLDivElement\> | - | Trigger when mouse over drawer panel |

src/DrawerPopup.tsx

@@ -47,7 +47,6 @@ export interface DrawerPopupProps extends DrawerPanelEvents {
   children?: React.ReactNode;
   width?: number | string;
   height?: number | string;
-  contentWrapperStyle?: React.CSSProperties;
 
   // Mask
   mask?: boolean;
@@ -98,7 +97,6 @@ function DrawerPopup(props: DrawerPopupProps, ref: React.Ref<HTMLDivElement>) {
     width,
     height,
     children,
-    contentWrapperStyle,
 
     // Mask
     mask,
@@ -304,7 +302,6 @@ function DrawerPopup(props: DrawerPopupProps, ref: React.Ref<HTMLDivElement>) {
             style={{
               ...wrapperStyle,
               ...motionStyle,
-              ...contentWrapperStyle,
               ...styles?.wrapper,
             }}
             {...pickAttrs(props, { data: true })}

tests/index.spec.tsx

@@ -243,8 +243,8 @@ describe('rc-drawer-menu', () => {
     });
   });
 
-  it('contentWrapperStyle', () => {
-    render(<Drawer contentWrapperStyle={{ background: '#f00' }} open />);
+  it('styles.wrapper', () => {
+    render(<Drawer styles={{ wrapper: { background: '#f00' } }} open />);
 
     expect(document.querySelector('.rc-drawer-content-wrapper')).toHaveStyle({
       background: '#f00',

tests/motion.spec.tsx

@@ -17,15 +17,15 @@ describe('motion', () => {
     jest.useRealTimers();
   });
 
-  // zombieJ: Do not modify patch dom since user use `contentWrapperStyle` for override style
+  // zombieJ: Do not modify patch dom since user use `styles.wrapper` for override style
   it('motion patch on the correct element', () => {
     const { container } = render(
       <Drawer
         width="93%"
         open
         getContainer={false}
         motion={{ motionName: 'bamboo', motionAppear: true }}
-        contentWrapperStyle={{ background: 'red' }}
+        styles={{ wrapper: { background: 'red' } }}
       />,
     );