@4i/modal-manager 1.0.8 → 1.0.9

package/package.json

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

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

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

package/src/components/modal-provider.js

@@ -47,14 +47,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
-var ModalManager_1 = __importDefault(require("../utils/service/ModalManager"));
-var ModalManager_2 = __importDefault(require("../utils/service/ModalManager"));
-var modal_list_1 = __importDefault(require("../utils/config/modal-list"));
+var ModalManager_1 = __importDefault(require("../utils/ModalManager"));
+var ModalManager_2 = __importDefault(require("../utils/ModalManager"));
 var ModalProvider = function (_a) {
-    var CustomComponent = _a.CustomComponent;
+    var CustomComponent = _a.CustomComponent, 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); });
@@ -98,10 +98,11 @@ var ModalProvider = function (_a) {
         };
     }, []);
     var activeModals = names.map(function (name) {
-        var Component = modal_list_1.default[name] || (function () { return react_1.default.createElement(react_1.default.Fragment, null); });
+        var Component = modalList[name] || (function () { return react_1.default.createElement(react_1.default.Fragment, null); });
         return Component;
     });
     var handleCloseModal = function (index, e) {
+        console.log(index);
         if (modalRef.current[index] &&
             !modalRef.current[index].contains(e.target)) {
             ModalManager_2.default.close(index);
@@ -113,13 +114,14 @@ var ModalProvider = function (_a) {
     return (activeModals.length !== 0 &&
         activeModals.map(function (Component, i) {
             var Modal = Component;
-            return (react_1.default.createElement(react_1.default.Fragment, null, CustomComponent ? (react_1.default.createElement(CustomComponent, __assign({ key: i }, data[i]))) : (react_1.default.createElement("div", { key: i, className: "backdrop_modal_manager", onClick: function (e) {
+            return (react_1.default.createElement("div", { key: i, onClick: function (e) {
                     handleCloseModal(i, e);
                 } },
-                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("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]))))));
         }));
 };
 exports.default = ModalProvider;

package/src/components/modal-provider.tsx

@@ -1,19 +1,22 @@
 import React, { useEffect, useRef, useState } from "react";
-import manager from "../utils/service/ModalManager";
-import modal from "../utils/service/ModalManager";
-import modalList from "../utils/config/modal-list";
+import manager from "../utils/ModalManager";
+import modal from "../utils/ModalManager";
+
+type ModalList = { [key: string]: React.ComponentType };
 
 interface ModalProviderProps {
   CustomComponent?: React.ComponentType;
+  modalList: ModalList;
 }
 
 type TData = { [key: string]: any };
 
-const ModalProvider = ({ CustomComponent }: ModalProviderProps) => {
+const ModalProvider = ({ CustomComponent, 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]);
@@ -68,6 +71,7 @@ const ModalProvider = ({ CustomComponent }: ModalProviderProps) => {
   });
 
   const handleCloseModal = (index: number, e: any) => {
+    console.log(index);
     if (
       modalRef.current[index] &&
       !modalRef.current[index].contains(e.target)
@@ -86,27 +90,22 @@ const ModalProvider = ({ CustomComponent }: ModalProviderProps) => {
       const Modal = Component;
 
       return (
-        <>
-          {CustomComponent ? (
-            <CustomComponent key={i} {...data[i]} />
-          ) : (
+        <div
+          key={i}
+          onClick={(e) => {
+            handleCloseModal(i, e);
+          }}
+        >
+          <div className="backdrop_modal_manager">
             <div
-              key={i}
-              className="backdrop_modal_manager"
-              onClick={(e) => {
-                handleCloseModal(i, e);
+              ref={(ref) => {
+                refReducer(i, ref);
               }}
             >
-              <div
-                ref={(ref) => {
-                  refReducer(i, ref);
-                }}
-              >
-                <Modal key={i} {...data[i]} />
-              </div>
+              <Modal key={i} {...data[i]} />
             </div>
-          )}
-        </>
+          </div>
+        </div>
       );
     })
   );

package/src/index.d.ts

@@ -1,6 +1,4 @@
-import Manager from "./utils/service/Manager";
-import modal from "./utils/service/ModalManager";
+import Manager from "./utils/Manager";
+import modal from "./utils/ModalManager";
 import ModalProvider from "./components/modal-provider";
-import { setModalList } from "./utils/config/modal-list";
-import { setModalActions } from "./utils/config/modal-actions";
-export { Manager, modal, ModalProvider, setModalList, setModalActions };
+export { Manager, modal, ModalProvider };

package/src/index.js

@@ -3,14 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setModalActions = exports.setModalList = exports.ModalProvider = exports.modal = exports.Manager = void 0;
-var Manager_1 = __importDefault(require("./utils/service/Manager"));
+exports.ModalProvider = exports.modal = exports.Manager = void 0;
+var Manager_1 = __importDefault(require("./utils/Manager"));
 exports.Manager = Manager_1.default;
-var ModalManager_1 = __importDefault(require("./utils/service/ModalManager"));
+var ModalManager_1 = __importDefault(require("./utils/ModalManager"));
 exports.modal = ModalManager_1.default;
 var modal_provider_1 = __importDefault(require("./components/modal-provider"));
 exports.ModalProvider = modal_provider_1.default;
-var modal_list_1 = require("./utils/config/modal-list");
-Object.defineProperty(exports, "setModalList", { enumerable: true, get: function () { return modal_list_1.setModalList; } });
-var modal_actions_1 = require("./utils/config/modal-actions");
-Object.defineProperty(exports, "setModalActions", { enumerable: true, get: function () { return modal_actions_1.setModalActions; } });

package/src/index.ts

@@ -1,7 +1,5 @@
-import Manager from "./utils/service/Manager";
-import modal from "./utils/service/ModalManager";
+import Manager from "./utils/Manager";
+import modal from "./utils/ModalManager";
 import ModalProvider from "./components/modal-provider";
-import { setModalList } from "./utils/config/modal-list";
-import { setModalActions } from "./utils/config/modal-actions";
 
-export { Manager, modal, ModalProvider, setModalList, setModalActions };
+export { Manager, modal, ModalProvider };

package/src/utils/{service/Manager.d.ts → Manager.d.ts}

@@ -9,8 +9,5 @@ declare class Manager {
     constructor();
     addEventListener(event: string, listener: (...args: any[]) => void): void;
     removeEventListener(event: string, listener: (...args: any[]) => void): void;
-    emitChange(): void;
-    close(...closeList: number[]): void;
-    emitClose<T>(closeList?: T): void;
 }
 export default Manager;

package/src/utils/{service/Manager.js → Manager.js}

@@ -1,10 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var events_1 = require("events");
-var constants = {
-    CHANGE: "change",
-    CLOSE: "close",
-};
 var Manager = /** @class */ (function () {
     function Manager() {
         this.name = "";
@@ -17,21 +13,6 @@ var Manager = /** @class */ (function () {
     Manager.prototype.removeEventListener = function (event, listener) {
         this.emitter.removeListener(event, listener);
     };
-    Manager.prototype.emitChange = function () {
-        this.emitter.emit(constants.CHANGE, this.name, this.data);
-    };
-    Manager.prototype.close = function () {
-        var closeList = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            closeList[_i] = arguments[_i];
-        }
-        this.name = null;
-        this.data = {};
-        this.emitClose(closeList);
-    };
-    Manager.prototype.emitClose = function (closeList) {
-        this.emitter.emit(constants.CLOSE, closeList);
-    };
     return Manager;
 }());
 exports.default = Manager;

package/src/utils/{service/Manager.ts → Manager.ts}

@@ -1,10 +1,5 @@
 import { EventEmitter } from "events";
 
-const constants = {
-  CHANGE: "change",
-  CLOSE: "close",
-};
-
 type TData = {
   [key: string]: any;
 };
@@ -27,17 +22,6 @@ class Manager {
   removeEventListener(event: string, listener: (...args: any[]) => void) {
     this.emitter.removeListener(event, listener);
   }
-  emitChange() {
-    this.emitter.emit(constants.CHANGE, this.name, this.data);
-  }
-  close(...closeList: number[]) {
-    this.name = null;
-    this.data = {};
-    this.emitClose(closeList);
-  }
-  emitClose<T>(closeList?: T) {
-    this.emitter.emit(constants.CLOSE, closeList);
-  }
 }
 
 export default Manager;

package/src/utils/{service/ModalManager.d.ts → ModalManager.d.ts}

@@ -5,7 +5,7 @@ declare class ModalManager extends Manager {
         [key: string]: any;
     }): void;
     call(name: string, data?: any): void;
-    emitClose<T>(position?: T): void;
+    close<T>(position?: T): void;
 }
 declare const modal: ModalManager;
 export default modal;

package/src/utils/{service/ModalManager.js → ModalManager.js}

@@ -32,13 +32,13 @@ var ModalManager = /** @class */ (function (_super) {
     ModalManager.prototype.create = function (name, data) {
         this.name = name;
         this.data = data;
-        this.emitChange();
+        this.emitter.emit(constants.CHANGE, this.name, this.data);
     };
     ModalManager.prototype.call = function (name, data) {
         if (data === void 0) { data = {}; }
         this.create(name, { modalId: (0, uuid_1.v4)(), data: data });
     };
-    ModalManager.prototype.emitClose = function (position) {
+    ModalManager.prototype.close = function (position) {
         this.emitter.emit(constants.CLOSE, position);
     };
     return ModalManager;

package/src/utils/{service/ModalManager.ts → ModalManager.ts}

@@ -14,14 +14,14 @@ class ModalManager extends Manager {
   create(name: string, data: { [key: string]: any }) {
     this.name = name;
     this.data = data;
-    this.emitChange();
+    this.emitter.emit(constants.CHANGE, this.name, this.data);
   }
 
   call(name: string, data: any = {}) {
     this.create(name, { modalId: uuidv4(), data });
   }
 
-  emitClose<T>(position?: T) {
+  close<T>(position?: T) {
     this.emitter.emit(constants.CLOSE, position);
   }
 }

package/src/utils/config/modal-actions.d.ts

@@ -1,6 +0,0 @@
-declare let modalActions: {};
-interface ModalActions {
-    [key: string]: string;
-}
-export declare const setModalActions: (actionList: ModalActions) => void;
-export default modalActions;

package/src/utils/config/modal-actions.js

@@ -1,20 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.setModalActions = void 0;
-var modalActions = {};
-var setModalActions = function (actionList) {
-    modalActions = __assign(__assign({}, modalActions), actionList);
-};
-exports.setModalActions = setModalActions;
-exports.default = modalActions;

package/src/utils/config/modal-actions.ts

@@ -1,11 +0,0 @@
-let modalActions = {};
-
-interface ModalActions {
-  [key: string]: string;
-}
-
-export const setModalActions = (actionList: ModalActions) => {
-  modalActions = { ...modalActions, ...actionList };
-};
-
-export default modalActions;

package/src/utils/config/modal-list.d.ts

@@ -1,6 +0,0 @@
-export interface ModalList {
-    [key: string]: (...args: any[]) => any;
-}
-declare let modalList: ModalList;
-export declare const setModalList: (_modalList: ModalList) => void;
-export default modalList;

package/src/utils/config/modal-list.js

@@ -1,20 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.setModalList = void 0;
-var modalList = {};
-var setModalList = function (_modalList) {
-    modalList = __assign(__assign({}, modalList), _modalList);
-};
-exports.setModalList = setModalList;
-exports.default = modalList;

package/src/utils/config/modal-list.ts

@@ -1,11 +0,0 @@
-export interface ModalList {
-  [key: string]: (...args: any[]) => any;
-}
-
-let modalList: ModalList = {};
-
-export const setModalList = (_modalList: ModalList) => {
-  modalList = { ...modalList, ..._modalList };
-};
-
-export default modalList;