@4i/modal-manager 1.1.7 → 1.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@4i/modal-manager",
-  "version": "1.1.7",
+  "version": "1.1.9",
   "description": "",
   "main": "src/index.ts",
   "scripts": {

package/src/components/modal-provider.d.ts

@@ -1,5 +1,4 @@
 import React from "react";
-import { ModalManager } from "../utils/ModalManager";
 export type ModalList = {
     [key: string]: React.ComponentType;
 };
@@ -8,11 +7,10 @@ interface ModalProviderProps {
     isOverflow?: boolean;
     className?: string;
     backdropClassName?: string;
-    modalManager?: ModalManager;
     onModalStateChange?: (modalState: boolean, data: TData[], names: string[]) => void;
 }
 type TData = {
     [key: string]: any;
 };
-declare const ModalProvider: ({ modalList, isOverflow, className, backdropClassName, modalManager, onModalStateChange, }: ModalProviderProps) => React.JSX.Element;
+declare const ModalProvider: ({ modalList, isOverflow, className, backdropClassName, onModalStateChange, }: ModalProviderProps) => React.JSX.Element;
 export default ModalProvider;

package/src/components/modal-provider.js

@@ -34,6 +34,42 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -47,11 +83,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var ModalManager_1 = __importStar(require("../utils/ModalManager"));
 var ModalProvider = function (_a) {
-    var modalList = _a.modalList, isOverflow = _a.isOverflow, className = _a.className, backdropClassName = _a.backdropClassName, modalManager = _a.modalManager, onModalStateChange = _a.onModalStateChange;
+    var modalList = _a.modalList, isOverflow = _a.isOverflow, className = _a.className, backdropClassName = _a.backdropClassName, onModalStateChange = _a.onModalStateChange;
     var _b = (0, react_1.useState)([]), data = _b[0], setData = _b[1];
     var _c = (0, react_1.useState)([]), names = _c[0], setNames = _c[1];
     var modalRef = (0, react_1.useRef)([]);
-    var m = modalManager !== null && modalManager !== void 0 ? modalManager : ModalManager_1.default;
+    var applyCloseStyles = function (index) {
+        return new Promise(function (resolve) {
+            var modal = document.querySelector("[data-index=\"".concat(index, "\"]"));
+            if (!modal)
+                return;
+            modal.classList.add("closing");
+            setTimeout(function () {
+                resolve(true);
+            }, 150);
+        });
+    };
     (0, react_1.useEffect)(function () {
         if (!onModalStateChange)
             return;
@@ -69,46 +115,54 @@ var ModalProvider = function (_a) {
                 document.body.style.overflow = "hidden";
             }
         };
-        var handleClose = function (position) {
-            if (isOverflow) {
-                if (typeof document !== "undefined") {
-                    document.body.style.overflow = "";
+        var handleClose = function (position) { return __awaiter(void 0, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, applyCloseStyles(position)];
+                    case 1:
+                        _a.sent();
+                        if (isOverflow) {
+                            if (typeof document !== "undefined") {
+                                document.body.style.overflow = "";
+                            }
+                        }
+                        if (position === "all") {
+                            setData([]);
+                            setNames([]);
+                            return [2 /*return*/];
+                        }
+                        if (position === -1) {
+                            // remove last
+                            setData(function (prev) {
+                                return prev.filter(function (_, index) { return index !== prev.length - 1; });
+                            });
+                            setNames(function (prev) {
+                                return prev.filter(function (_, index) { return index !== prev.length - 1; });
+                            });
+                            return [2 /*return*/];
+                        }
+                        if (position === 0) {
+                            // remove first
+                            setData(function (prev) { return prev.filter(function (_, index) { return index !== 0; }); });
+                            setNames(function (prev) { return prev.filter(function (_, index) { return index !== 0; }); });
+                            return [2 /*return*/];
+                        }
+                        // remove position index
+                        setData(function (prev) {
+                            return prev.filter(function (_, index) { return index !== prev.length - 1; });
+                        });
+                        setNames(function (prev) {
+                            return prev.filter(function (_, index) { return index !== prev.length - 1; });
+                        });
+                        return [2 /*return*/];
                 }
-            }
-            if (position === "all") {
-                setData([]);
-                setNames([]);
-                return;
-            }
-            if (position === -1) {
-                // remove last
-                setData(function (prev) {
-                    return prev.filter(function (_, index) { return index !== prev.length - 1; });
-                });
-                setNames(function (prev) {
-                    return prev.filter(function (_, index) { return index !== prev.length - 1; });
-                });
-                return;
-            }
-            if (position === 0) {
-                // remove first
-                setData(function (prev) { return prev.filter(function (_, index) { return index !== 0; }); });
-                setNames(function (prev) { return prev.filter(function (_, index) { return index !== 0; }); });
-                return;
-            }
-            // remove position index
-            setData(function (prev) {
-                return prev.filter(function (_, index) { return index !== prev.length - 1; });
             });
-            setNames(function (prev) {
-                return prev.filter(function (_, index) { return index !== prev.length - 1; });
-            });
-        };
-        m.addEventListener(ModalManager_1.constants.CHANGE, handleOpenModal);
-        m.addEventListener(ModalManager_1.constants.CLOSE, handleClose);
+        }); };
+        ModalManager_1.default.addEventListener(ModalManager_1.constants.CHANGE, handleOpenModal);
+        ModalManager_1.default.addEventListener(ModalManager_1.constants.CLOSE, handleClose);
         return function () {
-            m.removeEventListener(ModalManager_1.constants.CHANGE, handleOpenModal);
-            m.removeEventListener(ModalManager_1.constants.CLOSE, handleClose);
+            ModalManager_1.default.removeEventListener(ModalManager_1.constants.CHANGE, handleOpenModal);
+            ModalManager_1.default.removeEventListener(ModalManager_1.constants.CLOSE, handleClose);
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
@@ -117,7 +171,7 @@ var ModalProvider = function (_a) {
         return Component;
     });
     var handleCloseModal = function (index) {
-        m.close(index);
+        ModalManager_1.default.close(index);
     };
     var refReducer = function (index, value) {
         modalRef.current[index] = value;
@@ -125,7 +179,7 @@ var ModalProvider = function (_a) {
     return (react_1.default.createElement(react_1.default.Fragment, null, data.length !== 0 &&
         data.map(function (item, i) {
             var Modal = activeModals[i] || (function () { return react_1.default.createElement(react_1.default.Fragment, null); });
-            return (react_1.default.createElement("div", { key: item.modalId, className: "modal-manager backdrop_modal_manager ".concat(backdropClassName) },
+            return (react_1.default.createElement("div", { "data-index": i, key: item.modalId, className: "modal-manager backdrop_modal_manager ".concat(backdropClassName) },
                 react_1.default.createElement("div", { onClick: function (e) {
                         e.stopPropagation();
                         handleCloseModal(i);

package/src/components/modal-provider.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useEffect, useRef, useState } from "react";
-import modal, { constants, ModalManager } from "../utils/ModalManager";
+import modal, { constants } from "../utils/ModalManager";
 
 export type ModalList = { [key: string]: React.ComponentType };
 
@@ -10,7 +10,6 @@ interface ModalProviderProps {
   isOverflow?: boolean;
   className?: string;
   backdropClassName?: string;
-  modalManager?: ModalManager;
   onModalStateChange?: (
     modalState: boolean,
     data: TData[],
@@ -25,13 +24,24 @@ const ModalProvider = ({
   isOverflow,
   className,
   backdropClassName,
-  modalManager,
   onModalStateChange,
 }: ModalProviderProps) => {
   const [data, setData] = useState<TData[]>([]);
   const [names, setNames] = useState<string[]>([]);
   const modalRef = useRef<any[]>([]);
-  const m = modalManager ?? modal;
+
+  const applyCloseStyles = (index: number) => {
+    return new Promise((resolve) => {
+      const modal = document.querySelector(
+        `[data-index="${index}"]`
+      ) as HTMLElement;
+      if (!modal) return;
+      modal.classList.add("closing");
+      setTimeout(() => {
+        resolve(true);
+      }, 150);
+    });
+  };
 
   useEffect(() => {
     if (!onModalStateChange) return;
@@ -51,7 +61,8 @@ const ModalProvider = ({
       }
     };
 
-    const handleClose = (position: number | string) => {
+    const handleClose = async (position: number | string) => {
+      await applyCloseStyles(position as number);
       if (isOverflow) {
         if (typeof document !== "undefined") {
           document.body.style.overflow = "";
@@ -91,11 +102,11 @@ const ModalProvider = ({
       );
     };
 
-    m.addEventListener(constants.CHANGE, handleOpenModal);
-    m.addEventListener(constants.CLOSE, handleClose);
+    modal.addEventListener(constants.CHANGE, handleOpenModal);
+    modal.addEventListener(constants.CLOSE, handleClose);
     return () => {
-      m.removeEventListener(constants.CHANGE, handleOpenModal);
-      m.removeEventListener(constants.CLOSE, handleClose);
+      modal.removeEventListener(constants.CHANGE, handleOpenModal);
+      modal.removeEventListener(constants.CLOSE, handleClose);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -106,7 +117,7 @@ const ModalProvider = ({
   });
 
   const handleCloseModal = (index: number) => {
-    m.close(index);
+    modal.close(index);
   };
 
   const refReducer = (index: number, value: any) => {
@@ -121,6 +132,7 @@ const ModalProvider = ({
 
           return (
             <div
+              data-index={i}
               key={item.modalId}
               className={`modal-manager backdrop_modal_manager ${backdropClassName}`}
             >

package/src/styles.css

@@ -16,6 +16,24 @@
   }
 }
 
+@keyframes bg_opacity_out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes bg_scale_out {
+  from {
+    transform: scale(1);
+  }
+  to {
+    transform: scale(0.8);
+  }
+}
+
 .modal-manager.backdrop_modal_manager {
   display: flex;
   justify-content: center;
@@ -47,3 +65,11 @@
   animation: bg_opacity_scale 150ms ease-in-out forwards;
   width: 100%;
 }
+
+.modal-manager.closing .backdrop {
+  animation: bg_opacity_out 150ms ease-in-out forwards;
+}
+
+.modal-manager.closing .modal_paper {
+  animation: bg_scale_out 150ms ease-in-out forwards;
+}