From 2851462f293f309d5ce1528afad7130be5243dd3 Mon Sep 17 00:00:00 2001
From: yuki0410_ <>
Date: Sun, 29 Aug 2021 20:58:37 +0900
Subject: [PATCH] change scroll lock module

- remove  disable-scroll
- add body-scroll-lock
- Moved optional processing
---
 package-lock.json | 48 +++++++++++++++++++++++++++++++++++++-------
 package.json      |  3 ++-
 src/index.tsx     | 51 +++++++++++++++++++++++++++++++++--------------
 3 files changed, 79 insertions(+), 23 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4c0cf54..cdb6456 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "react-hooks-use-modal",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1274,6 +1274,12 @@
       "integrity": "sha512-Z6DoceYb/1xSg5+e+ZlPZ9v0N16ZvZ+wYMraFue4HYrE4ttONKtsvruIRf6t9TBR0YvSOfi1hUU0fJfBLCDYow==",
       "dev": true
     },
+    "@types/body-scroll-lock": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@types/body-scroll-lock/-/body-scroll-lock-3.1.0.tgz",
+      "integrity": "sha512-3owAC4iJub5WPqRhxd8INarF2bWeQq1yQHBgYhN0XLBJMpd5ED10RrJ3aKiAwlTyL5wK7RkBD4SZUQz2AAAMdA==",
+      "dev": true
+    },
     "@types/eslint": {
       "version": "7.28.0",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.28.0.tgz",
@@ -1984,6 +1990,16 @@
       "integrity": "sha512-Un7MIEDdUC5gNpcGDV97op1Ywk748MpHcFTHoYs6qnj1Z3j7I53VG3nwZhKzoBZmbdRNnb6WRdFlwl7tSDuZGw==",
       "dev": true
     },
+    "bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
     "body-parser": {
       "version": "1.19.0",
       "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz",
@@ -2025,6 +2041,11 @@
         }
       }
     },
+    "body-scroll-lock": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/body-scroll-lock/-/body-scroll-lock-3.1.5.tgz",
+      "integrity": "sha512-Yi1Xaml0EvNA0OYWxXiYNqY24AfWkbA6w5vxE7GWxtKfzIbZM+Qw+aSmkgsbWzbHiy/RCSkUZBplVxTA+E4jJg=="
+    },
     "bonjour": {
       "version": "3.5.0",
       "resolved": "https://registry.npmjs.org/bonjour/-/bonjour-3.5.0.tgz",
@@ -2272,7 +2293,11 @@
           "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
           "dev": true,
-          "optional": true
+          "optional": true,
+          "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
+          }
         },
         "is-number": {
           "version": "3.0.0",
@@ -2945,11 +2970,6 @@
       "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==",
       "dev": true
     },
-    "disable-scroll": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/disable-scroll/-/disable-scroll-0.6.0.tgz",
-      "integrity": "sha512-6bTAS16sz+3X7Pib8d5dAO9xo5MvqDZvSlzuhW/2c3NhUvbPNqnsV3JttvnqgNCDEgWUgNWJYM392iUmLETDxA=="
-    },
     "dns-equal": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
@@ -3464,6 +3484,13 @@
         "object-assign": "^4.1.0"
       }
     },
+    "file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "dev": true,
+      "optional": true
+    },
     "filename-reserved-regex": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-1.0.0.tgz",
@@ -5765,6 +5792,13 @@
       "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=",
       "dev": true
     },
+    "nan": {
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.15.0.tgz",
+      "integrity": "sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ==",
+      "dev": true,
+      "optional": true
+    },
     "nanoid": {
       "version": "3.1.25",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.25.tgz",
diff --git a/package.json b/package.json
index ec06807..69c2c1f 100644
--- a/package.json
+++ b/package.json
@@ -17,9 +17,10 @@
   "module": "dist/index.modern.js",
   "types": "dist/index.d.ts",
   "dependencies": {
-    "disable-scroll": "^0.6.0"
+    "body-scroll-lock": "^3.1.5"
   },
   "devDependencies": {
+    "@types/body-scroll-lock": "^3.1.0",
     "@types/react": "^17.0.16",
     "@types/react-dom": "^17.0.9",
     "gh-pages": "^2.1.1",
diff --git a/src/index.tsx b/src/index.tsx
index b023b6c..f59393f 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,6 +1,6 @@
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import disableScroll from 'disable-scroll';
+import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock';
 import { useOverlay } from './useOverlay';
 
 export interface ModalProps {
@@ -8,6 +8,7 @@ export interface ModalProps {
   isOpen: boolean;
   onOverlayClick: React.MouseEventHandler<HTMLDivElement>;
   elementId: 'root' | string;
+  preventScroll?: boolean;
 };
 
 export interface ModalOptions {
@@ -52,15 +53,41 @@ const containerStyle: React.CSSProperties = {
   zIndex: 100001,
 };
 
-const Modal: React.FC<ModalProps> = ({ children, isOpen = false, onOverlayClick, elementId = 'root' }) => {
+const Modal: React.FC<ModalProps> = ({ children, isOpen = false, onOverlayClick, elementId = 'root', preventScroll = false }) => {
+  const containerRef = useRef<HTMLDivElement>(null);
   const ref = useRef<HTMLDivElement>(null);
   useOverlay(isOpen, close, ref);
 
+  useEffect(() => {
+    if (containerRef.current === null) {
+      return;
+    }
+    if (isOpen) {
+      if (preventScroll) {
+        disableBodyScroll(containerRef.current, {
+          reserveScrollBarGap: true,
+        });
+      }
+    } else {
+      if (preventScroll) {
+        enableBodyScroll(containerRef.current)
+      }
+    }
+    return () => {
+      if (containerRef.current === null) {
+        return;
+      }
+      if (preventScroll) {
+        enableBodyScroll(containerRef.current)
+      }
+    }
+  },[containerRef, isOpen, preventScroll]);
+
   if (isOpen === false) {
     return null;
   }
   return createPortal(
-    <div role="dialog" aria-modal style={wrapperStyle}>
+    <div role="dialog" aria-modal style={wrapperStyle} ref={containerRef}>
       <div style={overlayStyle} onClick={onOverlayClick} />
       <div ref={ref} style={containerStyle}>{children}</div>
     </div>,
@@ -69,31 +96,25 @@ const Modal: React.FC<ModalProps> = ({ children, isOpen = false, onOverlayClick,
 };
 
 export const useModal: UseModal = (elementId = 'root', options = {}) => {
-  const { preventScroll = false, closeOnOverlayClick = true } = options;
+  const { preventScroll, closeOnOverlayClick = true } = options;
   const [isOpen, setOpen] = useState<boolean>(false);
   const open = useCallback(() => {
     setOpen(true);
-    if (preventScroll) {
-      disableScroll.on();
-    }
-  }, [setOpen, preventScroll]);
+  }, [setOpen]);
   const close = useCallback(() => {
     setOpen(false);
-    if (preventScroll) {
-      disableScroll.off();
-    }
-  }, [setOpen, preventScroll]);
+  }, [setOpen]);
   const onOverlayClick = useCallback((event: React.MouseEvent<HTMLDivElement>) => {
     event.stopPropagation();
     if (closeOnOverlayClick) {
       close();
-    }    
+    }
   }, [closeOnOverlayClick, close]);
 
   const ModalWrapper = useCallback(
     ({ children }) => {
       return (
-        <Modal isOpen={isOpen} onOverlayClick={onOverlayClick} elementId={elementId}>
+        <Modal isOpen={isOpen} onOverlayClick={onOverlayClick} elementId={elementId} preventScroll={preventScroll}>
           {children}
         </Modal>
       );