refactor: use ScrollLocker (#157)

* refactor: use ScrollLocker

* fix useless

* upgrade rc-util

* fix prettier

Author: shaodahong

.prettierrc

@@ -3,5 +3,6 @@
   "semi": true,
   "singleQuote": true,
   "tabWidth": 2,
-  "trailingComma": "all"
+  "trailingComma": "all",
+  "arrowParens": "avoid"
 }

package.json

@@ -71,6 +71,6 @@
   "dependencies": {
     "@babel/runtime": "^7.10.1",
     "classnames": "^2.2.6",
-    "rc-util": "^5.0.1"
+    "rc-util": "^5.6.2"
   }
 }

src/DrawerChild.tsx

@@ -27,10 +27,6 @@ interface IState {
 }
 
 class DrawerChild extends React.Component<IDrawerChildProps, IState> {
-  static defaultProps = {
-    switchScrollingEffect: () => {},
-  };
-
   public static getDerivedStateFromProps(
     props: IDrawerChildProps,
     { prevProps, _self }: { prevProps: IDrawerChildProps; _self: DrawerChild },
@@ -115,35 +111,35 @@ class DrawerChild extends React.Component<IDrawerChildProps, IState> {
       this.forceUpdate(() => {
         this.domFocus();
       });
+      this.props.scrollLocker?.lock();
     }
   }
 
   public componentDidUpdate(prevProps: IDrawerChildProps) {
-    const { open, getContainer } = this.props;
+    const { open, getContainer, scrollLocker } = this.props;
     const container = getContainer && getContainer();
     if (open !== prevProps.open) {
-      if (open) {
-        this.domFocus();
-      }
       if (container && container.parentNode === document.body) {
         currentDrawer[this.drawerId] = !!open;
       }
       this.openLevelTransition();
+      if (open) {
+        this.domFocus();
+        scrollLocker?.lock();
+      } else {
+        scrollLocker?.unLock();
+      }
     }
   }
 
   public componentWillUnmount() {
-    const { getOpenCount, open, switchScrollingEffect } = this.props;
-    const openCount = typeof getOpenCount === 'function' && getOpenCount();
+    const { open, scrollLocker } = this.props;
     delete currentDrawer[this.drawerId];
     if (open) {
       this.setLevelTransform(false);
       document.body.style.touchAction = '';
     }
-    if (!openCount) {
-      document.body.style.overflow = '';
-      switchScrollingEffect(true);
-    }
+    scrollLocker?.unLock();
   }
 
   private domFocus = () => {
@@ -346,17 +342,7 @@ class DrawerChild extends React.Component<IDrawerChildProps, IState> {
   };
 
   private addScrollingEffect = (right: number) => {
-    const {
-      placement,
-      duration,
-      ease,
-      getOpenCount,
-      switchScrollingEffect,
-    } = this.props;
-    const openCount = getOpenCount && getOpenCount();
-    if (openCount === 1) {
-      switchScrollingEffect();
-    }
+    const { placement, duration, ease } = this.props;
     const widthTransition = `width ${duration} ${ease}`;
     const transformTransition = `transform ${duration} ${ease}`;
     this.dom.style.transition = 'none';
@@ -383,17 +369,8 @@ class DrawerChild extends React.Component<IDrawerChildProps, IState> {
   };
 
   private remScrollingEffect = (right: number) => {
-    const {
-      placement,
-      duration,
-      ease,
-      getOpenCount,
-      switchScrollingEffect,
-    } = this.props;
-    const openCount = getOpenCount && getOpenCount();
-    if (!openCount) {
-      switchScrollingEffect(true);
-    }
+    const { placement, duration, ease } = this.props;
+
     if (transitionStr) {
       document.body.style.overflowX = 'hidden';
     }
@@ -511,7 +488,7 @@ class DrawerChild extends React.Component<IDrawerChildProps, IState> {
       onHandleClick,
       keyboard,
       getOpenCount,
-      switchScrollingEffect,
+      scrollLocker,
       ...props
     } = this.props;
     // 首次渲染都将是关闭状态。

src/IDrawerPropTypes.ts

@@ -4,6 +4,7 @@
 // Definitions: https://github.com/react-component/drawer
 import { GetContainer } from 'rc-util/lib/PortalWrapper';
 import * as React from 'react';
+import ScrollLocker from 'rc-util/lib/Dom/scrollLocker';
 
 export type IPlacement = 'left' | 'top' | 'right' | 'bottom';
 
@@ -44,5 +45,5 @@ export interface IDrawerProps extends IProps {
 export interface IDrawerChildProps extends IProps {
   getContainer?: () => HTMLElement;
   getOpenCount?: () => number;
-  switchScrollingEffect?: (close?: boolean) => void;
+  scrollLocker?: ScrollLocker;
 }

tests/__snapshots__/drawer.spec.tsx.snap

@@ -41,7 +41,8 @@ exports[`Drawer render boolean 1`] = `
 exports[`Drawer render dom 1`] = `
 <div>
   <div
-    class="main"
+    class="main ant-scrolling-effect"
+    style="padding-right: 0px; overflow: hidden; overflow-x: hidden; overflow-y: hidden;"
   >
     <div>
       <div