@1771technologies/lytenyte-pro 0.9.4 → 1.0.0-beta.1

package/dist/header/resize-handler.js

@@ -0,0 +1,128 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useSlot } from "@1771technologies/lytenyte-react-hooks";
+import {} from "react";
+import { DEFAULT_COLUMN_WIDTH_MAX, DEFAULT_COLUMN_WIDTH_MIN, getColIndexFromEl, getTranslate, sizeFromCoord, } from "@1771technologies/lytenyte-shared";
+import { useGridRoot } from "../context";
+import { getComputedStyle, isHTMLElement } from "@1771technologies/lytenyte-dom-utils";
+import { clamp, getClientX } from "@1771technologies/lytenyte-js-utils";
+export function ResizeHandler({ slot, cell, xPositions, style, className, }) {
+    const width = sizeFromCoord(cell.colStart, xPositions, cell.colSpan);
+    const sx = useGridRoot().grid;
+    const double = sx.state.columnDoubleClickToAutosize.useValue();
+    const defaultProps = {
+        role: "button",
+        "aria-label": `Resize ${cell.column.name ?? cell.column.id}`,
+        tabIndex: -1,
+        onDoubleClick: () => {
+            if (!double)
+                return;
+            sx.api.columnAutosize({
+                columns: [cell.column],
+                includeHeader: true,
+            });
+        },
+        onPointerDown: (ev) => {
+            const vp = sx.state.viewport.get();
+            if (!vp)
+                return;
+            if (ev.pointerType === "mouse" && ev.button !== 0)
+                return;
+            ev.preventDefault();
+            ev.stopPropagation();
+            const isRtl = sx.state.rtl.get();
+            let startX = null;
+            let anim = null;
+            const style = getComputedStyle(vp);
+            const overflow = style.overflowX;
+            vp.style.overflowX = "hidden";
+            const base = sx.state.columnBase.get();
+            const minWidth = cell.column.widthMin ?? base.widthMin ?? DEFAULT_COLUMN_WIDTH_MIN;
+            const maxWidth = cell.column.widthMax ?? base.widthMax ?? DEFAULT_COLUMN_WIDTH_MAX;
+            const maxDelta = maxWidth - width;
+            const minDelta = minWidth - width;
+            const deltaRef = { current: 0 };
+            const controller = new AbortController();
+            document.addEventListener("pointermove", (ev) => {
+                if (startX === null) {
+                    startX = getClientX(ev);
+                    return;
+                }
+                const endAdjust = cell.colPin === "end" ? -1 : 1;
+                const rtlAdjust = isRtl ? -1 : 1;
+                deltaRef.current = clamp(minDelta, (getClientX(ev) - startX) * endAdjust * rtlAdjust, maxDelta);
+                if (anim)
+                    return;
+                anim = requestAnimationFrame(() => {
+                    const id = sx.state.gridId.get();
+                    const query = `[data-ln-row][data-ln-gridid="${id}"] [data-ln-cell="true"][data-ln-colindex="${cell.colStart}"]`;
+                    const headerQuery = `[data-ln-header-row] [data-ln-header-cell="true"][data-ln-header-id="${cell.id}"]`;
+                    const header = vp.querySelector(headerQuery);
+                    if (!header)
+                        return;
+                    const pin = header.getAttribute("data-ln-pin");
+                    const queryAfter = `${query} ~ [data-ln-cell="true"]`;
+                    const headerAfterQuery = `${headerQuery} ~ [data-ln-header-cell="true"]`;
+                    let after;
+                    if (pin !== "end") {
+                        after = Array.from(vp.querySelectorAll(queryAfter)).concat(Array.from(vp.querySelectorAll(headerAfterQuery)));
+                    }
+                    else {
+                        after = [];
+                    }
+                    const q = Array.from(vp.querySelectorAll(query));
+                    q.push(header);
+                    q.forEach((c) => {
+                        if (!isHTMLElement(c))
+                            return;
+                        c.style.removeProperty("min-width");
+                        c.style.removeProperty("max-width");
+                        c.style.width = `${width + deltaRef.current}px`;
+                        if (pin === "end") {
+                            const viewportWidth = sx.state.viewportWidthInner.get();
+                            const spaceLeft = xPositions.at(-1) - xPositions[cell.colStart];
+                            const x = viewportWidth - spaceLeft - deltaRef.current;
+                            c.style.transform = getTranslate(isRtl ? -x : x, 0);
+                        }
+                    });
+                    after.forEach((c) => {
+                        if (!isHTMLElement(c))
+                            return;
+                        const thisPin = c.getAttribute("data-ln-pin");
+                        if (pin === "end" && thisPin === "end") {
+                            return;
+                        }
+                        if (pin !== "end" && thisPin === "end")
+                            return;
+                        const colindex = getColIndexFromEl(c);
+                        const transform = xPositions[colindex] + deltaRef.current;
+                        c.style.transform = getTranslate(transform * (isRtl ? -1 : 1), 0);
+                    });
+                    anim = null;
+                });
+            }, { signal: controller.signal });
+            window.addEventListener("pointerup", () => {
+                if (anim)
+                    cancelAnimationFrame(anim);
+                controller.abort();
+                vp.style.overflowX = overflow;
+                const newWidth = width + deltaRef.current;
+                sx.api.columnResize({ [cell.id]: newWidth });
+            }, { signal: controller.signal });
+        },
+        className,
+        style: {
+            height: "100%",
+            width: "8px",
+            ...style,
+            top: "0px",
+            insetInlineEnd: cell.colPin !== "end" ? "0px" : undefined,
+            insetInlineStart: cell.colPin === "end" ? "0px" : undefined,
+            position: "absolute",
+        },
+    };
+    const edge = useSlot({
+        props: [defaultProps],
+        slot: slot ?? _jsx("div", {}),
+    });
+    return edge;
+}

