@4i/modal-manager 1.1.9 → 1.1.20

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

@@ -12,5 +12,5 @@ interface ModalProviderProps {
 type TData = {
     [key: string]: any;
 };
-declare const ModalProvider: ({ modalList, isOverflow, className, backdropClassName, onModalStateChange, }: ModalProviderProps) => React.JSX.Element;
+declare const ModalProvider: ({ modalList, isOverflow, className, backdropClassName, onModalStateChange, }: ModalProviderProps) => null;
 export default ModalProvider;

package/src/components/modal-provider.js

@@ -82,6 +82,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var ModalManager_1 = __importStar(require("../utils/ModalManager"));
+var react_dom_1 = require("react-dom");
 var ModalProvider = function (_a) {
     var modalList = _a.modalList, isOverflow = _a.isOverflow, className = _a.className, backdropClassName = _a.backdropClassName, onModalStateChange = _a.onModalStateChange;
     var _b = (0, react_1.useState)([]), data = _b[0], setData = _b[1];
@@ -118,7 +119,9 @@ var ModalProvider = function (_a) {
         var handleClose = function (position) { return __awaiter(void 0, void 0, void 0, function () {
             return __generator(this, function (_a) {
                 switch (_a.label) {
-                    case 0: return [4 /*yield*/, applyCloseStyles(position)];
+                    case 0:
+                        console.log("position", position);
+                        return [4 /*yield*/, applyCloseStyles(position)];
                     case 1:
                         _a.sent();
                         if (isOverflow) {
@@ -176,7 +179,8 @@ var ModalProvider = function (_a) {
     var refReducer = function (index, value) {
         modalRef.current[index] = value;
     };
-    return (react_1.default.createElement(react_1.default.Fragment, null, data.length !== 0 &&
+    var body = document.body;
+    (0, react_dom_1.createPortal)(react_1.default.createElement(react_1.default.Fragment, null, 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", { "data-index": i, key: item.modalId, className: "modal-manager backdrop_modal_manager ".concat(backdropClassName) },
@@ -189,6 +193,7 @@ var ModalProvider = function (_a) {
                             refReducer(i, ref);
                         } },
                         react_1.default.createElement(Modal, __assign({}, item.data))))));
-        })));
+        })), body);
+    return null;
 };
 exports.default = ModalProvider;

package/src/components/modal-provider.tsx

@@ -1,163 +1,169 @@
-"use client";
-
-import React, { useEffect, useRef, useState } from "react";
-import modal, { constants } from "../utils/ModalManager";
-
-export type ModalList = { [key: string]: React.ComponentType };
-
-interface ModalProviderProps {
-  modalList: any;
-  isOverflow?: boolean;
-  className?: string;
-  backdropClassName?: string;
-  onModalStateChange?: (
-    modalState: boolean,
-    data: TData[],
-    names: string[]
-  ) => void;
-}
-
-type TData = { [key: string]: any };
-
-const ModalProvider = ({
-  modalList,
-  isOverflow,
-  className,
-  backdropClassName,
-  onModalStateChange,
-}: ModalProviderProps) => {
-  const [data, setData] = useState<TData[]>([]);
-  const [names, setNames] = useState<string[]>([]);
-  const modalRef = useRef<any[]>([]);
-
-  const applyCloseStyles = (index: number) => {
-    return new Promise((resolve) => {
-      const modal = document.querySelector(
-        `[data-index="${index}"]`
-      ) as HTMLElement;
-      if (!modal) return;
-      modal.classList.add("closing");
-      setTimeout(() => {
-        resolve(true);
-      }, 150);
-    });
-  };
-
-  useEffect(() => {
-    if (!onModalStateChange) return;
-    const modalState = data.length !== 0;
-    onModalStateChange(modalState, data, names);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [data, names]);
-
-  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 = async (position: number | string) => {
-      await applyCloseStyles(position as number);
-      if (isOverflow) {
-        if (typeof document !== "undefined") {
-          document.body.style.overflow = "";
-        }
-      }
-
-      if (position === "all") {
-        setData([]);
-        setNames([]);
-        return;
-      }
-
-      if (position === -1) {
-        // remove last
-        setData((prev: TData[]) =>
-          prev.filter((_, index) => index !== prev.length - 1)
-        );
-        setNames((prev: string[]) =>
-          prev.filter((_, index) => index !== prev.length - 1)
-        );
-        return;
-      }
-
-      if (position === 0) {
-        // remove first
-        setData((prev: TData[]) => prev.filter((_, index) => index !== 0));
-        setNames((prev: string[]) => prev.filter((_, index) => index !== 0));
-        return;
-      }
-
-      // remove position index
-      setData((prev: TData[]) =>
-        prev.filter((_, index) => index !== prev.length - 1)
-      );
-      setNames((prev: string[]) =>
-        prev.filter((_, index) => index !== prev.length - 1)
-      );
-    };
-
-    modal.addEventListener(constants.CHANGE, handleOpenModal);
-    modal.addEventListener(constants.CLOSE, handleClose);
-    return () => {
-      modal.removeEventListener(constants.CHANGE, handleOpenModal);
-      modal.removeEventListener(constants.CLOSE, handleClose);
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const activeModals = names.map((name: string) => {
-    const Component = modalList[name] || (() => <></>);
-    return Component;
-  });
-
-  const handleCloseModal = (index: number) => {
-    modal.close(index);
-  };
-
-  const refReducer = (index: number, value: any) => {
-    modalRef.current[index] = value;
-  };
-
-  return (
-    <>
-      {data.length !== 0 &&
-        data.map((item, i) => {
-          const Modal = activeModals[i] || (() => <></>);
-
-          return (
-            <div
-              data-index={i}
-              key={item.modalId}
-              className={`modal-manager backdrop_modal_manager ${backdropClassName}`}
-            >
-              <div
-                onClick={(e) => {
-                  e.stopPropagation();
-                  handleCloseModal(i);
-                }}
-                className="backdrop"
-              />
-              {/* // h-full modal not close */}
-              <div className={`${className} modal_paper`}>
-                <div
-                  ref={(ref) => {
-                    refReducer(i, ref);
-                  }}
-                >
-                  <Modal {...item.data} />
-                </div>
-              </div>
-            </div>
-          );
-        })}
-    </>
-  );
-};
-
-export default ModalProvider;
+"use client";
+
+import React, { useEffect, useRef, useState } from "react";
+import modal, { constants } from "../utils/ModalManager";
+import { createPortal } from "react-dom";
+
+export type ModalList = { [key: string]: React.ComponentType };
+
+interface ModalProviderProps {
+  modalList: any;
+  isOverflow?: boolean;
+  className?: string;
+  backdropClassName?: string;
+  onModalStateChange?: (
+    modalState: boolean,
+    data: TData[],
+    names: string[]
+  ) => void;
+}
+
+type TData = { [key: string]: any };
+
+const ModalProvider = ({
+  modalList,
+  isOverflow,
+  className,
+  backdropClassName,
+  onModalStateChange,
+}: ModalProviderProps) => {
+  const [data, setData] = useState<TData[]>([]);
+  const [names, setNames] = useState<string[]>([]);
+  const modalRef = useRef<any[]>([]);
+
+  const applyCloseStyles = (index: number) => {
+    return new Promise((resolve) => {
+      const modal = document.querySelector(
+        `[data-index="${index}"]`
+      ) as HTMLElement;
+      if (!modal) return;
+      modal.classList.add("closing");
+      setTimeout(() => {
+        resolve(true);
+      }, 150);
+    });
+  };
+
+  useEffect(() => {
+    if (!onModalStateChange) return;
+    const modalState = data.length !== 0;
+    onModalStateChange(modalState, data, names);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data, names]);
+
+  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 = async (position: number | string) => {
+      console.log("position", position);
+      await applyCloseStyles(position as number);
+      if (isOverflow) {
+        if (typeof document !== "undefined") {
+          document.body.style.overflow = "";
+        }
+      }
+
+      if (position === "all") {
+        setData([]);
+        setNames([]);
+        return;
+      }
+
+      if (position === -1) {
+        // remove last
+        setData((prev: TData[]) =>
+          prev.filter((_, index) => index !== prev.length - 1)
+        );
+        setNames((prev: string[]) =>
+          prev.filter((_, index) => index !== prev.length - 1)
+        );
+        return;
+      }
+
+      if (position === 0) {
+        // remove first
+        setData((prev: TData[]) => prev.filter((_, index) => index !== 0));
+        setNames((prev: string[]) => prev.filter((_, index) => index !== 0));
+        return;
+      }
+
+      // remove position index
+      setData((prev: TData[]) =>
+        prev.filter((_, index) => index !== prev.length - 1)
+      );
+      setNames((prev: string[]) =>
+        prev.filter((_, index) => index !== prev.length - 1)
+      );
+    };
+
+    modal.addEventListener(constants.CHANGE, handleOpenModal);
+    modal.addEventListener(constants.CLOSE, handleClose);
+    return () => {
+      modal.removeEventListener(constants.CHANGE, handleOpenModal);
+      modal.removeEventListener(constants.CLOSE, handleClose);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const activeModals = names.map((name: string) => {
+    const Component = modalList[name] || (() => <></>);
+    return Component;
+  });
+
+  const handleCloseModal = (index: number) => {
+    modal.close(index);
+  };
+
+  const refReducer = (index: number, value: any) => {
+    modalRef.current[index] = value;
+  };
+
+  const body = document.body;
+  createPortal(
+    <>
+      {data.length !== 0 &&
+        data.map((item, i) => {
+          const Modal = activeModals[i] || (() => <></>);
+
+          return (
+            <div
+              data-index={i}
+              key={item.modalId}
+              className={`modal-manager backdrop_modal_manager ${backdropClassName}`}
+            >
+              <div
+                onClick={(e) => {
+                  e.stopPropagation();
+                  handleCloseModal(i);
+                }}
+                className="backdrop"
+              />
+              {/* // h-full modal not close */}
+              <div className={`${className} modal_paper`}>
+                <div
+                  ref={(ref) => {
+                    refReducer(i, ref);
+                  }}
+                >
+                  <Modal {...item.data} />
+                </div>
+              </div>
+            </div>
+          );
+        })}
+    </>,
+    body
+  );
+
+  return null;
+};
+
+export default ModalProvider;

package/src/index.ts

@@ -1,5 +1,5 @@
-import Manager from "./utils/Manager";
-import modal from "./utils/ModalManager";
-import ModalProvider from "./components/modal-provider";
-
-export { Manager, modal, ModalProvider };
+import Manager from "./utils/Manager";
+import modal from "./utils/ModalManager";
+import ModalProvider from "./components/modal-provider";
+
+export { Manager, modal, ModalProvider };

package/src/styles.css

@@ -1,75 +1,77 @@
-@keyframes bg_opacity_scale {
-  from {
-    transform: scale(0.8);
-  }
-  to {
-    transform: scale(1);
-  }
-}
-
-@keyframes bg_opacity {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes bg_opacity_out {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
-@keyframes bg_scale_out {
-  from {
-    transform: scale(1);
-  }
-  to {
-    transform: scale(0.8);
-  }
-}
-
-.modal-manager.backdrop_modal_manager {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-  position: fixed;
-  z-index: 1000;
-}
-
-.modal-manager .backdrop {
-  background-color: rgba(0, 0, 0, 0.5);
-  opacity: 0;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  animation: bg_opacity 150ms ease-in-out forwards;
-}
-
-.modal-manager .modal_paper {
-  position: relative;
-  z-index: 1001;
-  animation: bg_opacity_scale 150ms ease-in-out forwards;
-  width: 100%;
-}
-
-.modal-manager.closing .backdrop {
-  animation: bg_opacity_out 150ms ease-in-out forwards;
-}
-
-.modal-manager.closing .modal_paper {
-  animation: bg_scale_out 150ms ease-in-out forwards;
-}
+@keyframes bg_opacity_scale {
+  from {
+    transform: scale(0.8);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+
+@keyframes bg_opacity {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes bg_opacity_out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes bg_scale_out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+}
+
+.modal-manager.backdrop_modal_manager {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  z-index: 20000;
+}
+
+.modal-manager .backdrop {
+  background-color: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  animation: bg_opacity 150ms ease-in-out forwards;
+}
+
+.modal-manager .modal_paper {
+  position: relative;
+  z-index: 1001;
+  animation: bg_opacity_scale 150ms ease-in-out forwards;
+  width: 100%;
+}
+
+.modal-manager.closing .backdrop {
+  animation: bg_opacity_out 150ms ease-in-out forwards;
+}
+
+.modal-manager.closing .modal_paper {
+  animation: bg_scale_out 150ms ease-in-out forwards;
+}

package/src/utils/Manager.ts

@@ -1,27 +1,27 @@
-import { EventEmitter } from "events";
-
-type TData = {
-  [key: string]: any;
-};
-
-class Manager {
-  emitter: EventEmitter;
-  name: string | null;
-  data: { [key: string]: any };
-
-  constructor() {
-    this.name = "";
-    this.data = {};
-    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;
+import { EventEmitter } from "events";
+
+type TData = {
+  [key: string]: any;
+};
+
+class Manager {
+  emitter: EventEmitter;
+  name: string | null;
+  data: { [key: string]: any };
+
+  constructor() {
+    this.name = "";
+    this.data = {};
+    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;