@4i/modal-manager 1.1.22 → 1.1.30

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

@@ -1,16 +1,19 @@
 import React from "react";
 export type ModalList = {
-    [key: string]: React.ComponentType;
+    [key: string]: React.ComponentType<any>;
 };
 interface ModalProviderProps {
-    modalList: any;
+    modalList: ModalList;
     isOverflow?: boolean;
     className?: string;
     backdropClassName?: string;
-    onModalStateChange?: (modalState: boolean, data: TData[], names: string[]) => void;
+    onModalStateChange?: (modalState: boolean, data: ModalData[], names: string[]) => void;
 }
-type TData = {
-    [key: string]: any;
+type ModalData = {
+    id: string;
+    name: string;
+    payload: any;
+    options?: any;
 };
-declare const ModalProvider: ({ modalList, isOverflow, className, backdropClassName, onModalStateChange, }: ModalProviderProps) => React.JSX.Element;
+declare const ModalProvider: React.FC<ModalProviderProps>;
 export default ModalProvider;

package/src/components/modal-provider.js

@@ -81,116 +81,122 @@ 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 ModalManager_1 = require("../utils/ModalManager");
 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];
-    var _c = (0, react_1.useState)([]), names = _c[0], setNames = _c[1];
-    var modalRef = (0, react_1.useRef)([]);
-    var applyCloseStyles = function (index) {
+    var modalList = _a.modalList, _b = _a.isOverflow, isOverflow = _b === void 0 ? true : _b, _c = _a.className, className = _c === void 0 ? "" : _c, _d = _a.backdropClassName, backdropClassName = _d === void 0 ? "" : _d, onModalStateChange = _a.onModalStateChange;
+    var _e = (0, react_1.useState)([]), modals = _e[0], setModals = _e[1];
+    var modalRefs = (0, react_1.useRef)(new Map());
+    var applyCloseStyles = function (modalIndex) {
         return new Promise(function (resolve) {
-            var modal = document.querySelector("[data-index=\"".concat(index, "\"]"));
-            if (!modal)
+            var modalElement = document.querySelector("[data-modal-index=\"".concat(modalIndex, "\"]"));
+            if (!modalElement) {
+                resolve(false);
                 return;
-            modal.classList.add("closing");
+            }
+            modalElement.classList.add("modal_closing");
             setTimeout(function () {
                 resolve(true);
-            }, 150);
+            }, 300);
         });
     };
     (0, react_1.useEffect)(function () {
-        if (!onModalStateChange)
-            return;
-        var modalState = data.length !== 0;
-        onModalStateChange(modalState, data, names);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [data, names]);
+        if (onModalStateChange && modals.length >= 0) {
+            var data = modals.map(function (modal) { return modal.payload; });
+            var names = modals.map(function (modal) { return modal.name; });
+            onModalStateChange(modals.length > 0, data, names);
+        }
+    }, [modals, onModalStateChange]);
     (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";
-            }
+        // Toggle body overflow
+        if (typeof document !== "undefined") {
+            document.body.style.overflow =
+                isOverflow && modals.length > 0 ? "hidden" : "";
+        }
+    }, [modals.length, isOverflow]);
+    (0, react_1.useEffect)(function () {
+        var handleOpenModal = function (name, payload, options) {
+            var id = "modal-".concat(payload.modalId || Date.now(), "-").concat(Math.random()
+                .toString(36)
+                .substring(2, 9));
+            setModals(function (prevModals) { return __spreadArray(__spreadArray([], prevModals, true), [
+                { id: id, name: name, payload: payload, options: options },
+            ], false); });
         };
         var handleClose = function (position) { return __awaiter(void 0, void 0, void 0, function () {
+            var i, indexToRemove_1;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        console.log("position", position);
-                        return [4 /*yield*/, applyCloseStyles(position)];
+                        console.log("POS", position);
+                        if (!(position === "all")) return [3 /*break*/, 5];
+                        i = modals.length - 1;
+                        _a.label = 1;
                     case 1:
+                        if (!(i >= 0)) return [3 /*break*/, 4];
+                        return [4 /*yield*/, applyCloseStyles(i)];
+                    case 2:
                         _a.sent();
-                        if (isOverflow) {
-                            if (typeof document !== "undefined") {
-                                document.body.style.overflow = "";
-                            }
-                        }
-                        if (position === "all") {
-                            setData([]);
-                            setNames([]);
-                            return [2 /*return*/];
-                        }
-                        if (position === -1) {
-                            // remove last
-                            setData(function (prev) {
-                                return prev.filter(function (_, index) { return index !== prev.length - 1; });
-                            });
-                            setNames(function (prev) {
-                                return prev.filter(function (_, index) { return index !== prev.length - 1; });
-                            });
-                            return [2 /*return*/];
-                        }
-                        if (position === 0) {
-                            // remove first
-                            setData(function (prev) { return prev.filter(function (_, index) { return index !== 0; }); });
-                            setNames(function (prev) { return prev.filter(function (_, index) { return index !== 0; }); });
-                            return [2 /*return*/];
+                        _a.label = 3;
+                    case 3:
+                        i--;
+                        return [3 /*break*/, 1];
+                    case 4:
+                        setModals([]);
+                        return [2 /*return*/];
+                    case 5:
+                        if (!(typeof position === "number")) return [3 /*break*/, 7];
+                        indexToRemove_1 = position;
+                        if (indexToRemove_1 < 0 || indexToRemove_1 >= modals.length) {
+                            // Если индекс невалидный, закрываем последний
+                            indexToRemove_1 = modals.length - 1;
                         }
-                        // remove position index
-                        setData(function (prev) {
-                            return prev.filter(function (_, index) { return index !== prev.length - 1; });
-                        });
-                        setNames(function (prev) {
-                            return prev.filter(function (_, index) { return index !== prev.length - 1; });
+                        if (!(indexToRemove_1 >= 0 && indexToRemove_1 < modals.length)) return [3 /*break*/, 7];
+                        return [4 /*yield*/, applyCloseStyles(indexToRemove_1)];
+                    case 6:
+                        _a.sent();
+                        setModals(function (prevModals) {
+                            return prevModals.filter(function (_, index) { return index !== indexToRemove_1; });
                         });
-                        return [2 /*return*/];
+                        _a.label = 7;
+                    case 7: return [2 /*return*/];
                 }
             });
         }); };
-        ModalManager_1.default.addEventListener(ModalManager_1.constants.CHANGE, handleOpenModal);
-        ModalManager_1.default.addEventListener(ModalManager_1.constants.CLOSE, handleClose);
+        // Добавляем обработчики событий
+        ModalManager_1.modal.emitter.on(ModalManager_1.constants.CHANGE, handleOpenModal);
+        ModalManager_1.modal.emitter.on(ModalManager_1.constants.CLOSE, handleClose);
         return function () {
-            ModalManager_1.default.removeEventListener(ModalManager_1.constants.CHANGE, handleOpenModal);
-            ModalManager_1.default.removeEventListener(ModalManager_1.constants.CLOSE, handleClose);
+            // Удаляем обработчики при размонтировании
+            ModalManager_1.modal.emitter.off(ModalManager_1.constants.CHANGE, handleOpenModal);
+            ModalManager_1.modal.emitter.off(ModalManager_1.constants.CLOSE, handleClose);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    var activeModals = names.map(function (name) {
-        var Component = modalList[name] || (function () { return react_1.default.createElement(react_1.default.Fragment, null); });
-        return Component;
-    });
+    }, [modals]);
     var handleCloseModal = function (index) {
-        ModalManager_1.default.close(index);
+        ModalManager_1.modal.close(index);
+    };
+    var saveModalRef = function (id, ref) {
+        if (ref) {
+            modalRefs.current.set(id, ref);
+        }
+        else {
+            modalRefs.current.delete(id);
+        }
     };
-    var refReducer = function (index, value) {
-        modalRef.current[index] = value;
+    // Предотвратить всплытие клика для модального контента
+    var stopPropagation = function (e) {
+        e.stopPropagation();
     };
-    return (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) },
-                react_1.default.createElement("div", { onClick: function (e) {
-                        e.stopPropagation();
-                        handleCloseModal(i);
-                    }, className: "backdrop" }),
-                react_1.default.createElement("div", { className: "".concat(className, " modal_paper") },
-                    react_1.default.createElement("div", { ref: function (ref) {
-                            refReducer(i, ref);
-                        } },
-                        react_1.default.createElement(Modal, __assign({}, item.data))))));
-        })));
+    return (react_1.default.createElement(react_1.default.Fragment, null, modals.map(function (modalItem, index) {
+        var name = modalItem.name, payload = modalItem.payload, options = modalItem.options, id = modalItem.id;
+        var Modal = modalList[name] || (function () { return react_1.default.createElement("div", null,
+            "Modal not found: ",
+            name); });
+        var hideBackdrop = (options === null || options === void 0 ? void 0 : options.hideBackdrop) || false;
+        var extraClass = (options === null || options === void 0 ? void 0 : options.extraClass) || "";
+        return (react_1.default.createElement("div", { key: id, "data-modal-id": id, "data-modal-index": index, className: "modal_container ".concat(extraClass) },
+            !hideBackdrop && (react_1.default.createElement("div", { onClick: function () { return handleCloseModal(index); }, className: "modal_backdrop" })),
+            react_1.default.createElement("div", { className: "".concat(className, " modal_paper"), onClick: stopPropagation, ref: function (ref) { return saveModalRef(id, ref); } },
+                react_1.default.createElement(Modal, __assign({}, (payload.data || {}), { modalIndex: index })))));
+    })));
 };
 exports.default = ModalProvider;

