fix: Patch width / height size on the wrapper instead (#282)

* fix: drawer ptg size

* test: test case cov

Author: zombieJ

docs/examples/base.tsx

@@ -27,7 +27,8 @@ const Demo = () => {
           console.log('transitionEnd: ', c);
         }}
         placement="right"
-        width={400}
+        // width={400}
+        width="60%"
         // Motion
         {...motionProps}
       >

src/DrawerPanel.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import type { Placement } from './Drawer';
 
 export interface DrawerPanelRef {
   focus: VoidFunction;
@@ -10,40 +9,20 @@ export interface DrawerPanelProps {
   prefixCls: string;
   className?: string;
   style?: React.CSSProperties;
-  width?: number | string;
-  height?: number | string;
-  placement: Placement;
   children?: React.ReactNode;
   containerRef?: React.Ref<HTMLDivElement>;
 }
 
 const DrawerPanel = (props: DrawerPanelProps) => {
-  const {
-    prefixCls,
-    className,
-    style,
-    placement,
-    width,
-    height,
-    children,
-    containerRef,
-  } = props;
+  const { prefixCls, className, style, children, containerRef } = props;
 
   // =============================== Render ===============================
-  const panelStyle: React.CSSProperties = {};
-
-  if (placement === 'left' || placement === 'right') {
-    panelStyle.width = width;
-  } else {
-    panelStyle.height = height;
-  }
 
   return (
     <>
       <div
         className={classNames(`${prefixCls}-content`, className)}
         style={{
-          ...panelStyle,
           ...style,
         }}
         aria-modal="true"

src/DrawerPopup.tsx

@@ -253,13 +253,20 @@ export default function DrawerPopup(props: DrawerPopupProps) {
         break;
       case 'left':
         wrapperStyle.transform = `translateX(${pushDistance}px)`;
+
         break;
       default:
         wrapperStyle.transform = `translateX(${-pushDistance}px)`;
         break;
     }
   }
 
+  if (placement === 'left' || placement === 'right') {
+    wrapperStyle.width = width;
+  } else {
+    wrapperStyle.height = height;
+  }
+
   const panelNode: React.ReactNode = (
     <div
       className={classNames(`${prefixCls}-content-wrapper`)}
@@ -293,9 +300,6 @@ export default function DrawerPopup(props: DrawerPopupProps) {
                 ...motionStyle,
                 ...style,
               }}
-              width={width}
-              height={height}
-              placement={placement}
             >
               {children}
             </DrawerPanel>

tests/index.spec.tsx

@@ -309,4 +309,14 @@ describe('rc-drawer-menu', () => {
       zIndex: 93,
     });
   });
+
+  it('width on the correct element', () => {
+    const { container } = render(
+      <Drawer width="93%" open getContainer={false} />,
+    );
+
+    expect(container.querySelector('.rc-drawer-content-wrapper')).toHaveStyle({
+      width: '93%',
+    });
+  });
 });