package/dist/header/use-drag-move.d.ts

@@ -0,0 +1,14 @@
+import type { Grid, HeaderCellFloating, HeaderCellLayout, HeaderGroupCellLayout } from "../+types";
+import { type JSX } from "react";
+import type { InternalAtoms } from "../state/+types";
+export declare function useDragMove<T>(grid: Grid<T> & {
+    internal: InternalAtoms;
+}, cell: HeaderGroupCellLayout | HeaderCellLayout<T> | HeaderCellFloating<T>, onDragStart?: JSX.IntrinsicElements["div"]["onDragStart"]): {
+    draggable?: undefined;
+    onDragStart?: undefined;
+    ref?: undefined;
+} | {
+    draggable: true;
+    onDragStart: (e: import("react").DragEvent<Element>) => void;
+    ref: any;
+};

package/dist/header/use-drag-move.js

@@ -0,0 +1,90 @@
+import { getHoveredColumnIndex, getNearestFocusable, useDraggable, } from "@1771technologies/lytenyte-shared";
+import { useMemo, useRef } from "react";
+export function useDragMove(grid, cell, onDragStart) {
+    const ctx = grid.state;
+    const meta = ctx.columnMeta.useValue();
+    const base = ctx.columnBase.useValue();
+    const columns = useMemo(() => {
+        const columns = [];
+        for (let i = cell.colStart; i < cell.colEnd; i++) {
+            columns.push(meta.columnsVisible[i]);
+        }
+        return columns;
+    }, [cell.colEnd, cell.colStart, meta.columnsVisible]);
+    const isMovable = useMemo(() => {
+        return columns.every((c) => c.uiHints?.movable ?? base.uiHints?.movable ?? false);
+    }, [base.uiHints?.movable, columns]);
+    const swapDirection = useRef(null);
+    const swapIndex = useRef(-1);
+    const swapPrevIndex = useRef(-1);
+    const isForward = useRef(false);
+    const prevPos = useRef(-1);
+    const { dragProps } = useDraggable({
+        getItems: () => ({}),
+        onDragStart: () => {
+            if (cell.kind === "group")
+                grid.internal.draggingHeader.set(cell);
+        },
+        onDragEnd: () => {
+            grid.internal.draggingHeader.set(null);
+        },
+        onDragMove: (p) => {
+            const element = document.elementFromPoint(p.position.x, p.position.y);
+            const vp = grid.state.viewport.get();
+            if (!vp?.contains(element))
+                return;
+            const nearest = getNearestFocusable(element);
+            if (!nearest)
+                return;
+            if (prevPos.current < p.position.x)
+                isForward.current = true;
+            if (prevPos.current > p.position.x)
+                isForward.current = false;
+            prevPos.current = p.position.x;
+            const meta = grid.state.columnMeta.get();
+            const index = getHoveredColumnIndex({
+                viewport: vp,
+                centerCount: meta.columnVisibleCenterCount,
+                startCount: meta.columnVisibleStartCount,
+                endCount: meta.columnVisibleEndCount,
+                clientX: p.position.x,
+                rtl: grid.state.rtl.get(),
+                xPositions: grid.state.xPositions.get(),
+            });
+            if (index == null)
+                return;
+            const first = columns[0];
+            const currentIndex = grid.api.columnIndex(first);
+            const columnIndices = columns.map((c) => grid.api.columnIndex(c));
+            if (columnIndices.includes(index))
+                return;
+            const ignoreMove = swapDirection.current === isForward.current &&
+                swapIndex.current === currentIndex &&
+                index === swapPrevIndex.current;
+            if (currentIndex === index || ignoreMove)
+                return;
+            swapDirection.current = isForward.current;
+            swapIndex.current = index;
+            swapPrevIndex.current = currentIndex;
+            grid.api.columnMove({
+                moveColumns: columns,
+                moveTarget: index,
+                before: currentIndex > index,
+                updatePinState: true,
+            });
+        },
+    });
+    const finalProps = useMemo(() => {
+        if (cell.kind === "floating" || !isMovable)
+            return {};
+        return {
+            draggable: true,
+            onDragStart: (e) => {
+                onDragStart?.(e);
+                dragProps.onDragStart(e);
+            },
+            ref: dragProps.ref,
+        };
+    }, [cell.kind, dragProps, isMovable, onDragStart]);
+    return finalProps;
+}

