Merge pull request #277 from react-component/refactor

refactor: Rewrite of Drawer

Author: zombieJ

assets/index.less

@@ -0,0 +1,3 @@
+## Force Render
+
+<code src="../examples/forceRender.tsx">

docs/demo/forceRender.md

@@ -1,3 +1,4 @@
 ## getContainer
 
 <code src="../examples/getContainer.tsx">
+<code src="../examples/getContainer-false.tsx">

docs/demo/getContainer.md

@@ -0,0 +1,82 @@
+@duration: 0.3s;
+
+.mask-motion {
+  &-enter,
+  &-appear,
+  &-leave {
+    &-active {
+      transition: all @duration;
+    }
+  }
+
+  &-enter,
+  &-appear {
+    opacity: 0;
+
+    &-active {
+      opacity: 1;
+    }
+  }
+
+  &-leave {
+    opacity: 1;
+
+    &-active {
+      opacity: 0;
+    }
+  }
+}
+
+.panel-motion() {
+  &-enter,
+  &-appear,
+  &-leave {
+    &-active {
+      transition: all @duration;
+    }
+  }
+}
+
+.panel-motion {
+  &-left {
+    .panel-motion();
+
+    &-enter,
+    &-appear {
+      transform: translateX(-100%);
+
+      &-active {
+        transform: translateX(0);
+      }
+    }
+
+    &-leave {
+      transform: translateX(0);
+
+      &-active {
+        transform: translateX(-100%);
+      }
+    }
+  }
+
+  &-right {
+    .panel-motion();
+
+    &-enter,
+    &-appear {
+      transform: translateX(100%);
+
+      &-active {
+        transform: translateX(0);
+      }
+    }
+
+    &-leave {
+      transform: translateX(0);
+
+      &-active {
+        transform: translateX(100%);
+      }
+    }
+  }
+}

docs/demo/level.md

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import React, { useState } from 'react';
 import Drawer from 'rc-drawer';
+import motionProps from './motion';
 
 const Demo = () => {
   const [open, setOpen] = useState(false);
@@ -22,11 +23,13 @@ const Demo = () => {
         onClose={onTouchEnd}
         handler={false}
         level={null}
-        afterVisibleChange={(c: boolean) => {
-          // console.log('transitionEnd: ', c);
+        afterOpenChange={(c: boolean) => {
+          console.log('transitionEnd: ', c);
         }}
         placement="right"
         width={400}
+        // Motion
+        {...motionProps}
       >
         content
       </Drawer>

docs/demo/openRenderDom.md

@@ -1,11 +1,16 @@
-import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
+import {
+  AppstoreOutlined,
+  MailOutlined,
+  SettingOutlined,
+} from '@ant-design/icons';
 import { Menu } from 'antd';
 import * as React from 'react';
 
 import Drawer from 'rc-drawer';
 
 import '../../assets/index.less';
 import './assets/index.less';
+import motionProps from './motion';
 
 const SubMenu = Menu.SubMenu;
 const MenuItemGroup = Menu.ItemGroup;
@@ -24,7 +29,12 @@ class Demo extends React.Component<any, { show: boolean }> {
     return (
       <div>
         {this.state.show && (
-          <Drawer wrapperClassName="drawer-wrapper" width="20vw">
+          <Drawer
+            wrapperClassName="drawer-wrapper"
+            width="20vw"
+            open
+            {...motionProps}
+          >
             <Menu
               defaultSelectedKeys={['1']}
               defaultOpenKeys={['sub1']}

docs/demo/simple.md

@@ -1,4 +1,8 @@
-import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
+import {
+  AppstoreOutlined,
+  MailOutlined,
+  SettingOutlined,
+} from '@ant-design/icons';
 import { Menu } from 'antd';
 import * as React from 'react';
 
@@ -9,6 +13,7 @@ import 'antd/lib/style';
 
 import '../../assets/index.less';
 import './assets/index.less';
+import motionProps from './motion';
 
 const SubMenu = Menu.SubMenu;
 const MenuItemGroup = Menu.ItemGroup;
@@ -49,6 +54,8 @@ class Demo extends React.Component {
             console.log('transitionEnd: ', c);
           }}
           width="20vw"
+          // Motion
+          {...motionProps}
         >
           <Menu
             defaultSelectedKeys={['1']}