@4i/modal-manager 1.1.21 → 1.1.30

package/src/styles.css

@@ -1,77 +1,53 @@
-@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;
-}
+@keyframes bg_opacity_scale {
+  from {
+    transform: scale(0.8) translateY(-50%) translateX(-50%);
+  }
+  to {
+    transform: scale(1) translateY(-50%) translateX(-50%);
+  }
+}
+
+@keyframes bg_opacity {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/*  */
+
+.modal_container {
+  position: relative;
+  z-index: 10000;
+}
+
+.modal_backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  animation: bg_opacity 0.3s ease forwards;
+}
+
+.modal_paper {
+  position: fixed;
+  z-index: 1000;
+  width: max-content;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  top: 50%;
+  left: 50%;
+  transform-origin: left;
+  animation: bg_opacity_scale 0.3s ease forwards;
+}
+
+.modal_closing {
+  animation: bg_opacity 150ms ease reverse 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;

package/src/utils/ModalManager.d.ts

@@ -21,13 +21,14 @@ export interface Options {
 }
 export declare class ModalManager extends Manager {
     queue: string[];
+    modalData: Map<string, any>;
     _openModalStateCallback: null | ((props: ModalState) => void);
     constructor();
     create<T>(name: string, payload: {
         modalId: number;
         data?: T;
-    }, options?: Options): void;
-    call<T>(name: string, data?: T, options?: Options): void;
+    }, options?: Options): string;
+    call<T>(name: string, data?: T, options?: Options): string;
     close<T>(position?: T): void;
     getQueueState({ queue, closedModalName, lastOpenedModal }: QueueState): {
         isHaveOpenModals: boolean;
@@ -36,6 +37,9 @@ export declare class ModalManager extends Manager {
         closedModalName: string | undefined;
     };
     onOpenModalState(callback: (state: ModalState) => void): void;
+    getModalCount(): number;
+    closeAll(): void;
 }
 declare const modal: ModalManager;
+export { modal };
 export default modal;

package/src/utils/ModalManager.js

