@1771technologies/lytenyte-pro
Version:
Blazingly fast headless React data grid with 100s of features.
79 lines (78 loc) • 2.87 kB
JavaScript
import { useMemo } from "react";
import { useEvent } from "@1771technologies/lytenyte-core/yinternal";
export function useColumnBoxItems({ grid, onRootDrop, onDrop, onDelete, onAction, orientation, draggable = true, itemFilter, placeholder, }) {
const columns = grid.state.columns.useValue();
const base = grid.state.columnBase.useValue();
const gridId = grid.state.gridId.useValue();
const items = useMemo(() => {
const groupId = `${gridId}-group`;
const aggId = `${gridId}-agg`;
const columnId = `${gridId}-column`;
return columns
.filter((c) => {
return itemFilter ? itemFilter(c) : true;
})
.map((c, i) => {
const canGroup = c.uiHints?.rowGroupable ?? base.uiHints?.rowGroupable ?? false;
const canAgg = Boolean(c.uiHints?.aggDefault ??
c.uiHints?.aggDefault?.length ??
base.uiHints?.aggDefault ??
base.uiHints?.aggsAllowed?.length);
const data = {
[columnId]: c,
};
if (canGroup)
data[groupId] = c.id;
if (canAgg)
data[aggId] = c;
return {
label: c.name ?? c.id,
id: c.id,
index: i,
source: "columns",
draggable,
data: c,
dragPlaceholder: placeholder,
dragData: data,
onAction: (el) => onAction?.({ column: c, el }),
onDelete: (el) => onDelete?.({ column: c, el }),
onDrop: (p) => {
const src = p.state.siteLocalData?.[columnId];
const target = c;
const dragIndex = columns.findIndex((x) => x.id === src.id);
const overIndex = columns.findIndex((x) => x.id === c.id);
const isBefore = overIndex < dragIndex;
if (overIndex === dragIndex)
return;
onDrop?.({ src, target, isBefore });
},
};
});
}, [
base.uiHints?.aggDefault,
base.uiHints?.aggsAllowed?.length,
base.uiHints?.rowGroupable,
columns,
draggable,
gridId,
itemFilter,
onAction,
onDelete,
onDrop,
placeholder,
]);
const onRootDropEv = useEvent((p) => {
const columnId = `${gridId}-column`;
const src = p.state.siteLocalData?.[columnId];
onRootDrop?.(src);
});
return useMemo(() => ({
rootProps: {
accepted: [`${gridId}-column`],
orientation: orientation,
onRootDrop: onRootDropEv,
grid,
},
items,
}), [grid, gridId, items, onRootDropEv, orientation]);
}