@1771technologies/lytenyte-pro/dist/column-manager/leaf.js

Blazingly fast headless React data grid with 100s of features.

import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef, useCallback, useMemo } from "react";
import { ColumnItemContext } from "./context.js";
import { TreeLeaf } from "../tree-view/leaf.js";
import { useGrid } from "../grid-provider/use-grid.js";
import { useColumnsFromContext } from "./use-columns-from-context.js";
import { dragState, DropWrap } from "@1771technologies/lytenyte-core/yinternal";
export const Leaf = forwardRef(function ColumnManagerLeaf({ item, ...props }, forwarded) {
    const context = useMemo(() => {
        return { item: item };
    }, [item]);
    const grid = useGrid();
    const id = grid.state.gridId.useValue();
    const accepted = `${id}-columns`;
    const base = grid.state.columnBase.useValue();
    const columns = useColumnsFromContext(item);
    const isVisible = useMemo(() => {
        const allVisible = columns.every((c) => !(c.hide ?? base.hide));
        return allVisible;
    }, [base.hide, columns]);
    const toggle = useCallback((s) => {
        const next = s ?? isVisible;
        grid.api.columnUpdate(Object.fromEntries(columns.map((c) => [c.id, { hide: next }])));
    }, [columns, grid.api, isVisible]);
    return (_jsx(ColumnItemContext.Provider, { value: context, children: _jsx(DropWrap, { accepted: [accepted], onEnter: (el) => {
                const data = dragState.data
                    .get()
                    ?.siteLocalData?.[accepted]?.at(-1);
                if (!data)
                    return;
                const columns = [item.data];
                const move = data.id;
                if (columns.some((c) => c.id === move))
                    return;
                const allColumns = grid.state.columns.get();
                const moveIndex = allColumns.findIndex((c) => c.id === move);
                if (moveIndex === -1)
                    return;
                const thisIndex = allColumns.findIndex((c) => c.id === columns[0].id);
                const isBefore = thisIndex > moveIndex;
                // Flipped since our source is the one moving
                if (!isBefore) {
                    el.setAttribute("data-ln-is-before", "true");
                }
                else {
                    el.setAttribute("data-ln-is-after", "true");
                }
            }, onLeave: (el) => {
                el.removeAttribute("data-ln-is-before");
                el.removeAttribute("data-ln-is-after");
            }, as: _jsx(TreeLeaf, { ...props, itemId: item.data.id, ref: forwarded, onKeyDown: (ev) => {
                    props.onKeyDown?.(ev);
                    if (ev.key === " ") {
                        toggle();
                        ev.preventDefault();
                    }
                }, "data-ln-column-manager-leaf": true, "data-ln-column-id": item.data.id }) }) }));
});