@delangle/use-modal - npm Package Compare versions

Comparing version 0.1.2 to 0.1.3

dist/index.js

@@ -1,10 +0,114 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib_1 = require('tslib');
+var React = require('react');
+
+(function (ModalState) {
+    ModalState["opening"] = "opening";
+    ModalState["opened"] = "opened";
+    ModalState["closing"] = "closing";
+    ModalState["closed"] = "closed";
+})(exports.ModalState || (exports.ModalState = {}));
+
+var ESCAPE_KEY = 'Escape';
+var DEFAULT_CONFIG = {
+    animationDuration: 300,
+    animated: false,
+    persistent: false,
+    open: false,
+    onClose: function () { },
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-const useModal_1 = __importDefault(require("./useModal"));
-var useModal_interface_1 = require("./useModal.interface");
-exports.ModalState = useModal_interface_1.ModalState;
-exports.default = useModal_1.default;
-//# sourceMappingURL=index.js.map
+var useSSRLayoutEffect = typeof window === 'object' ? React.useLayoutEffect : React.useEffect;
+var useMergedRef = function (ref) {
+    var innerRef = React.useRef(null);
+    return (ref ? ref : innerRef);
+};
+var useHasAlreadyBeenOpened = function (open) {
+    var hasAlreadyBeenOpened = React.useRef(false);
+    if (!hasAlreadyBeenOpened.current && open) {
+        hasAlreadyBeenOpened.current = true;
+    }
+    return hasAlreadyBeenOpened.current;
+};
+var useDelayedOpen = function (open, animated) {
+    var hasAlreadyRendered = React.useRef(false);
+    var shouldDelayOpening = !hasAlreadyRendered.current && animated && open;
+    var _a = React.useState(!shouldDelayOpening), canBeOpened = _a[0], setCanBeOpened = _a[1];
+    React.useEffect(function () {
+        hasAlreadyRendered.current = true;
+        if (!canBeOpened) {
+            setCanBeOpened(true);
+        }
+    }, [canBeOpened]);
+    return !!(canBeOpened && open);
+};
+var useModal = function (baseConfig) {
+    var config = tslib_1.__assign({}, DEFAULT_CONFIG, baseConfig);
+    var open = useDelayedOpen(config.open, config.animated);
+    var hasAlreadyBeenOpened = useHasAlreadyBeenOpened(open);
+    var domRef = useMergedRef(config.ref);
+    var configRef = React.useRef(config);
+    var _a = React.useState(false), isLocalOpened = _a[0], setLocalOpened = _a[1];
+    React.useEffect(function () {
+        configRef.current = config;
+    });
+    useSSRLayoutEffect(function () {
+        if (!configRef.current.animated && open !== isLocalOpened) {
+            setLocalOpened(open);
+        }
+    }, [isLocalOpened, open]);
+    var handleClose = React.useCallback(function () {
+        configRef.current.onClose();
+    }, []);
+    React.useEffect(function () {
+        if (configRef.current.animated) {
+            var timeout_1 = setTimeout(function () { return setLocalOpened(open); }, configRef.current.animationDuration);
+            return function () { return clearTimeout(timeout_1); };
+        }
+    }, [open]);
+    React.useEffect(function () {
+        var handleKeyDown = function (e) {
+            if (!configRef.current.persistent &&
+                configRef.current.open &&
+                e.key === ESCAPE_KEY) {
+                handleClose();
+            }
+        };
+        var handleClick = function (e) {
+            if (!configRef.current.persistent &&
+                isLocalOpened &&
+                domRef.current &&
+                !domRef.current.contains(e.target)) {
+                handleClose();
+            }
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        window.addEventListener('click', handleClick);
+        return function () {
+            window.removeEventListener('keydown', handleKeyDown);
+            window.removeEventListener('click', handleClick);
+        };
+    }, [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]);
+    return {
+        state: state,
+        close: handleClose,
+        ref: domRef,
+        hasAlreadyBeenOpened: hasAlreadyBeenOpened,
+    };
+};
+
+exports.default = useModal;

package.json

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

tsconfig.json

@@ -12,3 +12,2 @@ {
     "strict": true,
-    "target": "esnext",
     "module": "commonjs",
@@ -15,0 +14,0 @@ "esModuleInterop": true,

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

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

37592

increased by27.17%

Lines of code

666

increased by16.64%

Worsened metrics

Number of package files

20

decreased by-9.09%

Number of low quality alerts

2

increased by100%

No dependency changes