@delangle/use-modal - npm Package Compare versions

Comparing version 1.1.3 to 1.2.0

dist/index.esm.js

 import { __assign } from 'tslib';
-import { useRef, useState, useEffect, useCallback, useMemo, useLayoutEffect } from 'react';
+import { useRef, useState, useMemo, useEffect, useCallback, useLayoutEffect } from 'react';
 
@@ -51,2 +51,14 @@ var ModalState;
     var _a = useState(false), isLocalOpened = _a[0], setLocalOpened = _a[1];
+    var state = useMemo(function () {
+        if (!open && !isLocalOpened) {
+            return ModalState.closed;
+        }
+        if (!open && isLocalOpened) {
+            return ModalState.closing;
+        }
+        if (open && !isLocalOpened) {
+            return ModalState.opening;
+        }
+        return ModalState.opened;
+    }, [open, isLocalOpened]);
     useEffect(function () {
@@ -79,3 +91,3 @@ configRef.current = config;
             if (!configRef.current.persistent &&
-                isLocalOpened &&
+                state === ModalState.opened &&
                 domRef.current &&
@@ -92,15 +104,3 @@ !domRef.current.contains(e.target)) {
         };
-    }, [domRef, handleClose, isLocalOpened]);
-    var state = useMemo(function () {
-        if (!open && !isLocalOpened) {
-            return ModalState.closed;
-        }
-        if (!open && isLocalOpened) {
-            return ModalState.closing;
-        }
-        if (open && !isLocalOpened) {
-            return ModalState.opening;
-        }
-        return ModalState.opened;
-    }, [open, isLocalOpened]);
+    }, [domRef, handleClose, isLocalOpened, state]);
     return {
@@ -107,0 +107,0 @@ state: state,

dist/index.js

@@ -54,2 +54,14 @@ 'use strict';
     var _a = React.useState(false), isLocalOpened = _a[0], setLocalOpened = _a[1];
+    var state = React.useMemo(function () {
+        if (!open && !isLocalOpened) {
+            return exports.ModalState.closed;
+        }
+        if (!open && isLocalOpened) {
+            return exports.ModalState.closing;
+        }
+        if (open && !isLocalOpened) {
+            return exports.ModalState.opening;
+        }
+        return exports.ModalState.opened;
+    }, [open, isLocalOpened]);
     React.useEffect(function () {
@@ -82,3 +94,3 @@ configRef.current = config;
             if (!configRef.current.persistent &&
-                isLocalOpened &&
+                state === exports.ModalState.opened &&
                 domRef.current &&
@@ -95,15 +107,3 @@ !domRef.current.contains(e.target)) {
         };
-    }, [domRef, handleClose, isLocalOpened]);
-    var state = React.useMemo(function () {
-        if (!open && !isLocalOpened) {
-            return exports.ModalState.closed;
-        }
-        if (!open && isLocalOpened) {
-            return exports.ModalState.closing;
-        }
-        if (open && !isLocalOpened) {
-            return exports.ModalState.opening;
-        }
-        return exports.ModalState.opened;
-    }, [open, isLocalOpened]);
+    }, [domRef, handleClose, isLocalOpened, state]);
     return {
@@ -110,0 +110,0 @@ state: state,

dist/index.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib=require("tslib"),React=require("react");!function(e){e.opening="opening",e.opened="opened",e.closing="closing",e.closed="closed"}(exports.ModalState||(exports.ModalState={}));var ESCAPE_KEY="Escape",DEFAULT_CONFIG={animationDuration:300,animated:!1,persistent:!1,open:!1,onClose:function(){}},useSSRLayoutEffect="object"==typeof window?React.useLayoutEffect:React.useEffect,useMergedRef=function(e){var t=React.useRef(null);return e||t},useHasAlreadyBeenOpened=function(e){var t=React.useRef(!1);return!t.current&&e&&(t.current=!0),t.current},useDelayedOpen=function(e,t){var n=React.useRef(!1),r=!n.current&&t&&e,u=React.useState(!r),a=u[0],o=u[1];return React.useEffect(function(){n.current=!0,a||o(!0)},[a]),!(!a||!e)},useModal=function(e){var t=tslib.__assign(tslib.__assign({},DEFAULT_CONFIG),e),n=useDelayedOpen(t.open,t.animated),r=useHasAlreadyBeenOpened(n),u=useMergedRef(t.ref),a=React.useRef(t),o=React.useState(!1),c=o[0],s=o[1];React.useEffect(function(){a.current=t}),useSSRLayoutEffect(function(){a.current.animated||n===c||s(n)},[c,n]);var i=React.useCallback(function(){a.current.onClose()},[]);return React.useEffect(function(){if(a.current.animated){var e=setTimeout(function(){return s(n)},a.current.animationDuration);return function(){return clearTimeout(e)}}},[n]),React.useEffect(function(){var e=function(e){!a.current.persistent&&a.current.open&&e.key===ESCAPE_KEY&&i()},t=function(e){!a.current.persistent&&c&&u.current&&!u.current.contains(e.target)&&i()};return window.addEventListener("keydown",e),window.addEventListener("click",t),function(){window.removeEventListener("keydown",e),window.removeEventListener("click",t)}},[u,i,c]),{state:React.useMemo(function(){return n||c?!n&&c?exports.ModalState.closing:n&&!c?exports.ModalState.opening:exports.ModalState.opened:exports.ModalState.closed},[n,c]),close:i,ref:u,hasAlreadyBeenOpened:r}};exports.default=useModal;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var tslib=require("tslib"),React=require("react");!function(e){e.opening="opening",e.opened="opened",e.closing="closing",e.closed="closed"}(exports.ModalState||(exports.ModalState={}));var ESCAPE_KEY="Escape",DEFAULT_CONFIG={animationDuration:300,animated:!1,persistent:!1,open:!1,onClose:function(){}},useSSRLayoutEffect="object"==typeof window?React.useLayoutEffect:React.useEffect,useMergedRef=function(e){var t=React.useRef(null);return e||t},useHasAlreadyBeenOpened=function(e){var t=React.useRef(!1);return!t.current&&e&&(t.current=!0),t.current},useDelayedOpen=function(e,t){var n=React.useRef(!1),r=!n.current&&t&&e,a=React.useState(!r),o=a[0],u=a[1];return React.useEffect(function(){n.current=!0,o||u(!0)},[o]),!(!o||!e)},useModal=function(e){var t=tslib.__assign(tslib.__assign({},DEFAULT_CONFIG),e),n=useDelayedOpen(t.open,t.animated),r=useHasAlreadyBeenOpened(n),a=useMergedRef(t.ref),o=React.useRef(t),u=React.useState(!1),c=u[0],s=u[1],i=React.useMemo(function(){return n||c?!n&&c?exports.ModalState.closing:n&&!c?exports.ModalState.opening:exports.ModalState.opened:exports.ModalState.closed},[n,c]);React.useEffect(function(){o.current=t}),useSSRLayoutEffect(function(){o.current.animated||n===c||s(n)},[c,n]);var f=React.useCallback(function(){o.current.onClose()},[]);return React.useEffect(function(){if(o.current.animated){var e=setTimeout(function(){return s(n)},o.current.animationDuration);return function(){return clearTimeout(e)}}},[n]),React.useEffect(function(){var e=function(e){!o.current.persistent&&o.current.open&&e.key===ESCAPE_KEY&&f()},t=function(e){o.current.persistent||i!==exports.ModalState.opened||!a.current||a.current.contains(e.target)||f()};return window.addEventListener("keydown",e),window.addEventListener("click",t),function(){window.removeEventListener("keydown",e),window.removeEventListener("click",t)}},[a,f,c,i]),{state:i,close:f,ref:a,hasAlreadyBeenOpened:r}};exports.default=useModal;
 //# sourceMappingURL=index.min.js.map

dist/typings/useModal.d.ts

@@ -1,4 +0,4 @@
-import { ModalFullConfig, Modal } from './useModal.interface';
+import { Modal, ModalFullConfig } from './useModal.interface';
 declare const useModal: <ContainerElement extends HTMLElement = HTMLDivElement>(baseConfig: Partial<ModalFullConfig<ContainerElement>>) => Modal<ContainerElement>;
 export default useModal;
 //# sourceMappingURL=useModal.d.ts.map

package.json

 {
   "name": "@delangle/use-modal",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "description": "React hook for modal management",
@@ -5,0 +5,0 @@ "private": false,

src/useModal.ts

 import * as React from 'react'
 
 import {
+  Modal,
   ModalConfig,
   ModalFullConfig,
-  Modal,
   ModalState,
@@ -77,2 +77,18 @@ } from './useModal.interface'
 
+  const state = React.useMemo<ModalState>(() => {
+    if (!open && !isLocalOpened) {
+      return ModalState.closed
+    }
+
+    if (!open && isLocalOpened) {
+      return ModalState.closing
+    }
+
+    if (open && !isLocalOpened) {
+      return ModalState.opening
+    }
+
+    return ModalState.opened
+  }, [open, isLocalOpened])
+
   React.useEffect(() => {
@@ -117,3 +133,3 @@ configRef.current = config
         !configRef.current.persistent &&
-        isLocalOpened &&
+        state === ModalState.opened &&
         domRef.current &&
@@ -133,20 +149,4 @@ !domRef.current.contains(e.target as Node)
     }
-  }, [domRef, handleClose, isLocalOpened])
+  }, [domRef, handleClose, isLocalOpened, state])
 
-  const state = React.useMemo<ModalState>(() => {
-    if (!open && !isLocalOpened) {
-      return ModalState.closed
-    }
-
-    if (!open && isLocalOpened) {
-      return ModalState.closing
-    }
-
-    if (open && !isLocalOpened) {
-      return ModalState.opening
-    }
-
-    return ModalState.opened
-  }, [open, isLocalOpened])
-
   return {
@@ -153,0 +153,0 @@ state,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

37779

increased by0.4%

No dependency changes