@hh.ru/magritte-ui-modal-deprecated 1.0.1

package/useModalOrder.js

@@ -0,0 +1,92 @@
+import './index.css';
+import { useState, useLayoutEffect, useEffect } from 'react';
+import { useDomStoredUniqueId, getValueFromDom, storeValueInDom } from '@hh.ru/magritte-common-dom-storage';
+
+const STORAGE_NAME = '_MAGRITTE_MODAL_COUNTER_';
+const getState = () => {
+    const state = getValueFromDom(STORAGE_NAME);
+    if (state === undefined) {
+        return {
+            prevVisiblility: {},
+            positions: {},
+            subscribers: {},
+            count: 0,
+        };
+    }
+    return state;
+};
+const storeState = (state) => {
+    storeValueInDom(STORAGE_NAME, state);
+};
+const counterFactory = () => {
+    return {
+        updateVisiblility: (id, visible) => {
+            // eslint-disable-next-line prefer-const
+            const state = getState();
+            const prevVisible = !!state.prevVisiblility[id];
+            if (visible === prevVisible) {
+                return;
+            }
+            state.prevVisiblility[id] = visible;
+            if (visible) {
+                state.count += 1;
+                state.positions[id] = state.count;
+            }
+            else {
+                state.count -= 1;
+                const currentPosition = state.positions[id];
+                state.positions[id] = 0;
+                Object.entries(state.positions).forEach(([key, value]) => {
+                    state.positions[key] = value > currentPosition ? value - 1 : value;
+                });
+            }
+            storeState(state);
+        },
+        subscribe: (id, callback) => {
+            const state = getState();
+            state.subscribers[id] = callback;
+            storeState(state);
+        },
+        unsubscribe: (id) => {
+            const state = getState();
+            delete state.subscribers[id];
+            storeState(state);
+        },
+        notifyAll: () => {
+            const { subscribers, count, positions } = getState();
+            Object.entries(subscribers).forEach(([id, callback]) => callback({ position: positions[id], count }));
+        },
+    };
+};
+const counter = counterFactory();
+const useModalOrder = (visible, modalRef) => {
+    const [position, setPosition] = useState({ position: 0, count: 0 });
+    const id = useDomStoredUniqueId();
+    useLayoutEffect(() => {
+        counter.updateVisiblility(id, visible);
+        counter.notifyAll();
+        // eslint-disable-next-line disable-autofix/react-hooks/exhaustive-deps
+    }, [visible]);
+    useEffect(() => {
+        counter.subscribe(id, setPosition);
+        counter.updateVisiblility(id, visible);
+        return () => {
+            counter.unsubscribe(id);
+            counter.updateVisiblility(id, false);
+            counter.notifyAll();
+        };
+        // eslint-disable-next-line disable-autofix/react-hooks/exhaustive-deps
+    }, [id]);
+    useLayoutEffect(() => {
+        // Если это самый "верхний" модал передаем туда фокус
+        if (position.position === position.count &&
+            position.count > 0 &&
+            !modalRef.current?.contains(document.activeElement)) {
+            modalRef.current?.focus();
+        }
+    }, [position, modalRef]);
+    return [position.position, position.count];
+};
+
+export { useModalOrder };
+//# sourceMappingURL=useModalOrder.js.map

package/useModalOrder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useModalOrder.js","sources":["src/useModalOrder.ts"],"sourcesContent":["import { RefObject, useEffect, useLayoutEffect, useState } from 'react';\n\nimport { storeValueInDom, getValueFromDom, useDomStoredUniqueId } from '@hh.ru/magritte-common-dom-storage';\n\ntype NotifyCallbackArg = { position: number; count: number };\n\ntype Subscribers = Record<string, (position: NotifyCallbackArg) => void>;\ntype VisibilityMap = Record<string, boolean>;\ntype PositionMap = Record<string, number>;\n\ntype ModalCounterState = {\n    prevVisiblility: VisibilityMap;\n    positions: PositionMap;\n    subscribers: Subscribers;\n    count: number;\n};\n\nconst STORAGE_NAME = '_MAGRITTE_MODAL_COUNTER_';\n\nconst getState = (): ModalCounterState => {\n    const state = getValueFromDom<ModalCounterState>(STORAGE_NAME);\n    if (state === undefined) {\n        return {\n            prevVisiblility: {},\n            positions: {},\n            subscribers: {},\n            count: 0,\n        };\n    }\n    return state;\n};\n\nconst storeState = (state: ModalCounterState): void => {\n    storeValueInDom(STORAGE_NAME, state);\n};\n\nconst counterFactory = () => {\n    return {\n        updateVisiblility: (id: string, visible: boolean) => {\n            // eslint-disable-next-line prefer-const\n            const state = getState();\n            const prevVisible = !!state.prevVisiblility[id];\n            if (visible === prevVisible) {\n                return;\n            }\n            state.prevVisiblility[id] = visible;\n            if (visible) {\n                state.count += 1;\n                state.positions[id] = state.count;\n            } else {\n                state.count -= 1;\n                const currentPosition = state.positions[id];\n                state.positions[id] = 0;\n                Object.entries(state.positions).forEach(([key, value]) => {\n                    state.positions[key] = value > currentPosition ? value - 1 : value;\n                });\n            }\n            storeState(state);\n        },\n        subscribe: (id: string, callback: (position: NotifyCallbackArg) => void) => {\n            const state = getState();\n            state.subscribers[id] = callback;\n            storeState(state);\n        },\n        unsubscribe: (id: string) => {\n            const state = getState();\n            delete state.subscribers[id];\n            storeState(state);\n        },\n        notifyAll: () => {\n            const { subscribers, count, positions } = getState();\n            Object.entries(subscribers).forEach(([id, callback]) => callback({ position: positions[id], count }));\n        },\n    };\n};\n\nconst counter = counterFactory();\n\nexport const useModalOrder = (visible: boolean, modalRef: RefObject<HTMLDivElement>): [number, number] => {\n    const [position, setPosition] = useState<{ position: number; count: number }>({ position: 0, count: 0 });\n    const id = useDomStoredUniqueId();\n\n    useLayoutEffect(() => {\n        counter.updateVisiblility(id, visible);\n        counter.notifyAll();\n        // eslint-disable-next-line disable-autofix/react-hooks/exhaustive-deps\n    }, [visible]);\n\n    useEffect(() => {\n        counter.subscribe(id, setPosition);\n        counter.updateVisiblility(id, visible);\n        return () => {\n            counter.unsubscribe(id);\n            counter.updateVisiblility(id, false);\n            counter.notifyAll();\n        };\n        // eslint-disable-next-line disable-autofix/react-hooks/exhaustive-deps\n    }, [id]);\n\n    useLayoutEffect(() => {\n        // Если это самый \"верхний\" модал передаем туда фокус\n        if (\n            position.position === position.count &&\n            position.count > 0 &&\n            !modalRef.current?.contains(document.activeElement)\n        ) {\n            modalRef.current?.focus();\n        }\n    }, [position, modalRef]);\n\n    return [position.position, position.count];\n};\n"],"names":[],"mappings":"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"}