chore: push of dist

Author: zombieJ

assets/index.less

@@ -25,6 +25,7 @@
     position: absolute;
     z-index: @zIndex;
     overflow: hidden;
+    transition: transform @duration;
 
     &-hidden {
       display: none;

docs/examples/multiple.tsx

@@ -9,6 +9,7 @@ import 'antd/lib/style';
 
 import '../../assets/index.less';
 import './assets/index.less';
+import motionProps from './motion';
 
 class Demo extends React.Component {
   public state = {
@@ -63,6 +64,8 @@ class Demo extends React.Component {
           onClose={this.onClick}
           className="drawer1"
           placement="right"
+          push={{ distance: 64 }}
+          {...motionProps}
         >
           <div>
             <Button onClick={this.onChildClick}>打开子级</Button>
@@ -73,7 +76,7 @@ class Demo extends React.Component {
               className="drawer2"
               level=".drawer1"
               placement="right"
-              levelMove={100}
+              {...motionProps}
             >
               <div style={{ width: 200 }}>
                 二级抽屉
@@ -85,6 +88,7 @@ class Demo extends React.Component {
                   level={['.drawer1', '.drawer2']}
                   placement="right"
                   levelMove={this.getLevelMove}
+                  {...motionProps}
                 >
                   <div style={{ width: 200 }}>三级抽屉</div>
                 </Drawer>

docs/examples/no-mask.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';
 
@@ -27,7 +31,13 @@ class Demo extends React.Component {
   public render() {
     return (
       <div>
-        <Drawer width="250px" showMask={false}>
+        <button onClick={this.onSwitch}>Open</button>
+        <Drawer
+          width="250px"
+          mask={false}
+          open={this.state.open}
+          placement="right"
+        >
           <Menu
             style={{ height: '200%', width: 'calc(100% - 1px)' }} // 选中的线超出
             defaultSelectedKeys={['1']}
@@ -84,18 +94,6 @@ class Demo extends React.Component {
             </SubMenu>
           </Menu>
         </Drawer>
-        <div
-          style={{
-            width: '100%',
-            height: 667,
-            background: '#fff000',
-            color: '#fff',
-            textAlign: 'center',
-            lineHeight: '667px',
-          }}
-        >
-          内容区块
-        </div>
       </div>
     );
   }

src/DrawerPopup.tsx

@@ -4,6 +4,8 @@ import CSSMotion from 'rc-motion';
 import type { CSSMotionProps } from 'rc-motion';
 import DrawerPanel from './DrawerPanel';
 import type ScrollLocker from 'rc-util/lib/Dom/scrollLocker';
+import DrawerContext from './context';
+import type { DrawerContextProps } from './context';
 
 export type Placement = 'left' | 'right' | 'top' | 'bottom';
 
@@ -12,6 +14,7 @@ export interface DrawerPopupProps {
   open?: boolean;
   placement?: Placement;
   inline?: boolean;
+  push?: { distance?: number | string };
 
   // MISC
   scrollLocker?: ScrollLocker;
@@ -47,6 +50,7 @@ export default function DrawerPopup(props: DrawerPopupProps) {
     open,
     placement = 'left',
     inline,
+    push,
 
     // MISC
     scrollLocker,
@@ -74,16 +78,40 @@ export default function DrawerPopup(props: DrawerPopupProps) {
     onClose,
   } = props;
 
+  // ============================ Push ============================
+  const { distance } = push || {};
+  const [pushed, setPushed] = React.useState(false);
+
+  const parentContext = React.useContext(DrawerContext);
+  const pushDistance = distance ?? parentContext?.pushDistance ?? 180;
+
+  const mergedContext = React.useMemo<DrawerContextProps>(
+    () => ({
+      pushDistance,
+      push: () => {
+        setPushed(true);
+      },
+      pull: () => {
+        setPushed(false);
+      },
+    }),
+    [pushDistance],
+  );
+
   // ========================= ScrollLock =========================
   React.useEffect(() => {
     if (open) {
       scrollLocker?.lock();
+      parentContext?.push?.();
+    } else {
+      parentContext?.pull?.();
     }
   }, [open]);
 
   React.useEffect(
     () => () => {
       scrollLocker?.unLock();
+      parentContext?.pull?.();
     },
     [],
   );
@@ -114,7 +142,12 @@ export default function DrawerPopup(props: DrawerPopupProps) {
   const motionProps = typeof motion === 'function' ? motion(placement) : motion;
 
   const panelNode: React.ReactNode = (
-    <div className={classNames(`${prefixCls}-panel-wrapper`)}>
+    <div
+      className={classNames(`${prefixCls}-panel-wrapper`)}
+      style={{
+        transform: pushed ? `translateX(${-pushDistance}px)` : '',
+      }}
+    >
       <CSSMotion
         key="panel"
         {...motionProps}
@@ -150,19 +183,21 @@ export default function DrawerPopup(props: DrawerPopupProps) {
 
   // =========================== Render ===========================
   return (
-    <div
-      className={classNames(
-        prefixCls,
-        `${prefixCls}-${placement}`,
-        rootClassName,
-        {
-          [`${prefixCls}-inline`]: inline,
-        },
-      )}
-      style={rootStyle}
-    >
-      {maskNode}
-      {panelNode}
-    </div>
+    <DrawerContext.Provider value={mergedContext}>
+      <div
+        className={classNames(
+          prefixCls,
+          `${prefixCls}-${placement}`,
+          rootClassName,
+          {
+            [`${prefixCls}-inline`]: inline,
+          },
+        )}
+        style={rootStyle}
+      >
+        {maskNode}
+        {panelNode}
+      </div>
+    </DrawerContext.Provider>
   );
 }

src/context.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+
+export interface DrawerContextProps {
+  pushDistance?: number | string;
+  push: VoidFunction;
+  pull: VoidFunction;
+}
+
+const DrawerContext = React.createContext<DrawerContextProps>({});
+
+export default DrawerContext;