package/dist/header/use-header-cell-renderer.d.ts

@@ -0,0 +1,4 @@
+import type { HeaderCellFloating, HeaderCellLayout, HeaderCellRendererParams } from "../+types";
+declare function DefaultRenderer(p: HeaderCellRendererParams<any>): import("react/jsx-runtime").JSX.Element;
+export declare function useHeaderCellRenderer<T>(cell: HeaderCellLayout<T> | HeaderCellFloating<T>): import("../+types").HeaderFloatingCellRendererFn<any> | import("../+types").HeaderCellRendererFn<T> | typeof DefaultRenderer;
+export {};

package/dist/header/use-header-cell-renderer.js

@@ -0,0 +1,36 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useGridRoot } from "../context";
+function DefaultRenderer(p) {
+    return _jsx(_Fragment, { children: p.column.id });
+}
+export function useHeaderCellRenderer(cell) {
+    const ctx = useGridRoot().grid;
+    const base = ctx.state.columnBase.useValue();
+    const floatingRenderers = ctx.state.floatingCellRenderers.useValue();
+    const headerRenderers = ctx.state.headerCellRenderers.useValue();
+    return useMemo(() => {
+        if (cell.kind === "cell") {
+            const renderer = cell.column.headerRenderer ?? base.headerRenderer ?? DefaultRenderer;
+            if (typeof renderer === "string")
+                return headerRenderers[renderer] ?? DefaultRenderer;
+            else
+                return renderer;
+        }
+        else {
+            const renderer = cell.column.floatingRenderer ?? base.floatingRenderer ?? DefaultRenderer;
+            if (typeof renderer === "string")
+                return floatingRenderers[renderer] ?? DefaultRenderer;
+            else
+                return renderer;
+        }
+    }, [
+        base.floatingRenderer,
+        base.headerRenderer,
+        cell.column.floatingRenderer,
+        cell.column.headerRenderer,
+        cell.kind,
+        floatingRenderers,
+        headerRenderers,
+    ]);
+}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { Grid } from "./grid.js";
+export { SortManager } from "./sort-manager/sort-manager.js";
+export { FilterTree } from "./filter-tree/filter-tree.js";
+export { ColumnManager } from "./column-manager/column-manager.js";
+export { GridBox } from "./grid-box/grid-box.js";
+export { activateLicense } from "./license.js";