From fada5ef3c9fbb4571c6e90ea20fa8b439657712d Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Thu, 4 Jan 2024 15:52:13 +0800
Subject: [PATCH] refactor: remove contentWrapperStyle, use styles.wrapper
 instead

---
 README.md             | 5 ++---
 src/DrawerPopup.tsx   | 3 ---
 tests/index.spec.tsx  | 4 ++--
 tests/motion.spec.tsx | 4 ++--
 4 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index 8369acba..b461f3e5 100755
--- a/README.md
+++ b/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 |
diff --git a/src/DrawerPopup.tsx b/src/DrawerPopup.tsx
index bf6d5529..deb681b5 100644
--- a/src/DrawerPopup.tsx
+++ b/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 })}
diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
index e4d89c4d..9510f77f 100755
--- a/tests/index.spec.tsx
+++ b/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',
diff --git a/tests/motion.spec.tsx b/tests/motion.spec.tsx
index 1d689be8..2e651301 100755
--- a/tests/motion.spec.tsx
+++ b/tests/motion.spec.tsx
@@ -17,7 +17,7 @@ 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
@@ -25,7 +25,7 @@ describe('motion', () => {
         open
         getContainer={false}
         motion={{ motionName: 'bamboo', motionAppear: true }}
-        contentWrapperStyle={{ background: 'red' }}
+        styles={{ wrapper: { background: 'red' } }}
       />,
     );