lingo3d/lib/editor/component/ResizableRows.js

Lingo3D is a React/Vue 3d game development framework that ships with a complete visual editor

import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
import { useMemo, useState } from "preact/hooks";
import { APPBAR_HEIGHT } from "../../globals";
import useResizeObserver from "../hooks/useResizeObserver";
import PanDiv from "./PanDiv";
const ResizableRows = ({ children }) => {
    const [elRef, { height }] = useResizeObserver();
    const childrenFiltered = children.filter(Boolean);
    const sizeOffsets = useMemo(() => ({}), []);
    const [, setRefresh] = useState({});
    return (_jsx("div", { ref: elRef, className: "lingo3d-absfull lingo3d-flexcol", children: childrenFiltered.map((child, i) => (_jsxs("div", { style: {
                width: "100%",
                height: height / childrenFiltered.length +
                    (sizeOffsets[i] ?? 0),
                minHeight: APPBAR_HEIGHT
            }, children: [child, i < childrenFiltered.length - 1 && (_jsx(PanDiv, { style: {
                        width: "100%",
                        height: 6,
                        cursor: "row-resize",
                        position: "absolute",
                        bottom: 0
                    }, onPan: ({ deltaY }) => {
                        sizeOffsets[i] ??= 0;
                        sizeOffsets[i + 1] ??= 0;
                        sizeOffsets[i] += deltaY;
                        sizeOffsets[i + 1] -= deltaY;
                        setRefresh({});
                    } }))] }, i))) }));
};
export default ResizableRows;
//# sourceMappingURL=ResizableRows.js.map