refactor: base replace with rc-motion

Author: zombieJ

assets/index.less

@@ -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/examples/assets/motion.less

@@ -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/examples/base.tsx

@@ -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']}

docs/examples/change.tsx

@@ -0,0 +1,20 @@
+import type { DrawerProps } from 'rc-drawer';
+import './assets/motion.less';
+
+export const maskMotion: DrawerProps['maskMotion'] = {
+  motionAppear: true,
+  motionName: 'mask-motion',
+  onAppearEnd: console.warn,
+};
+
+export const motion: DrawerProps['motion'] = placement => ({
+  motionAppear: true,
+  motionName: `panel-motion-${placement}`,
+});
+
+const motionProps: Partial<DrawerProps> = {
+  maskMotion,
+  motion,
+};
+
+export default motionProps;

docs/examples/motion.ts

@@ -47,6 +47,7 @@
   "dependencies": {
     "@babel/runtime": "^7.10.1",
     "classnames": "^2.2.6",
+    "rc-motion": "^2.6.1",
     "rc-util": "^5.21.2"
   },
   "devDependencies": {

package.json

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import type { GetContainer } from 'rc-util/lib/PortalWrapper';
+import Portal from 'rc-util/lib/PortalWrapper';
+import DrawerPopup from './DrawerPopup';
+import type { DrawerPopupProps } from './DrawerPopup';
+
+export type Placement = 'left' | 'top' | 'right' | 'bottom';
+
+type LevelMove = number | [number, number];
+
+export interface DrawerProps extends Omit<DrawerPopupProps, 'prefixCls'> {
+  prefixCls?: string;
+
+  width?: string | number;
+  height?: string | number;
+  open?: boolean;
+  handler?: React.ReactElement | null | false;
+  placement?: Placement;
+  level?: null | string | string[];
+  levelMove?:
+    | LevelMove
+    | ((e: { target: HTMLElement; open: boolean }) => LevelMove);
+  duration?: string;
+  ease?: string;
+  showMask?: boolean;
+  onChange?: (open?: boolean) => void;
+  onHandleClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;
+  onClose?: (e: React.MouseEvent | React.KeyboardEvent) => void;
+  keyboard?: boolean;
+  contentWrapperStyle?: React.CSSProperties;
+  autoFocus?: boolean;
+  wrapperClassName?: string;
+  forceRender?: boolean;
+  getContainer?: GetContainer;
+}
+
+const defaultGetContainer = () => document.body;
+
+export default function Drawer(props: DrawerProps) {
+  const {
+    open,
+    getContainer = defaultGetContainer,
+    forceRender,
+    wrapperClassName,
+    prefixCls = 'rc-drawer',
+  } = props;
+
+  return (
+    <Portal
+      visible={open}
+      forceRender={forceRender}
+      getContainer={getContainer}
+      wrapperClassName={wrapperClassName}
+    >
+      {({ scrollLocker }) => (
+        <DrawerPopup
+          {...props}
+          prefixCls={prefixCls}
+          scrollLocker={scrollLocker}
+        />
+      )}
+    </Portal>
+  );
+}