@1771technologies/lytenyte-pro/dist/grid-box/use-row-group-box-items.js

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

import { useMemo } from "react";
import { useEvent } from "@1771technologies/lytenyte-core/yinternal";
export function useRowGroupBoxItems({ grid, orientation, hideColumnOnGroup = true, includeGroupables = false, placeholder, }) {
    const rowGroupModel = grid.state.rowGroupModel.useValue();
    const gridId = grid.state.gridId.useValue();
    const columns = grid.state.columns.useValue();
    const base = grid.state.columnBase.useValue();
    const items = useMemo(() => {
        const groupId = `${gridId}-group`;
        const groupables = (includeGroupables
            ? columns.map((c) => {
                const canGroup = c.uiHints?.rowGroupable ?? base.uiHints?.rowGroupable;
                if (!canGroup)
                    return null;
                if (rowGroupModel.find((x) => typeof x === "string" && x === c.id))
                    return null;
                return c;
            })
            : [])
            .filter((c) => c != null)
            .map((c, i) => {
            return {
                data: c.id,
                dragData: { [groupId]: c.id },
                draggable: false,
                source: "groups",
                id: c.id,
                index: i + rowGroupModel.length,
                label: c.name ?? c.id,
                onAction: () => { },
                onDelete: () => { },
                onDrop: () => { },
                active: false,
            };
        });
        return rowGroupModel
            .map((c, i) => {
            const onDelete = () => {
                grid.state.rowGroupModel.set((prev) => prev.filter((x) => x !== c));
                if (typeof c === "string")
                    grid.api.columnUpdate({ [c]: { hide: false } });
            };
            const onDrop = (p) => {
                const target = c;
                const src = p.state.siteLocalData?.[groupId];
                const overIndex = rowGroupModel.findIndex((x) => x === c);
                const dragIndex = rowGroupModel.findIndex((x) => x === src);
                const isBefore = overIndex < dragIndex;
                if (overIndex === dragIndex)
                    return;
                const srcIndex = rowGroupModel.findIndex((x) => {
                    if (typeof src !== typeof x)
                        return;
                    const cid = typeof src === "string" ? src : src.id;
                    const xid = typeof x === "string" ? x : x.id;
                    return cid === xid;
                });
                const targetIndex = rowGroupModel.indexOf(target);
                // This is an external
                if (srcIndex === -1) {
                    grid.state.rowGroupModel.set((prev) => {
                        const next = [...prev];
                        next.splice(isBefore ? targetIndex : targetIndex + 1, 0, src);
                        return next;
                    });
                    if (typeof src === "string" && hideColumnOnGroup) {
                        grid.api.columnUpdate({ [src]: { hide: true } });
                    }
                }
                else {
                    grid.state.rowGroupModel.set((prev) => {
                        const next = [...prev];
                        next.splice(srcIndex, 1);
                        const targetIndex = next.indexOf(target);
                        next.splice(isBefore ? targetIndex : targetIndex + 1, 0, src);
                        return next;
                    });
                }
            };
            if (typeof c === "string") {
                const column = grid.api.columnById(c);
                if (!column)
                    return null;
                return {
                    dragData: { [groupId]: c },
                    data: c,
                    draggable: true,
                    source: "groups",
                    id: c,
                    index: i,
                    label: column.name ?? column.id,
                    onAction: () => { },
                    onDelete: onDelete,
                    onDrop: onDrop,
                    dragPlaceholder: placeholder,
                    active: true,
                };
            }
            else {
                return {
                    dragData: { [groupId]: c },
                    data: c,
                    draggable: true,
                    id: c.id,
                    source: "groups",
                    index: i,
                    label: c.name ?? c.id,
                    onAction: () => { },
                    onDelete: onDelete,
                    onDrop,
                    active: true,
                    dragPlaceholder: placeholder,
                };
            }
        })
            .filter((c) => c !== null)
            .concat(groupables);
    }, [
        base.uiHints?.rowGroupable,
        columns,
        grid.api,
        grid.state.rowGroupModel,
        gridId,
        hideColumnOnGroup,
        includeGroupables,
        placeholder,
        rowGroupModel,
    ]);
    const onRootDrop = useEvent((p) => {
        const groupId = `${gridId}-group`;
        const c = p.state.siteLocalData?.[groupId];
        if (!c)
            return;
        // Is the item in the model.
        const currentIndex = rowGroupModel.findIndex((x) => {
            if (typeof c !== typeof x)
                return;
            const cid = typeof c === "string" ? c : c.id;
            const xid = typeof x === "string" ? x : x.id;
            return cid === xid;
        });
        // We failed to find the item, so add it to the end. If
        if (currentIndex === -1) {
            grid.state.rowGroupModel.set((prev) => [...prev, c]);
            if (typeof c === "string" && hideColumnOnGroup) {
                grid.api.columnUpdate({ [c]: { hide: true } });
            }
        }
        else {
            grid.state.rowGroupModel.set((prev) => {
                const next = [...prev];
                next.splice(currentIndex, 1);
                next.push(c);
                return next;
            });
        }
    });
    return useMemo(() => {
        return {
            rootProps: {
                accepted: [`${gridId}-group`],
                onRootDrop,
                orientation,
                grid,
            },
            items,
        };
    }, [grid, gridId, items, onRootDrop, orientation]);
}