refactor: use ScrollLocker (#220)

* refactor: use ScrollLocker

* upgrade rc-util

* add package-lock.json ignore

* fix lint error

* improve consistent-return

* add semi

* fix useEffect return

Author: shaodahong

.gitignore

@@ -32,6 +32,7 @@ coverage
 /ios/
 /android/
 yarn.lock
+package-lock.json
 .storybook
 .doc
 

docs/examples/ant-design.tsx

@@ -201,41 +201,43 @@ const MyControl = () => {
   );
 
   return (
-    <div style={{ width: '90%', margin: '0 auto', height: '150vh' }}>
-      <style>
-        {`
+    <React.StrictMode>
+      <div style={{ width: '90%', margin: '0 auto', height: '150vh' }}>
+        <style>
+          {`
           .center {
             display: flex;
             align-items: center;
             justify-content: center;
           }
           `}
-      </style>
-      <p>
-        <button type="button" className="btn btn-primary" onClick={onClick}>
-          show dialog
-        </button>
-        &nbsp;
-        <label>
-          destroy on close:
-          <input type="checkbox" checked={destroyOnClose} onChange={onDestroyOnCloseChange} />
-        </label>
-        &nbsp;
-        <label>
-          center
-          <input type="checkbox" checked={center} onChange={centerEvent} />
-        </label>
-        &nbsp;
-        <label>
-          force render
-          <input type="checkbox" checked={forceRender} onChange={onForceRenderChange} />
-        </label>
-        <input placeholder="Useless Input" onClick={onClick} />
-      </p>
-      {dialog}
-      {dialog2}
-      {dialog3}
-    </div>
+        </style>
+        <p>
+          <button type="button" className="btn btn-primary" onClick={onClick}>
+            show dialog
+          </button>
+          &nbsp;
+          <label>
+            destroy on close:
+            <input type="checkbox" checked={destroyOnClose} onChange={onDestroyOnCloseChange} />
+          </label>
+          &nbsp;
+          <label>
+            center
+            <input type="checkbox" checked={center} onChange={centerEvent} />
+          </label>
+          &nbsp;
+          <label>
+            force render
+            <input type="checkbox" checked={forceRender} onChange={onForceRenderChange} />
+          </label>
+          <input placeholder="Useless Input" onClick={onClick} />
+        </p>
+        {dialog}
+        {dialog2}
+        {dialog3}
+      </div>
+    </React.StrictMode>
   );
 };
 

package.json

@@ -50,7 +50,7 @@
     "@babel/runtime": "^7.10.1",
     "classnames": "^2.2.6",
     "rc-motion": "^2.3.0",
-    "rc-util": "^5.0.1"
+    "rc-util": "^5.6.1"
   },
   "devDependencies": {
     "@types/enzyme": "^3.10.7",

src/Dialog/index.tsx

@@ -3,6 +3,7 @@ import { useRef, useEffect } from 'react';
 import classNames from 'classnames';
 import KeyCode from 'rc-util/lib/KeyCode';
 import contains from 'rc-util/lib/Dom/contains';
+import ScollLocker from 'rc-util/lib/Dom/scrollLocker';
 import { IDialogPropTypes } from '../IDialogPropTypes';
 import Mask from './Mask';
 import { getMotionName, getUUID } from '../util';
@@ -12,7 +13,7 @@ export interface IDialogChildProps extends IDialogPropTypes {
   // zombieJ: This should be handle on top instead of each Dialog.
   // TODO: refactor to remove this.
   getOpenCount: () => number;
-  switchScrollingEffect?: () => void;
+  scrollLocker?: ScollLocker;
 }
 
 export default function Dialog(props: IDialogChildProps) {
@@ -22,7 +23,7 @@ export default function Dialog(props: IDialogChildProps) {
     visible = false,
     keyboard = true,
     focusTriggerAfterClose = true,
-    switchScrollingEffect = () => {},
+    scrollLocker,
 
     // Wrapper
     title,
@@ -69,7 +70,6 @@ export default function Dialog(props: IDialogChildProps) {
     } else {
       // Clean up scroll bar & focus back
       setAnimatedVisible(false);
-      switchScrollingEffect();
 
       if (mask && lastOutSideActiveElementRef.current && focusTriggerAfterClose) {
         try {
@@ -96,24 +96,22 @@ export default function Dialog(props: IDialogChildProps) {
   const onContentMouseDown: React.MouseEventHandler = () => {
     clearTimeout(contentTimeoutRef.current);
     contentClickRef.current = true;
-  }
+  };
 
   const onContentMouseUp: React.MouseEventHandler = () => {
     contentTimeoutRef.current = setTimeout(() => {
       contentClickRef.current = false;
     });
-  }
+  };
 
   // >>> Wrapper
   // Close only when element not on dialog
   let onWrapperClick: (e: React.SyntheticEvent) => void = null;
   if (maskClosable) {
     onWrapperClick = (e) => {
-      if(contentClickRef.current) {
+      if (contentClickRef.current) {
         contentClickRef.current = false;
-      } else if (
-        wrapperRef.current === e.target
-      ) {
+      } else if (wrapperRef.current === e.target) {
         onInternalClose(e);
       }
     };
@@ -138,14 +136,16 @@ export default function Dialog(props: IDialogChildProps) {
   useEffect(() => {
     if (visible) {
       setAnimatedVisible(true);
-      switchScrollingEffect();
+      scrollLocker?.lock();
+
+      return scrollLocker?.unLock;
     }
+    return () => {};
   }, [visible]);
 
   // Remove direct should also check the scroll bar update
   useEffect(
     () => () => {
-      switchScrollingEffect();
       clearTimeout(contentTimeoutRef.current);
     },
     [],