@4i/modal-manager 1.0.0

package/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
+}

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@4i/modal-manager",
+  "version": "1.0.0",
+  "description": "",
+  "main": "src/index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "babel src -d lib"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tonichiga/modal-manager.git"
+  },
+  "keywords": [
+    "modal",
+    "manager"
+  ],
+  "author": "Toni",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/tonichiga/modal-manager/issues"
+  },
+  "homepage": "https://github.com/tonichiga/modal-manager#readme",
+  "dependencies": {
+    "react": "^18.2.0",
+    "uuid": "^9.0.1"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.23.4",
+    "@babel/core": "^7.23.5",
+    "@babel/preset-env": "^7.23.5",
+    "@babel/preset-react": "^7.23.3",
+    "@types/node": "^20.10.2"
+  }
+}

package/src/components/backdrop.css

@@ -0,0 +1,44 @@
+@keyframes bg_opacity_scale {
+  from {
+    transform: scale(0.8);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+
+@keyframes bg_opacity {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.backdrop_modal_manager {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  position: fixed;
+  z-index: 1000;
+  opacity: 0;
+  animation: bg_opacity 150ms ease-in-out forwards;
+}
+
+.backdrop_modal_manager > div {
+  animation: bg_opacity_scale 150ms ease-in-out forwards;
+}
+
+.main_container_modal_manager {
+  opacity: 0;
+  animation: bg_opacity 250ms forwards;
+}

package/src/components/modal-provider.tsx

@@ -0,0 +1,108 @@
+import React, { useEffect, useRef, useState } from "react";
+import manager from "../utils/service/ModalManager";
+import "./backdrop.css";
+import modal from "../utils/service/ModalManager";
+import modalList from "../utils/config/modal-list";
+
+interface ModalProviderProps {
+  CustomComponent?: React.ComponentType;
+}
+
+const ModalProvider = ({ CustomComponent }: ModalProviderProps) => {
+  const [data, setData] = useState([]);
+  const [names, setNames] = useState([]);
+  const modalRef = useRef([]);
+
+  useEffect(() => {
+    const handleOpenModal = (name, data) => {
+      setData((prev) => [...prev, data]);
+      setNames((prev) => [...prev, name]);
+    };
+
+    const handleClose = (position) => {
+      if (position === "all") {
+        setData([]);
+        setNames([]);
+        return;
+      }
+
+      if (position === -1) {
+        // remove last
+        setData((prev) => prev.filter((_, index) => index !== prev.length - 1));
+        setNames((prev) =>
+          prev.filter((_, index) => index !== prev.length - 1)
+        );
+        return;
+      }
+
+      if (position === 0) {
+        // remove first
+        setData((prev) => prev.filter((_, index) => index !== 0));
+        setNames((prev) => prev.filter((_, index) => index !== 0));
+        return;
+      }
+
+      // remove position index
+      setData((prev) => prev.filter((_, index) => index !== prev.length - 1));
+      setNames((prev) => prev.filter((_, index) => index !== prev.length - 1));
+    };
+
+    manager.addEventListener("change", handleOpenModal);
+    manager.addEventListener("close", handleClose);
+    return () => {
+      manager.removeEventListener("change", handleOpenModal);
+      manager.removeEventListener("close", handleClose);
+    };
+  }, []);
+
+  const activeModals = names.map((name) => {
+    const Component = modalList[name] || (() => <></>);
+    return Component;
+  });
+
+  const handleCloseModal = (index, e) => {
+    if (
+      modalRef.current[index] &&
+      !modalRef.current[index].contains(e.target)
+    ) {
+      modal.close(index);
+    }
+  };
+
+  const refReducer = (index, value) => {
+    modalRef.current[index] = value;
+  };
+
+  return (
+    activeModals.length !== 0 &&
+    activeModals.map((Component, i) => {
+      const Modal = Component;
+
+      return (
+        <>
+          {CustomComponent ? (
+            <CustomComponent key={i} {...data[i]} />
+          ) : (
+            <div
+              key={i}
+              className="backdrop_modal_manager"
+              onClick={(e) => {
+                handleCloseModal(i, e);
+              }}
+            >
+              <div
+                ref={(ref) => {
+                  refReducer(i, ref);
+                }}
+              >
+                <Modal key={i} {...data[i]} />
+              </div>
+            </div>
+          )}
+        </>
+      );
+    })
+  );
+};
+
+export default ModalProvider;

package/src/index.ts

@@ -0,0 +1,7 @@
+import Manager from "./utils/service/Manager";
+import modal from "./utils/service/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 };

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

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

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

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

package/src/utils/service/Manager.ts

@@ -0,0 +1,30 @@
+import { EventEmitter } from "events";
+
+const Constants = {
+  CHANGE: "change",
+  CLOSE: "close",
+};
+
+type TData = {
+  [key: string]: any;
+};
+
+class Manager {
+  emitter: EventEmitter;
+  name: string;
+  data: { [key: string]: any };
+
+  constructor() {
+    this.emitter = new EventEmitter();
+  }
+
+  addEventListener(event: string, listener: (...args: any[]) => void) {
+    this.emitter.addListener(event, listener);
+  }
+
+  removeEventListener(event: string, listener: (...args: any[]) => void) {
+    this.emitter.removeListener(event, listener);
+  }
+}
+
+export default Manager;

package/src/utils/service/ModalManager.ts

@@ -0,0 +1,30 @@
+import Manager from "./Manager";
+import { v4 as uuidv4 } from "uuid";
+
+const constants = {
+  CHANGE: "change",
+  CLOSE: "close",
+};
+
+class ModalManager extends Manager {
+  constructor() {
+    super();
+  }
+
+  create(name: string, data) {
+    this.name = name;
+    this.data = data;
+    this.emitter.emit(constants.CHANGE);
+  }
+
+  call(name: string, data: any = {}) {
+    this.create(name, { modalId: uuidv4(), data });
+  }
+
+  close(position?: number) {
+    this.emitter.emit(constants.CLOSE, position);
+  }
+}
+
+const modal = new ModalManager();
+export default modal;