Merge pull request #17698 from ant-design/drawer-multi-unmount

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

components/drawer/__tests__/MultiDrawer.test.js

@@ -4,11 +4,12 @@ import Drawer from '..';
 import Button from '../../button';
 
 class MultiDrawer extends React.Component {
-  state = { visible: false, childrenDrawer: false };
+  state = { visible: false, childrenDrawer: false, hasChildren: true };
 
   showDrawer = () => {
     this.setState({
       visible: true,
+      hasChildren: true,
     });
   };
 
@@ -21,6 +22,7 @@ class MultiDrawer extends React.Component {
   showChildrenDrawer = () => {
     this.setState({
       childrenDrawer: true,
+      hasChildren: true,
     });
   };
 
@@ -30,14 +32,23 @@ class MultiDrawer extends React.Component {
     });
   };
 
+  onRemoveChildDrawer = () => {
+    this.setState({
+      hasChildren: false,
+    });
+  };
+
   render() {
-    const { childrenDrawer, visible } = this.state;
+    const { childrenDrawer, visible, hasChildren } = this.state;
     const { placement } = this.props;
     return (
       <div>
         <Button type="primary" id="open_drawer" onClick={this.showDrawer}>
           Open drawer
         </Button>
+        <Button type="primary" id="remove_drawer" onClick={this.onRemoveChildDrawer}>
+          rm child drawer
+        </Button>
         <Drawer
           title="Multi-level drawer"
           className="test_drawer"
@@ -50,17 +61,19 @@ class MultiDrawer extends React.Component {
           <Button type="primary" id="open_two_drawer" onClick={this.showChildrenDrawer}>
             Two-level drawer
           </Button>
-          <Drawer
-            title="Two-level Drawer"
-            width={320}
-            className="Two-level"
-            getContainer={false}
-            placement={placement}
-            onClose={this.onChildrenDrawerClose}
-            visible={childrenDrawer}
-          >
-            <div id="two_drawer_text">This is two-level drawer</div>
-          </Drawer>
+          {hasChildren && (
+            <Drawer
+              title="Two-level Drawer"
+              width={320}
+              className="Two-level"
+              getContainer={false}
+              placement={placement}
+              onClose={this.onChildrenDrawerClose}
+              visible={childrenDrawer}
+            >
+              <div id="two_drawer_text">This is two-level drawer</div>
+            </Drawer>
+          )}
           <div
             style={{
               position: 'absolute',
@@ -121,4 +134,17 @@ describe('Drawer', () => {
     expect(translateX).toEqual('translateY(180px)');
     expect(wrapper.find('#two_drawer_text').exists()).toBe(true);
   });
+
+  it('render MultiDrawer is child in unmount', () => {
+    const wrapper = mount(<MultiDrawer placement="top" mask={false} />);
+    wrapper.find('button#open_drawer').simulate('click');
+    wrapper.find('button#open_two_drawer').simulate('click');
+    wrapper.find('button#remove_drawer').simulate('click');
+    let translateX = wrapper.find('.ant-drawer.test_drawer').get(0).props.style.transform;
+    expect(translateX).toEqual(undefined);
+    wrapper.find('button#open_two_drawer').simulate('click');
+    translateX = wrapper.find('.ant-drawer.test_drawer').get(0).props.style.transform;
+    expect(translateX).toEqual('translateY(180px)');
+    expect(wrapper.find('#two_drawer_text').exists()).toBe(true);
+  });
 });

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,

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;
     }