From 42fad57e49259d718222b1adb52c6987d7157ff3 Mon Sep 17 00:00:00 2001
From: ajuner <106791576@qq.com>
Date: Tue, 28 Sep 2021 14:10:24 +0800
Subject: [PATCH] refactor: update

---
 components/drawer/demo/index.vue              |  2 +-
 components/drawer/demo/multi-level-drawer.vue |  2 +-
 components/drawer/demo/render-in-current.vue  |  8 +-
 components/drawer/demo/size.vue               | 12 +--
 components/drawer/demo/user-profile.vue       |  2 +-
 components/vc-drawer/src/DrawerChild.tsx      | 83 ++++++++++++-------
 6 files changed, 63 insertions(+), 46 deletions(-)

diff --git a/components/drawer/demo/index.vue b/components/drawer/demo/index.vue
index e27a7ddea..4543fc5cf 100644
--- a/components/drawer/demo/index.vue
+++ b/components/drawer/demo/index.vue
@@ -5,8 +5,8 @@
     <placement />
     <render-in-current />
     <form-in-drawer />
-    <user-profile />
     <multi-level-drawer />
+    <user-profile />
     <size />
   </demo-sort>
 </template>
diff --git a/components/drawer/demo/multi-level-drawer.vue b/components/drawer/demo/multi-level-drawer.vue
index 638c25c51..9e5c6fcfc 100644
--- a/components/drawer/demo/multi-level-drawer.vue
+++ b/components/drawer/demo/multi-level-drawer.vue
@@ -1,6 +1,6 @@
 <docs>
 ---
-order: 6
+order: 5
 title:
   zh-CN: 多层抽屉
   en-US: Multi-level drawer
