wenay-react2 1.0.1

package/lib/common/src/components/Dnd/RNDFunc3.js

@@ -0,0 +1,380 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Rnd } from "react-rnd";
+import { renderBy, updateBy } from "../../../updateBy";
+// Карта всех размеров всплывающих окон
+export const ExRNDMap3 = new Map();
+// limit={{x:{min:0}, y:{min:0}}}
+let k = 0;
+const openWindows = { ar: [] };
+export const DivRnd3 = (a) => {
+    // const Base = ({ update }: { update: number }) => {
+    //     console.log(update)
+    //     return typeof a.children === "function" ? a.children(update) : a.children;
+    // }
+    const Base2 = ({ update }) => {
+        return typeof a.children === "function" ? a.children(update) : a.children;
+    };
+    // const ff = (update: number) => useMemo(() => <Base update={update} />, [update]);
+    const ff = (update) => useMemo(() => _jsx(Base2, { update: update }), [typeof a.children === "function" ? update : true]);
+    return DivRndBase3({ ...a, children: ff });
+};
+/**
+ * Компонент-обёртка над react-rnd.
+ * Обеспечивает перетаскивание и изменение размеров, опциональный заголовок и кнопку закрытия.
+ */
+export function DivRndBase3({ children, keyForSave: ks, position, size, overflow = true, zIndex = 9, onUpdate, disableDragging, className, header, moveOnlyHeader, limit, onCLickClose, sizeByWindow = true }) {
+    if (onCLickClose && !limit) {
+        limit = { y: { min: 0 } };
+    }
+    const positionDef = { x: 0, y: 0, ...(position ?? {}) };
+    const sizeDef = { height: 0, width: 0, ...(size ?? {}) };
+    // Если есть ключ — данные положения и размера храним в карте
+    let map;
+    if (ks) {
+        map = ExRNDMap3.get(ks) ?? ExRNDMap3.set(ks, { size: sizeDef, position: positionDef }).get(ks);
+    }
+    position = map?.position ?? positionDef;
+    size = map?.size ?? sizeDef;
+    // Если нужно вписаться в окно по размеру
+    if (sizeByWindow) {
+        // ...здесь можно добавить логику проверки/коррекции на window.innerWidth, window.innerHeight и т.д.
+    }
+    const id2 = useRef({ k: k++ });
+    const id = id2.current;
+    const [zIndexX, setZIndexX] = useState(0);
+    const lastC = useRef(null);
+    const lastT = useRef(null);
+    const [a, setA] = useState(false);
+    const [b, setB] = useState(false);
+    const [x, setX] = useState(position?.x ?? 0);
+    const [y, setY] = useState(position?.y ?? 30);
+    const [width, setWidth] = useState(size?.width ?? 400);
+    const [height, setHeight] = useState(size?.height ?? 400);
+    const [update, setUpdate] = useState(0);
+    const zindex = useRef(zIndexX);
+    zindex.current = zIndexX;
+    // Обновляем zIndex окна, если оно поднято сверху
+    updateBy(openWindows, () => {
+        const z = openWindows.ar.findIndex((v) => v.k === id.k);
+        if (z >= 0 && z !== zindex.current) {
+            setZIndexX(z);
+        }
+    });
+    /**
+     * Хук для перетаскивания мышкой (a) и перетаскивания на тач-устройствах (b).
+     * Снимаем подписки при размонтировании и при изменении зависимостей (a/b).
+     */
+    useEffect(() => {
+        // Мышь
+        const mouseMoveHandler = (e) => {
+            e.stopPropagation();
+            if (lastC.current == null) {
+                lastC.current = {
+                    x: e.clientX,
+                    y: e.clientY
+                };
+            }
+            const data = lastC.current;
+            if (e.buttons === 1) {
+                let newX = e.clientX + data.x;
+                let newY = e.clientY + data.y;
+                if (limit) {
+                    if (limit.x?.min !== undefined && limit.x.min > newX)
+                        newX = limit.x.min;
+                    if (limit.x?.max !== undefined && limit.x.max < newX)
+                        newX = limit.x.max;
+                    if (limit.y?.min !== undefined && limit.y.min > newY)
+                        newY = limit.y.min;
+                    if (limit.y?.max !== undefined && limit.y.max < newY)
+                        newY = limit.y.max;
+                }
+                setX(newX);
+                setY(newY);
+            }
+            else {
+                mouseUpHandler();
+            }
+        };
+        const mouseUpHandler = () => {
+            document.removeEventListener("mouseup", mouseUpHandler);
+            document.removeEventListener("mousemove", mouseMoveHandler);
+            lastC.current = null;
+            setA(false);
+        };
+        // Тач
+        const touchMoveHandler = (e) => {
+            const data = lastT.current;
+            if (!data)
+                return touchEndHandler(e);
+            let t = null;
+            for (let i = 0; i < e.changedTouches.length; i++) {
+                const zz = e.changedTouches[i];
+                if (zz.identifier === data.id)
+                    t = zz;
+            }
+            if (!t)
+                return;
+            let newX = t.clientX + data.x;
+            let newY = t.clientY + data.y;
+            if (limit) {
+                if (limit.x?.min !== undefined && limit.x.min > newX)
+                    newX = limit.x.min;
+                if (limit.x?.max !== undefined && limit.x.max < newX)
+                    newX = limit.x.max;
+                if (limit.y?.min !== undefined && limit.y.min > newY)
+                    newY = limit.y.min;
+                if (limit.y?.max !== undefined && limit.y.max < newY)
+                    newY = limit.y.max;
+            }
+            setX(newX);
+            setY(newY);
+        };
+        const touchEndHandler = (e) => {
+            const data = lastT.current;
+            if (data) {
+                for (let i = 0; i < e.changedTouches.length; i++) {
+                    const zz = e.changedTouches[i];
+                    if (zz.identifier === data.id) {
+                        lastT.current = null;
+                    }
+                }
+            }
+            if (lastT.current == null) {
+                document.removeEventListener("touchend", touchEndHandler);
+                document.removeEventListener("touchmove", touchMoveHandler);
+                setB(false);
+            }
+        };
+        // Если активирован режим перетаскивания мышью
+        if (a) {
+            document.addEventListener("mousemove", mouseMoveHandler);
+            document.addEventListener("mouseup", mouseUpHandler);
+        }
+        // Если активирован режим перетаскивания для тач-событий
+        if (b) {
+            document.addEventListener("touchmove", touchMoveHandler);
+            document.addEventListener("touchend", touchEndHandler);
+        }
+        // Возвращаем функцию очистки для размонтирования и при изменениях a/b:
+        return () => {
+            document.removeEventListener("mousemove", mouseMoveHandler);
+            document.removeEventListener("mouseup", mouseUpHandler);
+            document.removeEventListener("touchmove", touchMoveHandler);
+            document.removeEventListener("touchend", touchEndHandler);
+        };
+    }, [a, b, limit, x, y]);
+    // При первой отрисовке добавляем "окно" в массив, при размонтировании — удаляем
+    useEffect(() => {
+        openWindows.ar.push(id);
+        renderBy(openWindows);
+        return () => {
+            const z = openWindows.ar.findIndex((v) => v.k === id.k);
+            if (z >= 0) {
+                openWindows.ar.splice(z, 1);
+                renderBy(openWindows);
+            }
+        };
+    }, []);
+    // Обновляем в карте координаты и размер, если задан keyForSave
+    if (size) {
+        size.height = height;
+        size.width = width;
+    }
+    if (position) {
+        position.x = x;
+        position.y = y;
+    }
+    const headerD = (_jsx("div", { ref: (el) => {
+            if (el && sizeByWindow) {
+                const rect = el.getBoundingClientRect();
+                if (rect.x < 0)
+                    setX(x - rect.x);
+                if (rect.y < 0)
+                    setY(y - rect.y);
+                // Пример небольшой коррекции, если окно слишком большое
+                if (typeof width === "number" && width > window.innerWidth) {
+                    setWidth(window.innerWidth);
+                }
+                if (typeof height === "number" && height > window.innerHeight) {
+                    setHeight(window.innerHeight);
+                }
+            }
+        }, onTouchStart: (e) => {
+            const t = e.changedTouches[0];
+            if (t) {
+                lastT.current = {
+                    x: x - t.clientX,
+                    y: y - t.clientY,
+                    id: t.identifier
+                };
+            }
+            setB(true);
+        }, onMouseDown: (e) => {
+            lastC.current = {
+                x: x - e.clientX,
+                y: y - e.clientY
+            };
+            setA(true);
+        }, style: {
+            userSelect: "none",
+            cursor: "grabbing"
+        }, children: header ?? (_jsx("div", { style: {
+                height: 20,
+                width: "100%",
+                backgroundImage: "repeating-linear-gradient(139deg, hsla(0,0%,100%,.1), hsla(0,0%,100%,.1) 15px, transparent 0, transparent 30px)"
+            } })) }));
+    return (_jsx(Rnd, { disableDragging: true, style: {
+            zIndex: zIndexX * 2 + zIndex
+        }, className: className, onResizeStop: (e, dir, elementRef, delta, { x: nx, y: ny }) => {
+            setX(nx);
+            setY(ny);
+            setHeight(+height + delta.height);
+            setWidth(+width + delta.width);
+            setUpdate(update + 1);
+        }, onResize: (e, dir, elementRef, delta, pos) => {
+            onUpdate?.({ e, dir, elementRef, delta, position: pos });
+        }, position: { x, y }, size: { width, height }, default: {
+            ...position,
+            ...size
+        }, children: _jsxs("div", { style: {
+                width: "100%",
+                height: "100%",
+                display: "flex",
+                flexDirection: "column",
+                position: "relative",
+                flex: "auto"
+            }, onMouseDown: () => {
+                // Поднимаем окно наверх
+                const z = openWindows.ar.findIndex((v) => v === id);
+                if (z !== openWindows.ar.length - 1 || zindex.current !== z) {
+                    const buf = openWindows.ar[z];
+                    openWindows.ar.splice(z, 1);
+                    openWindows.ar.push(buf);
+                    renderBy(openWindows);
+                }
+            }, children: [moveOnlyHeader || header ? headerD : null, _jsxs("div", { className: "maxSize", style: { overflow: overflow ? "auto" : undefined }, children: [(a || b) && (_jsx("div", { className: "maxSize", style: {
+                                position: "absolute",
+                                zIndex: zIndexX * 2 + zIndex + 1
+                            } })), typeof children === "function" ? children(update) : children] }), onCLickClose && (_jsx("div", { className: "msTradeAlt", style: {
+                        position: "absolute",
+                        right: -15,
+                        top: -15,
+                        fontSize: "32px",
+                        zIndex: zIndexX * 2 + zIndex + 1,
+                        cursor: "pointer"
+                    }, onClick: onCLickClose, children: "x" }, "323"))] }) }));
+}
+/**
+ * Компонент-обёртка, позволяющий перетаскивать вложенный элемент
+ * как мышью, так и касаниями (touch).
+ *
+ * Функция исключительно как хук на изменения параметров при движении - хоть и имеет свой компонент (для отсчета)
+ * возвращает пройденное расстояние при перемещении дочернего элемента
+ */
+export function Drag22({ children, onX, onY, x = 0, y = 0, right = false, last, dragging, onStart, onStop }) {
+    const offsetMouse = useRef({ x: 0, y: 0 });
+    const offsetTouch = useRef(null);
+    const [draggingMouse, setDraggingMouse] = useState(false);
+    const [draggingTouch, setDraggingTouch] = useState(false);
+    const posRef = useRef(last?.current ?? { x, y });
+    useLayoutEffect(() => {
+        posRef.current.x = x;
+        posRef.current.y = y;
+    }, [x, y]);
+    useEffect(() => {
+        if (!draggingMouse && !draggingTouch) {
+            onStop?.();
+            return;
+        }
+        if (draggingMouse) {
+            const handleMouseMove = (e) => {
+                const newX = e.clientX + offsetMouse.current.x;
+                const newY = e.clientY + offsetMouse.current.y;
+                posRef.current = { x: newX, y: newY };
+                onX?.(newX);
+                onY?.(newY);
+            };
+            const handleMouseUp = () => {
+                offsetMouse.current.x = 0;
+                offsetMouse.current.y = 0;
+                document.removeEventListener("mousemove", handleMouseMove);
+                document.removeEventListener("mouseup", handleMouseUp);
+                setDraggingMouse(false);
+            };
+            document.addEventListener("mousemove", handleMouseMove);
+            document.addEventListener("mouseup", handleMouseUp);
+            onStart?.();
+            return () => {
+                document.removeEventListener("mousemove", handleMouseMove);
+                document.removeEventListener("mouseup", handleMouseUp);
+            };
+        }
+        if (draggingTouch) {
+            const handleTouchMove = (e) => {
+                if (!offsetTouch.current)
+                    return;
+                const theTouch = Array.from(e.changedTouches).find((t) => t.identifier === offsetTouch.current?.id);
+                if (!theTouch)
+                    return;
+                const newX = theTouch.clientX + offsetTouch.current.x;
+                const newY = theTouch.clientY + offsetTouch.current.y;
+                posRef.current = { x: newX, y: newY };
+                onX?.(newX);
+                onY?.(newY);
+            };
+            const handleTouchEnd = (e) => {
+                if (!offsetTouch.current)
+                    return;
+                const ended = Array.from(e.changedTouches).find((t) => t.identifier === offsetTouch.current?.id);
+                if (ended) {
+                    offsetTouch.current = null;
+                    document.removeEventListener("touchmove", handleTouchMove);
+                    document.removeEventListener("touchend", handleTouchEnd);
+                    setDraggingTouch(false);
+                }
+            };
+            document.addEventListener("touchmove", handleTouchMove);
+            document.addEventListener("touchend", handleTouchEnd);
+            onStart?.();
+            return () => {
+                document.removeEventListener("touchmove", handleTouchMove);
+                document.removeEventListener("touchend", handleTouchEnd);
+            };
+        }
+    }, [draggingMouse, draggingTouch, onX, onY, onStart, onStop]);
+    useLayoutEffect(() => {
+        if (last) {
+            last.current = posRef.current;
+        }
+    });
+    const handleMouseDown = (e) => {
+        e.preventDefault();
+        posRef.current.x = 0;
+        posRef.current.y = 0;
+        offsetMouse.current = {
+            x: posRef.current.x - e.clientX,
+            y: posRef.current.y - e.clientY
+        };
+        console.log("xxx");
+        console.log(offsetMouse.current.x, posRef.current.x, e.clientX);
+        setDraggingMouse(true);
+    };
+    const handleTouchStart = (e) => {
+        const t = e.changedTouches[0];
+        if (!t)
+            return;
+        offsetTouch.current = {
+            x: posRef.current.x - t.clientX,
+            y: posRef.current.y - t.clientY,
+            id: t.identifier
+        };
+        setDraggingTouch(true);
+    };
+    return (_jsx("div", { style: {
+            position: "absolute",
+            left: right ? undefined : 0,
+            right: right ? 0 : undefined,
+            top: 0
+        }, onMouseDown: handleMouseDown, onTouchStart: handleTouchStart, children: children }));
+}

