@4i/modal-manager 1.0.112 → 1.0.114

package/package.json

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

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

@@ -1,10 +1,9 @@
 import React from "react";
-type ModalList = {
+export type ModalList = {
     [key: string]: React.ComponentType;
 };
 interface ModalProviderProps {
-    CustomComponent?: React.ComponentType;
     modalList: ModalList;
 }
-declare const ModalProvider: ({ CustomComponent, modalList }: ModalProviderProps) => false | React.JSX.Element[];
+declare const ModalProvider: ({ modalList }: ModalProviderProps) => false | React.JSX.Element[];
 export default ModalProvider;

package/src/components/modal-provider.js

@@ -50,11 +50,10 @@ var react_1 = __importStar(require("react"));
 var ModalManager_1 = __importDefault(require("../utils/ModalManager"));
 var ModalManager_2 = __importDefault(require("../utils/ModalManager"));
 var ModalProvider = function (_a) {
-    var CustomComponent = _a.CustomComponent, modalList = _a.modalList;
+    var modalList = _a.modalList;
     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)([]);
-    console.log("OPEN MODAL", names, data, modalList);
     (0, react_1.useEffect)(function () {
         var handleOpenModal = function (name, data) {
             setData(function (prev) { return __spreadArray(__spreadArray([], prev, true), [data], false); });
@@ -111,17 +110,17 @@ var ModalProvider = function (_a) {
     var refReducer = function (index, value) {
         modalRef.current[index] = value;
     };
-    return (activeModals.length !== 0 &&
-        activeModals.map(function (Component, i) {
-            var Modal = Component;
-            return (react_1.default.createElement("div", { key: i, onClick: function (e) {
+    return (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, onClick: function (e) {
                     handleCloseModal(i, e);
                 } },
                 react_1.default.createElement("div", { className: "backdrop_modal_manager" },
                     react_1.default.createElement("div", { ref: function (ref) {
                             refReducer(i, ref);
                         } },
-                        react_1.default.createElement(Modal, __assign({ key: i }, data[i]))))));
+                        react_1.default.createElement(Modal, __assign({}, item.data))))));
         }));
 };
 exports.default = ModalProvider;

package/src/components/modal-provider.tsx

@@ -2,21 +2,19 @@ import React, { useEffect, useRef, useState } from "react";
 import manager from "../utils/ModalManager";
 import modal from "../utils/ModalManager";
 
-type ModalList = { [key: string]: React.ComponentType };
+export type ModalList = { [key: string]: React.ComponentType };
 
 interface ModalProviderProps {
-  CustomComponent?: React.ComponentType;
   modalList: ModalList;
 }
 
 type TData = { [key: string]: any };
 
-const ModalProvider = ({ CustomComponent, modalList }: ModalProviderProps) => {
+const ModalProvider = ({ modalList }: ModalProviderProps) => {
   const [data, setData] = useState<TData[]>([]);
   const [names, setNames] = useState<string[]>([]);
   const modalRef = useRef<any[]>([]);
 
-  console.log("OPEN MODAL", names, data, modalList);
   useEffect(() => {
     const handleOpenModal = (name: string, data: TData) => {
       setData((prev: TData[]) => [...prev, data]);
@@ -85,13 +83,13 @@ const ModalProvider = ({ CustomComponent, modalList }: ModalProviderProps) => {
   };
 
   return (
-    activeModals.length !== 0 &&
-    activeModals.map((Component, i) => {
-      const Modal = Component;
+    data.length !== 0 &&
+    data.map((item, i) => {
+      const Modal = activeModals[i] || (() => <></>);
 
       return (
         <div
-          key={i}
+          key={item.modalId}
           onClick={(e) => {
             handleCloseModal(i, e);
           }}
@@ -102,7 +100,7 @@ const ModalProvider = ({ CustomComponent, modalList }: ModalProviderProps) => {
                 refReducer(i, ref);
               }}
             >
-              <Modal key={i} {...data[i]} />
+              <Modal {...item.data} />
             </div>
           </div>
         </div>

package/src/utils/ModalManager.js

@@ -19,7 +19,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var Manager_1 = __importDefault(require("./Manager"));
-var uuid_1 = require("uuid");
+function uniqueID() {
+    return Math.floor(Math.random() * Date.now());
+}
 var constants = {
     CHANGE: "change",
     CLOSE: "close",
@@ -36,7 +38,7 @@ var ModalManager = /** @class */ (function (_super) {
     };
     ModalManager.prototype.call = function (name, data) {
         if (data === void 0) { data = {}; }
-        this.create(name, { modalId: (0, uuid_1.v4)(), data: data });
+        this.create(name, { modalId: uniqueID(), data: data });
     };
     ModalManager.prototype.close = function (position) {
         this.emitter.emit(constants.CLOSE, position);