@4i/modal-manager 1.0.115 → 1.0.117

package/package.json

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

package/readme.md

@@ -21,10 +21,30 @@ npm install @4i/modal-manager
 
 Call a modal by its action name and pass props to it.
 
-##### .close()
+##### .close('all')
 
 Close all modals.
 
+##### .close(-1)
+
+Close last modals.
+
+##### .close(0)
+
+Close first modals.
+
+##### .close() (default)
+
+Close last modals.
+
+##### .addEventListener(event, callback)
+
+Add an event listener to the modal manager.
+
+##### .removeEventListener(event, callback)
+
+Remove an event listener from the modal manager.
+
 #### Define Modal Actions:
 
 In your project, define modal actions as keys in the modalAction object. Each key represents a specific modal or UI element.
@@ -66,11 +86,108 @@ If desired, you can inherit from the Manager class to create your own classes fo
 ```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