package/lib/common/src/components/Dnd/Resizable.d.ts

@@ -0,0 +1,15 @@
+import { ResizableProps } from "re-resizable";
+type tSaveMap = {
+    height?: number | string;
+    width?: number | string;
+};
+export declare const mapResiReact: Map<string, tSaveMap>;
+type t3 = Pick<ResizableProps, "style" | "enable" | "onResize" | "children" | "size" | "maxWidth" | "maxHeight" | "minWidth" | "minHeight">;
+export declare function FResizableReact({ style, onResize, enable, children, keyForSave, onResizeStop, size, minWidth, minHeight, maxWidth, maxHeight, moveWith, moveHeight }: t3 & {
+    keyForSave?: string;
+    onResize?: (size?: tSaveMap) => void;
+    onResizeStop?: (size: tSaveMap) => void;
+    moveWith?: boolean;
+    moveHeight?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/common/src/components/Dnd/Resizable.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Resizable } from "re-resizable";
+// память всех размеров колонок
+export const mapResiReact = new Map();
+export function FResizableReact({ style, onResize, enable, children, keyForSave, onResizeStop, size = { height: 50, width: 50 }, minWidth, minHeight, maxWidth = "100%", maxHeight = "100%", moveWith = true, moveHeight = true }) {
+    let obj = size;
+    if (keyForSave) {
+        let b = mapResiReact.get(keyForSave);
+        if (b)
+            obj = b;
+        else
+            mapResiReact.set(keyForSave, obj);
+    }
+    return _jsx(Resizable, { style: style, onResize: (event, direction, elementRef, delta) => {
+            onResize?.();
+            // костыль устраняет какой-то баг - проявляется при изменении родительского дива
+            if (moveHeight == false && typeof obj.height == "string" && elementRef.style.height != obj.height)
+                elementRef.style.height = obj.height;
+        }, enable: enable, onResizeStop: (e, dir, elementRef, delta) => {
+            if (delta.width && moveWith)
+                if (typeof obj.width == "number")
+                    obj.width += delta.width;
+                else {
+                    obj.width = elementRef.style.width;
+                }
+            if (delta.height && moveHeight)
+                if (typeof obj.height == "number")
+                    obj.height += delta.height;
+                else {
+                    obj.height = elementRef.style.height;
+                }
+            // onResize?.(size)
+            onResizeStop?.(obj);
+            // this.Refresh()
+        }, size: obj, defaultSize: obj, maxWidth: maxWidth, maxHeight: maxHeight, minWidth: minWidth, minHeight: minHeight, children: children });
+}

package/lib/common/src/components/Dnd/index.d.ts

@@ -0,0 +1,4 @@
+export * from './DraggableOutlineDiv';
+export * from './RNDFunc';
+export * from './RNDFunc3';
+export * from './Resizable';

package/lib/common/src/components/Dnd/index.js

@@ -0,0 +1,4 @@
+export * from './DraggableOutlineDiv';
+export * from './RNDFunc';
+export * from './RNDFunc3';
+export * from './Resizable';

package/lib/common/src/components/Input.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+export declare function InputPage({ callback, name, txt }: {
+    callback: (txt: string) => void;
+    name?: string;
+    txt?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function InputPageModal({ callback, name, outClick, keyForSave, txt }: Parameters<typeof InputPage>[0] & {
+    outClick: () => any;
+    keyForSave?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function InputFileModal({ callback, name, outClick, keyForSave }: Parameters<typeof InputFile>[0] & {
+    outClick: () => any;
+    keyForSave?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function InputFile({ callback, name }: {
+    callback: (file: File | null) => void;
+    name?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function PageModalFree({ outClick, children, zIndex, size, keyForSave }: {
+    zIndex?: number;
+    outClick: () => any;
+    children: React.JSX.Element;
+    size?: {
+        height: number;
+        width: number;
+    };
+    keyForSave?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/lib/common/src/components/Input.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { DivOutsideClick } from "../hooks";
+import { DivRnd3 } from "./Dnd";
+// Unified modal wrapper component
+function ModalWrapper({ outClick, children, zIndex, size = { height: 150, width: 300 }, keyForSave, position }) {
+    const defaultPosition = position ?? { y: -(size.height / 2), x: -(size.width / 2) };
+    return _jsx(DivOutsideClick, { outsideClick: outClick, style: { position: "absolute", top: "50%", left: "50%" }, children: _jsx(DivRnd3, { keyForSave: keyForSave, size: size, zIndex: zIndex, position: defaultPosition, className: "fon border fonLight", moveOnlyHeader: true, children: children }) });
+}
+export function InputPage({ callback, name = "", txt = "" }) {
+    const txtName = useRef(txt);
+    return _jsxs("div", { className: "maxSize", style: { padding: 20, }, children: [_jsx("label", { children: name }), _jsx("input", { type: "text", style: { width: "100%" }, defaultValue: txtName.current, onChange: (e) => {
+                    txtName.current = e.target.value; //?? txt
+                } }), _jsx("div", { style: { marginTop: 20 }, className: "msTradeAlt msTradeActive", onClick: () => { callback(txtName.current); }, children: "send" })] });
+}
+export function InputPageModal({ callback, name, outClick, keyForSave = "InputPage2", txt }) {
+    return _jsx(ModalWrapper, { outClick: outClick, keyForSave: keyForSave, size: { height: 150, width: 300 }, position: { y: -150, x: -250 }, children: InputPage({ callback, name, txt }) });
+}
+export function InputFileModal({ callback, name, outClick, keyForSave = "InputFile2" }) {
+    return _jsx(ModalWrapper, { outClick: outClick, keyForSave: keyForSave, size: { height: 150, width: 300 }, position: { y: -150, x: -250 }, children: InputFile({ callback, name }) });
+}
+export function InputFile({ callback, name = "" }) {
+    let file = null;
+    return _jsxs("div", { className: "maxSize", style: { padding: 20, }, children: [_jsx("label", { children: name }), _jsx("input", { type: "file", style: { width: "100%" }, onChange: (e) => {
+                    file = e.target.files?.[0] ?? null;
+                } }), _jsx("div", { style: { marginTop: 20 }, className: "msTradeAlt msTradeActive", onClick: () => { callback(file); }, children: "send" })] });
+}
+export function PageModalFree({ outClick, children, zIndex, size = { height: 150, width: 300 }, keyForSave = "PageModalFree2" }) {
+    return _jsx(ModalWrapper, { outClick: outClick, keyForSave: keyForSave, size: size, zIndex: zIndex, children: children });
+}

package/lib/common/src/components/Menu/RightMenu.d.ts

@@ -0,0 +1,22 @@
+import React, { JSX } from 'react';
+type MenuElement = {
+    label: string;
+    subMenuContent: () => JSX.Element;
+};
+type DropdownMenuProps = {
+    elements: MenuElement[];
+    style?: React.CSSProperties;
+    position?: 'left' | 'right';
+    position2?: 'top' | 'bottom';
+};
+export declare function DropdownMenu({ elements, style, position: initialPosition, position2: initialPos2 }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function MenuRightApi(): {
+    set(array: MenuElement[]): void;
+    delete(array: MenuElement[]): void;
+    get(): MenuElement[];
+    Render({ style }: {
+        style?: React.CSSProperties;
+    }): import("react/jsx-runtime").JSX.Element;
+};
+export declare function DropdownMenuTest(): import("react/jsx-runtime").JSX.Element;
+export {};