fix: delete drawer in child and re-render, no push started

TranquilMarmot · Jul 17, 2019 · d4c90d4 · d4c90d4
1 parent a9a24d0
commit d4c90d4
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 6 deletions.
diff --git a/components/drawer/index.tsx b/components/drawer/index.tsx
@@ -63,9 +63,19 @@ class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerS
     push: false,
   };
 
-  parentDrawer: Drawer;
+  parentDrawer: Drawer | null;
+
   destroyClose: boolean;
 
+  public componentDidMount() {
+    // fix: delete drawer in child and re-render, no push started.
+    // <Drawer>{show && <Drawer />}</Drawer>
+    const { visible } = this.props;
+    if (visible && this.parentDrawer) {
+      this.parentDrawer.push();
+    }
+  }
+
   public componentDidUpdate(preProps: DrawerProps) {
     const { visible } = this.props;
     if (preProps.visible !== visible && this.parentDrawer) {
@@ -77,6 +87,14 @@ class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerS
     }
   }
 
+  public componentWillUnmount() {
+    // unmount drawer in child, clear push.
+    if (this.parentDrawer) {
+      this.parentDrawer.pull();
+      this.parentDrawer = null;
+    }
+  }
+
   push = () => {
     this.setState({
       push: true,
@@ -186,7 +204,7 @@ class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerS
     );
   };
 
-  // render Provider for Multi-level drawe
+  // render Provider for Multi-level drawer
   renderProvider = (value: Drawer) => {
     const {
       prefixCls,

diff --git a/components/drawer/style/drawer.less b/components/drawer/style/drawer.less
@@ -11,10 +11,10 @@
   z-index: @zindex-modal;
   width: 0%;
   height: 100%;
-
+  transition: transform @animation-duration-slow @ease-base-out;
   > * {
-    transition: transform @animation-duration-slow @ease-base-in,
-      box-shadow @animation-duration-slow @ease-base-in;
+    transition: transform @animation-duration-slow @ease-base-out,
+      box-shadow @animation-duration-slow @ease-base-out;
   }
 
   &-content-wrapper {
@@ -197,7 +197,6 @@
     transition: opacity @animation-duration-slow linear, height 0s ease @animation-duration-slow;
   }
   &-open {
-    transition: transform @animation-duration-slow @ease-base-out;
     &-content {
       box-shadow: @shadow-2;
     }