chore: cover

Author: zombieJ

assets/index.less

@@ -21,16 +21,12 @@
     inset: 0;
   }
 
-  &-panel-wrapper {
+  &-content-wrapper {
     position: absolute;
     z-index: @zIndex;
     overflow: hidden;
     transition: transform @duration;
 
-    &-hidden {
-      display: none;
-    }
-
     // Placement
     .@{prefixCls}-left & {
       top: 0;
@@ -45,12 +41,16 @@
     }
   }
 
-  &-panel {
+  &-content {
     width: 100%;
     height: 100%;
+    overflow: auto;
     background: #fff;
     pointer-events: auto;
-    overflow: auto;
+
+    &-hidden {
+      display: none;
+    }
   }
 }
 

docs/demo/level.md

@@ -31,7 +31,31 @@ class Demo extends React.Component {
   public render() {
     return (
       <div>
-        <button onClick={this.onSwitch}>Open</button>
+        <div
+          style={{
+            width: '100%',
+            height: 667,
+            background: '#fff000',
+            color: '#fff',
+            textAlign: 'center',
+            lineHeight: '667px',
+          }}
+        >
+          内容区块
+          <button
+            onClick={this.onSwitch}
+            style={{
+              height: 24,
+              width: 100,
+              marginLeft: 20,
+              color: '#000',
+              lineHeight: '24px',
+            }}
+          >
+            {!this.state.open ? '打开' : '关闭'}
+          </button>
+        </div>
+
         <Drawer
           width="250px"
           mask={false}

docs/examples/level.tsx

@@ -0,0 +1,3 @@
+module.exports = {
+  setupFilesAfterEnv: ['<rootDir>/tests/setupFilesAfterEnv.ts']
+};

docs/examples/no-mask.tsx

@@ -67,15 +67,11 @@
     "eslint": "^7.0.0",
     "father-build": "^1.22.1",
     "glob": "^7.1.6",
-    "jsonp": "^0.2.0",
     "less": "^3.10.3",
     "np": "^7.5.0",
     "prettier": "^2.6.2",
-    "querystring": "^0.2.0",
-    "rc-test": "^6.0.1",
     "react": "^16.10.2",
     "react-dom": "^16.10.2",
-    "react-test-renderer": "^16.10.2",
     "typescript": "^4.6.4"
   }
 }

jest.config.js

@@ -9,30 +9,23 @@ export type Placement = 'left' | 'top' | 'right' | 'bottom';
 export interface DrawerProps extends Omit<DrawerPopupProps, 'prefixCls'> {
   prefixCls?: string;
 
-  width?: string | number;
-  height?: string | number;
   open?: boolean;
-  placement?: Placement;
-  duration?: string;
   onClose?: (e: React.MouseEvent | React.KeyboardEvent) => void;
-  keyboard?: boolean;
-  contentWrapperStyle?: React.CSSProperties;
-  autoFocus?: boolean;
+  /** @deprecated Only work on Portal mode. You can replace with rootClassName instead */
   wrapperClassName?: string;
   destroyOnClose?: boolean;
-
   getContainer?: GetContainer | false;
 }
 
 const defaultGetContainer = () => document.body;
 
-export default function Drawer(props: DrawerProps) {
+const Drawer: React.FC<DrawerProps> = props => {
   const {
     open,
-    getContainer = defaultGetContainer,
+    getContainer,
     forceRender,
     wrapperClassName,
-    prefixCls = 'rc-drawer',
+    prefixCls,
     afterOpenChange,
     destroyOnClose,
   } = props;
@@ -73,4 +66,25 @@ export default function Drawer(props: DrawerProps) {
       )}
     </Portal>
   );
+};
+
+// Default Value.
+// Since spread with default value will make this all over components.
+// Let's maintain this in one place.
+Drawer.defaultProps = {
+  open: false,
+  getContainer: defaultGetContainer,
+  prefixCls: 'rc-drawer',
+  placement: 'right',
+  autoFocus: true,
+  keyboard: true,
+  width: 378,
+  mask: true,
+  maskClosable: true,
+};
+
+if (process.env.NODE_ENV !== 'production') {
+  Drawer.displayName = 'Drawer';
 }
+
+export default Drawer;

package.json

@@ -12,6 +12,7 @@ export interface DrawerPanelProps {
   className?: string;
   style?: React.CSSProperties;
   width?: number | string;
+  height?: number | string;
   placement: Placement;
   children?: React.ReactNode;
   onClose?: React.KeyboardEventHandler<HTMLElement>;
@@ -27,8 +28,16 @@ const sentinelStyle: React.CSSProperties = {
 
 const DrawerPanel = React.forwardRef<DrawerPanelRef, DrawerPanelProps>(
   (props, ref) => {
-    const { prefixCls, className, style, placement, width, children, onClose } =
-      props;
+    const {
+      prefixCls,
+      className,
+      style,
+      placement,
+      width,
+      height,
+      children,
+      onClose,
+    } = props;
 
     // ================================ Refs ================================
     const panelRef = React.useRef<HTMLDivElement>();
@@ -76,13 +85,20 @@ const DrawerPanel = React.forwardRef<DrawerPanelRef, DrawerPanelProps>(
     };
 
     // =============================== Render ===============================
+    const panelStyle: React.CSSProperties = {};
+
+    if (placement === 'left' || placement === 'right') {
+      panelStyle.width = width;
+    } else {
+      panelStyle.height = height;
+    }
+
     return (
       <>
         <div
-          className={classNames(`${prefixCls}-panel`, className)}
+          className={classNames(`${prefixCls}-content`, className)}
           style={{
-            width:
-              placement === 'left' || placement === 'right' ? width : '100%',
+            ...panelStyle,
             ...style,
           }}
           aria-modal="true"