fix: Drawer zIndex dom element adjust (#290)

* chore: Adjust zIndex style pos

* test: Update test case

Author: zombieJ

docs/examples/assets/motion.less

@@ -58,7 +58,7 @@
       transform: translateX(0);
 
       &-active {
-        transform: translateX(-100%);
+        transform: translateX(-100%)!important;
       }
     }
   }
@@ -79,7 +79,7 @@
       transform: translateX(0);
 
       &-active {
-        transform: translateX(100%);
+        transform: translateX(100%)!important;
       }
     }
   }

docs/examples/multiple.tsx

@@ -32,16 +32,7 @@ class Demo extends React.Component {
       openChildren: !this.state.openChildren,
     });
   };
-  public getLevelMove = (e: {
-    target: HTMLElement;
-    open: boolean;
-  }): number | [number, number] => {
-    const target = e.target as HTMLElement;
-    if (target.className.indexOf('drawer1') >= 0) {
-      return [200, 100];
-    }
-    return 100;
-  };
+
   public render() {
     return (
       <div>
@@ -59,35 +50,31 @@ class Demo extends React.Component {
         </div>
         <Drawer
           width="20vw"
-          handler={false}
           open={this.state.open}
           onClose={this.onClick}
           className="drawer1"
           placement="right"
           push={{ distance: 64 }}
+          // zIndex={99999}
           {...motionProps}
         >
           <div>
             <Button onClick={this.onChildClick}>打开子级</Button>
             <Drawer
-              handler={false}
               open={this.state.openChild}
               onClose={this.onChildClick}
               className="drawer2"
-              level=".drawer1"
               placement="right"
+              // zIndex={88888}
               {...motionProps}
             >
               <div style={{ width: 200 }}>
                 二级抽屉
-                <Button onClick={this.onChildrenClick}>打开子级</Button>
+                <Button onClick={this.onChildrenClick}>打开子子级</Button>
                 <Drawer
-                  handler={false}
                   open={this.state.openChildren}
                   onClose={this.onChildrenClick}
-                  level={['.drawer1', '.drawer2']}
                   placement="right"
-                  levelMove={this.getLevelMove}
                   {...motionProps}
                 >
                   <div style={{ width: 200 }}>三级抽屉</div>

src/DrawerPopup.tsx

@@ -206,12 +206,6 @@ export default function DrawerPopup(props: DrawerPopupProps) {
     [],
   );
 
-  // =========================== zIndex ===========================
-  const zIndexStyle: React.CSSProperties = {};
-  if (zIndex) {
-    zIndexStyle.zIndex = zIndex;
-  }
-
   // ============================ Mask ============================
   const maskNode: React.ReactNode = mask && (
     <CSSMotion key="mask" {...maskMotion} visible={open}>
@@ -229,7 +223,6 @@ export default function DrawerPopup(props: DrawerPopupProps) {
             style={{
               ...motionMaskStyle,
               ...maskStyle,
-              ...zIndexStyle,
             }}
             onClick={maskClosable ? onClose : undefined}
             ref={maskRef}
@@ -294,7 +287,6 @@ export default function DrawerPopup(props: DrawerPopupProps) {
               ...wrapperStyle,
               ...motionStyle,
               ...contentWrapperStyle,
-              ...zIndexStyle,
             }}
           >
             <DrawerPanel
@@ -312,6 +304,14 @@ export default function DrawerPopup(props: DrawerPopupProps) {
   );
 
   // =========================== Render ===========================
+  const containerStyle: React.CSSProperties = {
+    ...rootStyle,
+  };
+
+  if (zIndex) {
+    containerStyle.zIndex = zIndex;
+  }
+
   return (
     <DrawerContext.Provider value={mergedContext}>
       <div
@@ -324,7 +324,7 @@ export default function DrawerPopup(props: DrawerPopupProps) {
             [`${prefixCls}-inline`]: inline,
           },
         )}
-        style={rootStyle}
+        style={containerStyle}
         tabIndex={-1}
         ref={panelRef}
         onKeyDown={onPanelKeyDown}

tests/index.spec.tsx

@@ -305,10 +305,7 @@ describe('rc-drawer-menu', () => {
       <Drawer zIndex={93} open getContainer={false} />,
     );
 
-    expect(container.querySelector('.rc-drawer-mask')).toHaveStyle({
-      zIndex: 93,
-    });
-    expect(container.querySelector('.rc-drawer-content-wrapper')).toHaveStyle({
+    expect(container.querySelector('.rc-drawer')).toHaveStyle({
       zIndex: 93,
     });
   });