@@ -18,7 +18,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModalManager = exports.constants = void 0;
+exports.modal = exports.ModalManager = exports.constants = void 0;
 var Manager_1 = __importDefault(require("./Manager"));
 function uniqueID() {
     return Math.floor(Math.random() * Date.now());
@@ -32,26 +32,37 @@ var ModalManager = /** @class */ (function (_super) {
     function ModalManager() {
         var _this = _super.call(this) || this;
         _this.queue = [];
+        _this.modalData = new Map(); // Сохраняем данные для каждого модального окна
         _this.create = _this.create.bind(_this);
         _this.call = _this.call.bind(_this);
-        _this.close = _this.close.bind(_this);
         _this._openModalStateCallback = null;
         return _this;
     }
     ModalManager.prototype.create = function (name, payload, options) {
-        this.name = name;
-        this.data = payload;
-        this.emitter.emit(exports.constants.CHANGE, this.name, this.data, options);
+        var _this = this;
+        var modalId = String(payload.modalId);
+        this.modalData.set(modalId, { name: name, payload: payload, options: options });
+        // Используем setTimeout для обеспечения асинхронного выполнения
+        setTimeout(function () {
+            _this.emitter.emit(exports.constants.CHANGE, name, payload, options);
+        }, 0);
+        return modalId;
     };
     ModalManager.prototype.call = function (name, data, options) {
-        var _a;
-        this.create(name, { modalId: uniqueID(), data: data }, options);
+        var _this = this;
+        var modalId = uniqueID();
+        var id = this.create(name, { modalId: modalId, data: data }, options);
         var lastOpenedModal = name;
-        this.queue.push(name);
-        (_a = this._openModalStateCallback) === null || _a === void 0 ? void 0 : _a.call(this, this.getQueueState({
-            queue: this.queue,
-            lastOpenedModal: lastOpenedModal,
-        }));
+        this.queue.push(id);
+        // Используем setTimeout чтобы дать React возможность обновить DOM
+        setTimeout(function () {
+            var _a;
+            (_a = _this._openModalStateCallback) === null || _a === void 0 ? void 0 : _a.call(_this, _this.getQueueState({
+                queue: _this.queue,
+                lastOpenedModal: lastOpenedModal,
+            }));
+        }, 0);
+        return id;
     };
     ModalManager.prototype.close = function (position) {
         var _a, _b;
@@ -75,8 +86,29 @@ var ModalManager = /** @class */ (function (_super) {
     ModalManager.prototype.onOpenModalState = function (callback) {
         this._openModalStateCallback = callback;
     };
+    // Получить количество открытых модальных окон
+    ModalManager.prototype.getModalCount = function () {
+        return this.queue.length;
+    };
+    // Метод для закрытия всех модальных окон
+    ModalManager.prototype.closeAll = function () {
+        var _this = this;
+        if (this.queue.length === 0)
+            return;
+        setTimeout(function () {
+            var _a;
+            _this.emitter.emit(exports.constants.CLOSE, "all");
+            _this.queue = [];
+            _this.modalData.clear();
+            (_a = _this._openModalStateCallback) === null || _a === void 0 ? void 0 : _a.call(_this, _this.getQueueState({
+                queue: _this.queue,
+                closedModalName: undefined,
+            }));
+        }, 0);
+    };
     return ModalManager;
 }(Manager_1.default));
 exports.ModalManager = ModalManager;
 var modal = new ModalManager();
+exports.modal = modal;
 exports.default = modal;

package/src/utils/ModalManager.ts

@@ -1,94 +1,131 @@
-import Manager from "./Manager";
-
-function uniqueID() {
-  return Math.floor(Math.random() * Date.now());
-}
-
-export const constants = {
-  CHANGE: "change",
-  CLOSE: "close",
-};
-
-interface QueueState {
-  queue: string[];
-  closedModalName?: string | undefined;
-  lastOpenedModal?: string | undefined;
-}
-
-interface ModalState {
-  isHaveOpenModals: boolean;
-  queue: string[];
-  closedModalName?: string | undefined;
-  lastOpenedModal?: string | undefined;
-}
-
-export interface Options {
-  hideBackdrop?: boolean;
-  extraClass?: string;
-  openMinimized?: boolean;
-}
-
-export class ModalManager extends Manager {
-  queue: string[] = [];
-  _openModalStateCallback: null | ((props: ModalState) => void);
-
-  constructor() {
-    super();
-    this.create = this.create.bind(this);
-    this.call = this.call.bind(this);
-    this.close = this.close.bind(this);
-    this._openModalStateCallback = null;
-  }
-
-  create<T>(
-    name: string,
-    payload: { modalId: number; data?: T },
-    options?: Options
-  ) {
-    this.name = name;
-    this.data = payload;
-    this.emitter.emit(constants.CHANGE, this.name, this.data, options);
-  }
-
-  call<T>(name: string, data?: T, options?: Options) {
-    this.create<T>(name, { modalId: uniqueID(), data }, options);
-    const lastOpenedModal = name;
-    this.queue.push(name);
-
-    this._openModalStateCallback?.(
-      this.getQueueState({
-        queue: this.queue,
-        lastOpenedModal,
-      })
-    );
-  }
-
-  close<T>(position?: T) {
-    this.emitter.emit(constants.CLOSE, position ?? this.queue?.length - 1);
-    const closedModalName = this.queue[this.queue.length - 1];
-    this.queue.pop();
-
-    this._openModalStateCallback?.(
-      this.getQueueState({
-        queue: this.queue,
-        closedModalName,
-      })
-    );
-  }
-
-  getQueueState({ queue, closedModalName, lastOpenedModal }: QueueState) {
-    return {
-      isHaveOpenModals: queue.length > 0,
-      queue,
-      lastOpenedModal: lastOpenedModal,
-      closedModalName,
-    };
-  }
-
-  onOpenModalState(callback: (state: ModalState) => void) {
-    this._openModalStateCallback = callback;
-  }
-}
-
-const modal = new ModalManager();
-export default modal;
+import Manager from "./Manager";
+
+function uniqueID() {
+  return Math.floor(Math.random() * Date.now());
+}
+
+export const constants = {
+  CHANGE: "change",
+  CLOSE: "close",
+};
+
+interface QueueState {
+  queue: string[];
+  closedModalName?: string | undefined;
+  lastOpenedModal?: string | undefined;
+}
+
+interface ModalState {
+  isHaveOpenModals: boolean;
+  queue: string[];
+  closedModalName?: string | undefined;
+  lastOpenedModal?: string | undefined;
+}
+
+export interface Options {
+  hideBackdrop?: boolean;
+  extraClass?: string;
+  openMinimized?: boolean;
+}
+
+export class ModalManager extends Manager {
+  queue: string[] = [];
+  modalData: Map<string, any> = new Map(); // Сохраняем данные для каждого модального окна
+  _openModalStateCallback: null | ((props: ModalState) => void);
+
+  constructor() {
+    super();
+    this.create = this.create.bind(this);
+    this.call = this.call.bind(this);
+    this._openModalStateCallback = null;
+  }
+
+  create<T>(
+    name: string,
+    payload: { modalId: number; data?: T },
+    options?: Options
+  ) {
+    const modalId = String(payload.modalId);
+    this.modalData.set(modalId, { name, payload, options });
+
+    // Используем setTimeout для обеспечения асинхронного выполнения
+    setTimeout(() => {
+      this.emitter.emit(constants.CHANGE, name, payload, options);
+    }, 0);
+
+    return modalId;
+  }
+
+  call<T>(name: string, data?: T, options?: Options) {
+    const modalId = uniqueID();
+    const id = this.create<T>(name, { modalId, data }, options);
+
+    const lastOpenedModal = name;
+    this.queue.push(id);
+
+    // Используем setTimeout чтобы дать React возможность обновить DOM
+    setTimeout(() => {
+      this._openModalStateCallback?.(
+        this.getQueueState({
+          queue: this.queue,
+          lastOpenedModal,
+        })
+      );
+    }, 0);
+
+    return id;
+  }
+
+  close<T>(position?: T) {
+    this.emitter.emit(constants.CLOSE, position ?? this.queue?.length - 1);
+    const closedModalName = this.queue[this.queue.length - 1];
+    this.queue.pop();
+
+    this._openModalStateCallback?.(
+      this.getQueueState({
+        queue: this.queue,
+        closedModalName,
+      })
+    );
+  }
+
+  getQueueState({ queue, closedModalName, lastOpenedModal }: QueueState) {
+    return {
+      isHaveOpenModals: queue.length > 0,
+      queue,
+      lastOpenedModal: lastOpenedModal,
+      closedModalName,
+    };
+  }
+
+  onOpenModalState(callback: (state: ModalState) => void) {
+    this._openModalStateCallback = callback;
+  }
+
+  // Получить количество открытых модальных окон
+  getModalCount() {
+    return this.queue.length;
+  }
+
+  // Метод для закрытия всех модальных окон
+  closeAll() {
+    if (this.queue.length === 0) return;
+
+    setTimeout(() => {
+      this.emitter.emit(constants.CLOSE, "all");
+      this.queue = [];
+      this.modalData.clear();
+
+      this._openModalStateCallback?.(
+        this.getQueueState({
+          queue: this.queue,
+          closedModalName: undefined,
+        })
+      );
+    }, 0);
+  }
+}
+
+const modal = new ModalManager();
+export { modal };
+export default modal;

package/tsconfig.json

@@ -1,17 +1,17 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "module": "commonjs",
-    "esModuleInterop": true,
-    "jsx": "react",
-    "strict": true,
-    "skipLibCheck": true,
-    "forceConsistentCasingInFileNames": true,
-    "moduleResolution": "node",
-    "declaration": true,
-    "outDir": "./src",
-    "allowJs": true
-  },
-  "include": ["src/**/*.ts", "src/**/*.tsx"],
-  "exclude": ["node_modules"]
-}
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "esModuleInterop": true,
+    "jsx": "react",
+    "strict": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "node",
+    "declaration": true,
+    "outDir": "./src",
+    "allowJs": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["node_modules"]
+}