@dynamic-labs/sdk-react-core 1.1.0-alpha.1 → 1.1.0-alpha.11

package/src/lib/shared/utils/hooks/useOnClickOutside/index.cjs

@@ -5,6 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 
 const useOnClickOutside = (ref, handler) => {
+    const handlerRef = React.useRef(handler);
+    handlerRef.current = handler;
     React.useEffect(() => {
         const listener = (event) => {
             event.stopPropagation();
@@ -14,7 +16,7 @@ const useOnClickOutside = (ref, handler) => {
                 ref.current.contains(realTarget)) {
                 return;
             }
-            handler(event);
+            handlerRef.current(event);
         };
         document.addEventListener('touchstart', listener);
         document.addEventListener('click', listener);
@@ -22,7 +24,7 @@ const useOnClickOutside = (ref, handler) => {
             document.removeEventListener('touchstart', listener);
             document.removeEventListener('click', listener);
         };
-    }, [ref, handler]);
+    }, [ref]);
 };
 
 exports.useOnClickOutside = useOnClickOutside;

package/src/lib/shared/utils/hooks/useOnClickOutside/index.js

@@ -1,6 +1,8 @@
-import { useEffect } from 'react';
+import { useRef, useEffect } from 'react';
 
 const useOnClickOutside = (ref, handler) => {
+    const handlerRef = useRef(handler);
+    handlerRef.current = handler;
     useEffect(() => {
         const listener = (event) => {
             event.stopPropagation();
@@ -10,7 +12,7 @@ const useOnClickOutside = (ref, handler) => {
                 ref.current.contains(realTarget)) {
                 return;
             }
-            handler(event);
+            handlerRef.current(event);
         };
         document.addEventListener('touchstart', listener);
         document.addEventListener('click', listener);
@@ -18,7 +20,7 @@ const useOnClickOutside = (ref, handler) => {
             document.removeEventListener('touchstart', listener);
             document.removeEventListener('click', listener);
         };
-    }, [ref, handler]);
+    }, [ref]);
 };
 
 export { useOnClickOutside };

package/src/lib/shared/utils/hooks/usePreventPageScroll/usePreventPageScroll.cjs

@@ -5,11 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var utils = require('@dynamic-labs/utils');
 