package/src/components/modal-provider.tsx

@@ -1,165 +1,177 @@
-"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;
-  };
-
-  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";
+
+export type ModalList = { [key: string]: React.ComponentType<any> };
+
+interface ModalProviderProps {
+  modalList: ModalList;
+  isOverflow?: boolean;
+  className?: string;
+  backdropClassName?: string;
+  onModalStateChange?: (
+    modalState: boolean,
+    data: ModalData[],
+    names: string[]
+  ) => void;
+}
+
+type ModalData = {
+  id: string;
+  name: string;
+  payload: any;
+  options?: any;
+};
+
+const ModalProvider: React.FC<ModalProviderProps> = ({
+  modalList,
+  isOverflow = true,
+  className = "",
+  backdropClassName = "",
+  onModalStateChange,
+}) => {
+  const [modals, setModals] = useState<ModalData[]>([]);
+  const modalRefs = useRef<Map<string, HTMLDivElement | null>>(new Map());
+
+  const applyCloseStyles = (modalIndex: number): Promise<boolean> => {
+    return new Promise((resolve) => {
+      const modalElement = document.querySelector(
+        `[data-modal-index="${modalIndex}"]`
+      ) as HTMLElement;
+
+      if (!modalElement) {
+        resolve(false);
+        return;
+      }
+
+      modalElement.classList.add("modal_closing");
+      setTimeout(() => {
+        resolve(true);
+      }, 300);
+    });
+  };
+
+  useEffect(() => {
+    if (onModalStateChange && modals.length >= 0) {
+      const data = modals.map((modal) => modal.payload);
+      const names = modals.map((modal) => modal.name);
+      onModalStateChange(modals.length > 0, data, names);
+    }
+  }, [modals, onModalStateChange]);
+
+  useEffect(() => {
+    // Toggle body overflow
+    if (typeof document !== "undefined") {
+      document.body.style.overflow =
+        isOverflow && modals.length > 0 ? "hidden" : "";
+    }
+  }, [modals.length, isOverflow]);
+
+  useEffect(() => {
+    const handleOpenModal = (name: string, payload: any, options?: any) => {
+      const id = `modal-${payload.modalId || Date.now()}-${Math.random()
+        .toString(36)
+        .substring(2, 9)}`;
+
+      setModals((prevModals) => [
+        ...prevModals,
+        { id, name, payload, options },
+      ]);
+    };
+
+    const handleClose = async (position: number | string) => {
+      console.log("POS", position);
+      if (position === "all") {
+        // Закрыть все модальные окна с анимацией
+        for (let i = modals.length - 1; i >= 0; i--) {
+          await applyCloseStyles(i);
+        }
+        setModals([]);
+        return;
+      }
+
+      if (typeof position === "number") {
+        // Обработка числовых позиций
+        let indexToRemove: number = position;
+
+        if (indexToRemove < 0 || indexToRemove >= modals.length) {
+          // Если индекс невалидный, закрываем последний
+          indexToRemove = modals.length - 1;
+        }
+
+        if (indexToRemove >= 0 && indexToRemove < modals.length) {
+          await applyCloseStyles(indexToRemove);
+
+          setModals((prevModals) =>
+            prevModals.filter((_, index) => index !== indexToRemove)
+          );
+        }
+      }
+    };
+
+    // Добавляем обработчики событий
+    modal.emitter.on(constants.CHANGE, handleOpenModal);
+    modal.emitter.on(constants.CLOSE, handleClose);
+
+    return () => {
+      // Удаляем обработчики при размонтировании
+      modal.emitter.off(constants.CHANGE, handleOpenModal);
+      modal.emitter.off(constants.CLOSE, handleClose);
+    };
+  }, [modals]);
+
+  const handleCloseModal = (index: number) => {
+    modal.close(index);
+  };
+
+  const saveModalRef = (id: string, ref: HTMLDivElement | null) => {
+    if (ref) {
+      modalRefs.current.set(id, ref);
+    } else {
+      modalRefs.current.delete(id);
+    }
+  };
+
+  // Предотвратить всплытие клика для модального контента
+  const stopPropagation = (e: React.MouseEvent) => {
+    e.stopPropagation();
+  };
+
+  return (
+    <>
+      {modals.map((modalItem, index) => {
+        const { name, payload, options, id } = modalItem;
+        const Modal =
+          modalList[name] || (() => <div>Modal not found: {name}</div>);
+        const hideBackdrop = options?.hideBackdrop || false;
+        const extraClass = options?.extraClass || "";
+
+        return (
+          <div
+            key={id}
+            data-modal-id={id}
+            data-modal-index={index}
+            className={`modal_container ${extraClass}`}
+          >
+            {!hideBackdrop && (
+              <div
+                onClick={() => handleCloseModal(index)}
+                className="modal_backdrop"
+              />
+            )}
+            <div
+              className={`${className} modal_paper`}
+              onClick={stopPropagation}
+              ref={(ref) => saveModalRef(id, ref)}
+            >
+              <Modal {...(payload.data || {})} modalIndex={index} />
+            </div>
+          </div>
+        );
+      })}
+    </>
+  );
+};
+
+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 };