@1771technologies/lytenyte-pro
Version:
Blazingly fast headless React data grid with 100s of features.
68 lines (67 loc) • 4.97 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useMemo } from "react";
import { TreeView } from "../tree-view/index.js";
import { Checkbox } from "../checkbox/checkbox.js";
import { computePathMatrix } from "@1771technologies/lytenyte-shared";
export function ColumnManager({ columns: provided, base, onColumnsChange, endElement, }) {
const nonAdjacentSplit = useMemo(() => {
const paths = computePathMatrix(provided);
const adjusted = [];
for (let i = 0; i < provided.length; i++) {
const col = provided[i];
const path = paths[i];
const group = path
.filter((x) => x != null)
.map((x) => x?.idOccurrence.split("#").slice(-2).join("#"))
.flat();
if (group.length)
adjusted.push({ ...col, groupPath: group });
else
adjusted.push(col);
}
return adjusted;
}, [provided]);
const items = useMemo(() => {
return nonAdjacentSplit.map((x) => ({ id: x.id, path: x.groupPath ?? [], name: x.name, column: x }));
}, [nonAdjacentSplit]);
return (_jsx(TreeView, { items: items, rowSelectionEnabled: false, draggable: true, rowHeight: 30, rowSelectAllShow: false, defaultExpansion: true, onItemsReordered: (x) => {
const columns = x.map((x) => provided.find((p) => p.id === x.column.id));
onColumnsChange(columns);
}, children: ({ row, leafs, toggle, dragProps, isOver, isBefore }) => {
const depth = row.depth;
const items = leafs();
const end = endElement?.({ columns: items.map((x) => x.column), row });
const isSelected = items.every((x) => !(x.column.hide ?? base?.hide));
const isIndeterminate = !isSelected && items.some((x) => !(x.column.hide ?? base?.hide));
const draggable = !!dragProps.draggable;
const checkbox = (_jsx(Checkbox, { checked: isSelected, indeterminate: isIndeterminate, onChange: () => {
if (isSelected) {
onColumnsChange(provided.map((x) => {
const c = items.find((c) => x.id === c.column.id);
if (!c)
return x;
const original = provided.find((x) => x.id === c.id);
return { ...original, hide: true };
}));
}
else {
onColumnsChange(provided.map((x) => {
const c = items.find((c) => x.id === c.column.id);
if (!c)
return x;
const original = provided.find((x) => x.id === c.id);
return { ...original, hide: false };
}));
}
} }));
if (row.kind === "branch")
return (_jsxs("div", { "data-ln-tree-view-cell": row.kind, "data-ln-tree-view-cell-expanded": row.kind === "branch" && row.expanded, "data-ln-tree-view-cell-expandable": row.kind === "branch" ? row.expandable : undefined, "data-ln-tree-over": isOver, "data-ln-tree-before": isBefore, style: { "--ln-row-depth": depth }, ...dragProps, children: [row.kind === "branch" && row.expandable && (_jsx("button", { "data-ln-tree-view-cell-expander": true, "aria-label": "toggle the row group expansion state", onClick: () => toggle(), children: !row.loadingGroup && _jsx(CaretRight, {}) })), draggable && (_jsx("div", { style: { cursor: "grab" }, children: _jsx(DragDots, {}) })), checkbox, _jsx("div", { style: { flex: "1" }, children: row.key?.split("#").slice(0, -1).join("") }), end] }));
return (_jsxs("div", { "data-ln-tree-view-cell": row.kind, "data-ln-tree-over": isOver, "data-ln-tree-before": isBefore, style: { "--ln-row-depth": depth }, ...dragProps, children: [draggable && (_jsx("div", { style: { cursor: "grab" }, children: _jsx(DragDots, {}) })), checkbox, _jsx("div", { style: { flex: "1" }, children: row.data.name ?? row.data.id }), end] }));
} }));
}
function CaretRight() {
return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentcolor", viewBox: "0 0 256 256", children: _jsx("path", { d: "M181.66,133.66l-80,80A8,8,0,0,1,88,208V48a8,8,0,0,1,13.66-5.66l80,80A8,8,0,0,1,181.66,133.66Z" }) }));
}
function DragDots() {
return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "currentcolor", viewBox: "0 0 256 256", children: _jsx("path", { d: "M104,60A12,12,0,1,1,92,48,12,12,0,0,1,104,60Zm60,12a12,12,0,1,0-12-12A12,12,0,0,0,164,72ZM92,116a12,12,0,1,0,12,12A12,12,0,0,0,92,116Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,116ZM92,184a12,12,0,1,0,12,12A12,12,0,0,0,92,184Zm72,0a12,12,0,1,0,12,12A12,12,0,0,0,164,184Z" }) }));
}