diff --git a/components/drawer/demo/render-in-current.vue b/components/drawer/demo/render-in-current.vue
index 7d1fc2ec8..b4429d867 100644
--- a/components/drawer/demo/render-in-current.vue
+++ b/components/drawer/demo/render-in-current.vue
@@ -48,10 +48,10 @@ Render in current dom. custom container, check getContainer.
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, onMounted, ref } from 'vue';
+import { defineComponent, ref } from 'vue';
 export default defineComponent({
   setup() {
-    const visible = ref(true);
+    const visible = ref(false);
 
     const afterVisibleChange = (bool: boolean) => {
       console.log('visible', bool);
@@ -65,10 +65,6 @@ export default defineComponent({
       visible.value = false;
     };
 
-    onMounted(() => {
-      visible.value = false;
-    });
-
     return {
       visible,
       afterVisibleChange,
diff --git a/components/drawer/demo/size.vue b/components/drawer/demo/size.vue
index 7f6136a98..87e4f4528 100644
--- a/components/drawer/demo/size.vue
+++ b/components/drawer/demo/size.vue
@@ -17,15 +17,11 @@ The default width (or height) of Drawer is `378px`, and there is a presetted lar
 </docs>
 
 <template>
-  <a-button type="primary" @click="showDrawer('default')">Open Default Size (378px)</a-button>
+  <a-button type="primary" style="margin-right: 8px" @click="showDrawer('default')">
+    Open Default Size (378px)
+  </a-button>
   <a-button type="primary" @click="showDrawer('large')">Open Large Size (736px)</a-button>
-  <a-drawer
-    title="Basic Drawer"
-    :size="size"
-    :placement="placement"
-    :visible="visible"
-    @close="onClose"
-  >
+  <a-drawer title="Basic Drawer" :size="size" :visible="visible" @close="onClose">
     <template #extra>
       <a-button style="margin-right: 8px" @click="onClose">Cancel</a-button>
       <a-button type="primary" @click="onClose">Submit</a-button>
diff --git a/components/drawer/demo/user-profile.vue b/components/drawer/demo/user-profile.vue
index 2036f31f5..4de4e4d11 100644
--- a/components/drawer/demo/user-profile.vue
+++ b/components/drawer/demo/user-profile.vue
@@ -1,6 +1,6 @@
 <docs>
 ---
-order: 5
+order: 6
 title:
   zh-CN: 信息预览抽屉
   en-US: Preview drawer
diff --git a/components/vc-drawer/src/DrawerChild.tsx b/components/vc-drawer/src/DrawerChild.tsx
index 8ad088195..0c95e5e11 100644
--- a/components/vc-drawer/src/DrawerChild.tsx
+++ b/components/vc-drawer/src/DrawerChild.tsx
@@ -6,6 +6,7 @@ import omit from '../../_util/omit';
 import supportsPassive from '../../_util/supportsPassive';
 import { DrawerChildProps } from './IDrawerPropTypes';
 import type { IDrawerChildProps } from './IDrawerPropTypes';
+import setStyle from '../../_util/setStyle';
 
 import {
   addEventListener,
@@ -21,11 +22,48 @@ import {
 
 const currentDrawer: Record<string, boolean> = {};
 
+export interface scrollLockOptions {
+  container: HTMLElement;
+}
+
+const createScrollLocker = (options: scrollLockOptions) => {
+  let scrollBarSize = 0;
+  let cacheStyleMap = new Map();
+  return {
+    getContainer: () => {
+      return options?.container;
+    },
+    getCacheStyleMap: () => {
+      return cacheStyleMap;
+    },
+    lock: () => {
+      cacheStyleMap.set(
+        options.container,
+        setStyle(
+          {
+            width: scrollBarSize !== 0 ? `calc(100% - ${scrollBarSize}px)` : undefined,
+            overflow: 'hidden',
+            overflowX: 'hidden',
+            overflowY: 'hidden',
+          },
+          {
+            element: options.container || document.body,
+          },
+        ),
+      );
+    },
+    unLock: () => {
+      setStyle(cacheStyleMap.get(options.container) || {}, { element: options.container });
+      cacheStyleMap.delete(options.container);
+    },
+  };
+};
+
 const DrawerChild = defineComponent({
   inheritAttrs: false,
   props: DrawerChildProps,
   emits: ['close', 'handleClick', 'change'],
-  setup(props, { emit, slots, expose }) {
+  setup(props, { emit, slots }) {
     const state = reactive({
       levelDom: [],
       dom: null,
@@ -40,6 +78,7 @@ const DrawerChild = defineComponent({
         x: null,
         y: null,
       },
+      scrollLocker: null,
     });
 
     onMounted(() => {
@@ -55,6 +94,13 @@ const DrawerChild = defineComponent({
             .replace('.', Math.round(Math.random() * 9).toString()),
         ).toString(16)}`;
         getLevelDom(props);
+
+        if (container) {
+          state.scrollLocker = createScrollLocker({
+            container: container.parentNode,
+          });
+        }
+
         if (open) {
           if (container && container.parentNode === document.body) {
             currentDrawer[state.drawerId] = open;
@@ -67,14 +113,15 @@ const DrawerChild = defineComponent({
             }
           });
           if (showMask) {
-            props.scrollLocker?.lock();
+            state.scrollLocker?.lock();
           }
         }
       });
     });
 
     onUpdated(() => {
-      const { open, getContainer, scrollLocker, showMask, autoFocus } = props;
+      const { open, getContainer, showMask, autoFocus } = props;
+
       const container = getContainer?.();
       if (container && container.parentNode === document.body) {
         currentDrawer[state.drawerId] = !!open;
@@ -85,21 +132,21 @@ const DrawerChild = defineComponent({
           domFocus();
         }
         if (showMask) {
-          scrollLocker?.lock();
+          state.scrollLocker?.lock();
         }
       } else {
-        scrollLocker?.unLock();
+        state.scrollLocker?.unLock();
       }
     });
 
     onUnmounted(() => {
-      const { open, scrollLocker } = props;
+      const { open } = props;
       delete currentDrawer[state.drawerId];
       if (open) {
         setLevelTransform(false);
         document.body.style.touchAction = '';
       }
-      scrollLocker?.unLock();
+      state.scrollLocker?.unLock();
     });
 
     watch(
@@ -400,28 +447,6 @@ const DrawerChild = defineComponent({
       };
     };
 
-    const getDerivedStateFromProps = (
-      props: IDrawerChildProps,
-      { prevProps }: { prevProps: IDrawerChildProps },
-    ) => {
-      const nextState = {
-        prevProps: props,
-      };
-      if (prevProps !== undefined) {
-        const { placement, level } = props;
-        if (placement !== prevProps.placement) {
-          // test 的 bug, 有动画过场，删除 dom
-          state.contentDom = null;
-        }
-        if (level !== prevProps.level) {
-          getLevelDom(props);
-        }
-      }
-      return nextState;
-    };
-
-    expose({ getDerivedStateFromProps });
-
     return () => {
       const {
         width,