@4i/modal-manager 1.0.10 → 1.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@4i/modal-manager",
-  "version": "1.0.10",
+  "version": "1.0.13",
   "description": "",
   "main": "src/index.ts",
   "scripts": {
@@ -14,7 +14,9 @@
   },
   "keywords": [
     "modal",
-    "manager"
+    "manager",
+    "react",
+    "typescript"
   ],
   "author": "Toni",
   "license": "ISC",
@@ -22,10 +24,7 @@
     "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"
-  },
+  "dependencies": {},
   "devDependencies": {
     "@babel/cli": "^7.23.4",
     "@babel/core": "^7.23.5",

package/readme.md

@@ -15,6 +15,35 @@ npm install @4i/modal-manager
 
 ## Usage
 
+#### Instance methods:
+
+create table with methods
+
+| Method                               | Description                                           |
+| ------------------------------------ | ----------------------------------------------------- |
+| call(action, props)                  | Call a modal by its action name and pass props to it. |
+|                                      |
+| close('all')                         | Close all modals.                                     |
+|                                      |
+| close(-1)                            | Close last modals.                                    |
+|                                      |
+| close(0)                             | Close first modals.                                   |
+|                                      |
+| close()                              | Close last modals. (default)                          |
+|                                      |
+| addEventListener(event, callback)    | Add an event listener to the modal manager.           |
+|                                      |
+| removeEventListener(event, callback) | Remove an event listener from the modal manager.      |
+|                                      |
+
+#### ModalProvider props
+
+| Prop       | Type    | Description                                                                |
+| ---------- | ------- | -------------------------------------------------------------------------- |
+| modalList  | Object  | An object containing modal actions as keys and modal components as values. |
+| className  | string  |                                                                            |
+| isOverflow | boolean | Set "overflow: hidden" on body                                             |
+
 #### Define Modal Actions:
 
 In your project, define modal actions as keys in the modalAction object. Each key represents a specific modal or UI element.
@@ -53,17 +82,112 @@ modal.call(modalAction.MODAL_PROMPT, {
 
 If desired, you can inherit from the Manager class to create your own classes for handling custom notifications, popups, and more. And then pass your custom class to the CustomProvider component using ModalProvider as an example
 
-````javascript
-
 ```javascript
 import { Manager } from "@4i/modal-manager";
 
-class CustomManager extends Manager {
-  // Custom methods and logic here
+import { Manager } from "@4i/modal-manager";
+import { v4 as uuidv4 } from "uuid";
+
+export const constants = {
+  OPEN: "open-bottom-modal",
+  CLOSE: "close-bottom-modal",
+};
+
+class CustomModalManager extends Manager {
+  name: string;
+  data: any;
+
+  constructor() {
+    super();
+    this.name = "";
+    this.data = {};
+  }
+
+  create(name: string, data) {
+    this.name = name;
+    this.data = data;
+    this.emitter.emit(constants.OPEN, this.name, this.data);
+  }
+
+  call(name: string, data: any = {}) {
+    this.create(name, { modalId: uuidv4(), data });
+  }
+
+  close(position?: number | string) {
+    this.emitter.emit(constants.CLOSE, position);
+  }
 }
 
-const customManager = new CustomManager();
-````
+const customModalManager = new CustomModalManager();
+
+export default customModalManager;
+```
+
+#### Custom Provider
+
+```javascript
+import { memo, useEffect, useRef, useState } from "react";
+import bottomModal, { constants } from "../../service/BottomModal";
+import widgets from "../../config/modal/modal-list";
+
+const initialData = {
+  data: null,
+};
+
+const BottomModalProvider = () => {
+  const [data, setData] = useState(initialData);
+  const [name, setName] = useState < string > null;
+  const modalRef = useRef < HTMLDivElement > null;
+
+  useEffect(() => {
+    function handleOpenModal(name, data) {
+      console.log("LOG", name);
+      setName(name);
+      setData(data);
+    }
+
+    function handleClose() {
+      console.log("LOG", "close");
+      setName(null);
+      setData(initialData);
+    }
+
+    bottomModal.addEventListener(constants.OPEN, handleOpenModal);
+    bottomModal.addEventListener(constants.CLOSE, handleClose);
+
+    return () => {
+      bottomModal.removeEventListener(constants.OPEN, handleOpenModal);
+      bottomModal.removeEventListener(constants.CLOSE, handleClose);
+    };
+  }, []);
+
+  const handleCloseModal = (e: any) => {
+    if (modalRef.current && !modalRef.current.contains(e.target)) {
+      console.log("LOG", "close");
+      bottomModal.close();
+    }
+  };
+
+  const Widget = widgets[name];
+
+  return (
+    <>
+      {name && Widget && (
+        <div
+          onClick={handleCloseModal}
+          className="animate-backdrop fixed z-[1000] h-full w-full  overflow-hidden flex items-end"
+        >
+          <div className="animate-fromBottom w-full" ref={modalRef}>
+            <Widget {...data.data} />
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default memo(BottomModalProvider);
+```
 
 ### index.js
 
@@ -133,14 +257,19 @@ export default App;
 
 ```javascript
 import React from "react";
+import { modal } from "@4i/modal-manager";
 
 // Get props
 const ModalPrompts = ({ title, content }) => {
+  const handleClose = () => {
+    modal.close();
+  };
+
   return (
     <div className="w-[400px] h-[300px] bg-slate-50 p-[24px] flex flex-col justify-center items-center">
       <h1>{title}</h1>
       <p>{content}</p>
-      <button>Close</button>
+      <button onClick={handleClose}>Close</button>
     </div>
   );
 };

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

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

package/src/components/modal-provider.js

@@ -50,15 +50,19 @@ 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, isOverflow = _a.isOverflow, className = _a.className;
     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); });
             setNames(function (prev) { return __spreadArray(__spreadArray([], prev, true), [name], false); });
+            if (isOverflow) {
+                if (typeof document === "undefined")
+                    return;
+                document.body.style.overflow = "hidden";
+            }
         };
         var handleClose = function (position) {
             if (position === "all") {
@@ -102,7 +106,6 @@ var ModalProvider = function (_a) {
         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);
@@ -111,17 +114,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", { className: "".concat(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,25 +2,34 @@ 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;
+  modalList: any;
+  isOverflow?: boolean;
+  className?: string;
 }
 
 type TData = { [key: string]: any };
 
-const ModalProvider = ({ CustomComponent, modalList }: ModalProviderProps) => {
+const ModalProvider = ({
+  modalList,
+  isOverflow,
+  className,
+}: 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]);
       setNames((prev: string[]) => [...prev, name]);
+
+      if (isOverflow) {
+        if (typeof document === "undefined") return;
+        document.body.style.overflow = "hidden";
+      }
     };
 
     const handleClose = (position: number | string) => {
@@ -71,7 +80,6 @@ const ModalProvider = ({ CustomComponent, modalList }: ModalProviderProps) => {
   });
 
   const handleCloseModal = (index: number, e: any) => {
-    console.log(index);
     if (
       modalRef.current[index] &&
       !modalRef.current[index].contains(e.target)
@@ -85,24 +93,24 @@ 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);
           }}
         >
-          <div className="backdrop_modal_manager">
+          <div className={`${className} backdrop_modal_manager`}>
             <div
               ref={(ref) => {
                 refReducer(i, ref);
               }}
             >
-              <Modal key={i} {...data[i]} />
+              <Modal {...item.data} />
             </div>
           </div>
         </div>

package/src/utils/ModalManager.d.ts

@@ -1,10 +1,11 @@
 import Manager from "./Manager";
 declare class ModalManager extends Manager {
     constructor();
-    create(name: string, data: {
-        [key: string]: any;
+    create<T>(name: string, payload: {
+        modalId: number;
+        data?: T;
     }): void;
-    call(name: string, data?: any): void;
+    call<T>(name: string, data?: T): void;
     close<T>(position?: T): void;
 }
 declare const modal: ModalManager;

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",
@@ -27,16 +29,19 @@ var constants = {
 var ModalManager = /** @class */ (function (_super) {
     __extends(ModalManager, _super);
     function ModalManager() {
-        return _super.call(this) || this;
+        var _this = _super.call(this) || this;
+        _this.create = _this.create.bind(_this);
+        _this.call = _this.call.bind(_this);
+        _this.close = _this.close.bind(_this);
+        return _this;
     }
-    ModalManager.prototype.create = function (name, data) {
+    ModalManager.prototype.create = function (name, payload) {
         this.name = name;
-        this.data = data;
+        this.data = payload;
         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 });
+        this.create(name, { modalId: uniqueID(), data: data });
     };
     ModalManager.prototype.close = function (position) {
         this.emitter.emit(constants.CLOSE, position);

package/src/utils/ModalManager.ts

@@ -1,5 +1,8 @@
 import Manager from "./Manager";
-import { v4 as uuidv4 } from "uuid";
+
+function uniqueID() {
+  return Math.floor(Math.random() * Date.now());
+}
 
 const constants = {
   CHANGE: "change",
@@ -9,16 +12,19 @@ const constants = {
 class ModalManager extends Manager {
   constructor() {
     super();
+    this.create = this.create.bind(this);
+    this.call = this.call.bind(this);
+    this.close = this.close.bind(this);
   }
 
-  create(name: string, data: { [key: string]: any }) {
+  create<T>(name: string, payload: { modalId: number; data?: T }) {
     this.name = name;
-    this.data = data;
+    this.data = payload;
     this.emitter.emit(constants.CHANGE, this.name, this.data);
   }
 
-  call(name: string, data: any = {}) {
-    this.create(name, { modalId: uuidv4(), data });
+  call<T>(name: string, data?: T) {
+    this.create<T>(name, { modalId: uniqueID(), data });
   }
 
   close<T>(position?: T) {