+// This hook allows us to prevent page from scrolling ie. when a modal is open.
+// It adds a class to the html and body elements which disables scrolling.
 const usePreventPageScroll = (isOpen) => {
-    React.useEffect(() => {
+    const disableScroll = () => {
         var _a;
-        if (!isOpen)
-            return;
         const html = document.querySelector('html');
         const body = document.querySelector('body');
         /* istanbul ignore next */
@@ -25,10 +25,6 @@ const usePreventPageScroll = (isOpen) => {
             return;
         html.classList.add('dynamic-no-scroll');
         body.classList.add('dynamic-no-scroll');
-        const userScrollCoordinatesBeforeLock = {
-            x: window.scrollX,
-            y: window.scrollY,
-        };
         // IOS Safari needs to have a different class to prevent scroll
         // We need to add postion: fixed to lock the body scrolling
         // It breaks the scroll position, so we need to save the scroll position and restore it after the modal is closed
@@ -37,16 +33,33 @@ const usePreventPageScroll = (isOpen) => {
             html.classList.add('dynamic-no-scroll--ios');
             body.classList.add('dynamic-no-scroll--ios');
         }
+    };
+    const enableScroll = (userScrollCoordinatesBeforeLock) => {
+        const html = document.querySelector('html');
+        const body = document.querySelector('body');
+        /* istanbul ignore next */
+        if (!html || !body)
+            return;
+        html.classList.remove('dynamic-no-scroll');
+        body.classList.remove('dynamic-no-scroll');
+        // Restore the scroll position when user is using IOS
+        /* istanbul ignore else */
+        if (utils.isIOS()) {
+            html.classList.remove('dynamic-no-scroll--ios');
+            body.classList.remove('dynamic-no-scroll--ios');
+            window.scrollTo(userScrollCoordinatesBeforeLock.x, userScrollCoordinatesBeforeLock.y);
+        }
+    };
+    React.useEffect(() => {
+        if (!isOpen)
+            return;
+        const userScrollCoordinatesBeforeLock = {
+            x: window.scrollX,
+            y: window.scrollY,
+        };
+        disableScroll();
         return () => {
-            html.classList.remove('dynamic-no-scroll');
-            body.classList.remove('dynamic-no-scroll');
-            // Restore the scroll position when user is using IOS
-            /* istanbul ignore else */
-            if (utils.isIOS()) {
-                html.classList.remove('dynamic-no-scroll--ios');
-                body.classList.remove('dynamic-no-scroll--ios');
-                window.scrollTo(userScrollCoordinatesBeforeLock.x, userScrollCoordinatesBeforeLock.y);
-            }
+            enableScroll(userScrollCoordinatesBeforeLock);
         };
     }, [isOpen]);
 };

package/src/lib/shared/utils/hooks/usePreventPageScroll/usePreventPageScroll.js

@@ -1,11 +1,11 @@
 import { useEffect } from 'react';
 import { isIOS } from '@dynamic-labs/utils';
 
+// This hook allows us to prevent page from scrolling ie. when a modal is open.
+// It adds a class to the html and body elements which disables scrolling.
 const usePreventPageScroll = (isOpen) => {
-    useEffect(() => {
+    const disableScroll = () => {
         var _a;
-        if (!isOpen)
-            return;
         const html = document.querySelector('html');
         const body = document.querySelector('body');
         /* istanbul ignore next */
@@ -21,10 +21,6 @@ const usePreventPageScroll = (isOpen) => {
             return;
         html.classList.add('dynamic-no-scroll');
         body.classList.add('dynamic-no-scroll');
-        const userScrollCoordinatesBeforeLock = {
-            x: window.scrollX,
-            y: window.scrollY,
-        };
         // IOS Safari needs to have a different class to prevent scroll
         // We need to add postion: fixed to lock the body scrolling
         // It breaks the scroll position, so we need to save the scroll position and restore it after the modal is closed
@@ -33,16 +29,33 @@ const usePreventPageScroll = (isOpen) => {
             html.classList.add('dynamic-no-scroll--ios');
             body.classList.add('dynamic-no-scroll--ios');
         }
+    };
+    const enableScroll = (userScrollCoordinatesBeforeLock) => {
+        const html = document.querySelector('html');
+        const body = document.querySelector('body');
+        /* istanbul ignore next */
+        if (!html || !body)
+            return;
+        html.classList.remove('dynamic-no-scroll');
+        body.classList.remove('dynamic-no-scroll');
+        // Restore the scroll position when user is using IOS
+        /* istanbul ignore else */
+        if (isIOS()) {
+            html.classList.remove('dynamic-no-scroll--ios');
+            body.classList.remove('dynamic-no-scroll--ios');
+            window.scrollTo(userScrollCoordinatesBeforeLock.x, userScrollCoordinatesBeforeLock.y);
+        }
+    };
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const userScrollCoordinatesBeforeLock = {
+            x: window.scrollX,
+            y: window.scrollY,
+        };
+        disableScroll();
         return () => {
-            html.classList.remove('dynamic-no-scroll');
-            body.classList.remove('dynamic-no-scroll');
-            // Restore the scroll position when user is using IOS
-            /* istanbul ignore else */
-            if (isIOS()) {
-                html.classList.remove('dynamic-no-scroll--ios');
-                body.classList.remove('dynamic-no-scroll--ios');
-                window.scrollTo(userScrollCoordinatesBeforeLock.x, userScrollCoordinatesBeforeLock.y);
-            }
+            enableScroll(userScrollCoordinatesBeforeLock);
         };
     }, [isOpen]);
 };