dapth-payload-plugin-tree-list
Version:
A plugin for Payload CMS that adds a collapsible Tree list view.
127 lines (126 loc) • 6.6 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ChevronIcon, SelectAll, SelectRow } from "@payloadcms/ui";
import * as Collapsible from "@radix-ui/react-collapsible";
import React, { useMemo, useState } from "react";
import { generateTreeList } from "./generateTreeList.js";
const baseClass = "table";
export const Table = ({ columns, data, enableRowSelections, isChildren = 0 })=>{
const [openIndexes, setOpenIndexes] = useState(Array(data.length).fill(false));
const activeColumns = columns?.filter((col)=>col?.active);
const docs = useMemo(()=>isChildren ? data : generateTreeList(data), [
data,
isChildren
]);
if (!activeColumns || activeColumns.length === 0) {
return /*#__PURE__*/ _jsx("div", {
children: "No columns selected"
});
}
const gridRowClass = {
gridTemplateColumns: `46px repeat(${activeColumns.length}, minmax(100px, 1fr)) 46px`
};
const toggleCollapsible = (index)=>{
setOpenIndexes((prev)=>{
const newState = [
...prev
];
newState[index] = !newState[index];
return newState;
});
};
return /*#__PURE__*/ _jsx("div", {
className: `${baseClass} ${baseClass}--tree-list`,
children: /*#__PURE__*/ _jsxs("div", {
className: "table-collapsible",
role: "table",
children: [
/*#__PURE__*/ _jsxs("div", {
className: `table-collapsible__header ${isChildren > 0 ? "sr-only" : ""}`,
role: "row",
style: gridRowClass,
children: [
enableRowSelections ? /*#__PURE__*/ _jsx("div", {
id: "heading-_select",
role: "columnheader",
children: /*#__PURE__*/ _jsx(SelectAll, {})
}) : /*#__PURE__*/ _jsx("div", {
"aria-hidden": "true",
role: "columnheader"
}),
activeColumns.map((col, i)=>/*#__PURE__*/ _jsx("div", {
id: `heading-${col.accessor}`,
role: "columnheader",
children: col.Heading
}, `table-header-${i}`)),
/*#__PURE__*/ _jsx("div", {
"aria-hidden": "true",
role: "columnheader"
})
]
}),
docs && docs.map((row, rowIndex)=>{
const hasChildren = !!row.children?.length;
const lastChild = rowIndex === docs.length - 1;
return /*#__PURE__*/ _jsxs(Collapsible.Root, {
onOpenChange: ()=>toggleCollapsible(row.originalIndex),
open: openIndexes[row.originalIndex],
children: [
/*#__PURE__*/ _jsxs("div", {
className: `row-${row.originalIndex + 1}${(row.originalIndex + 1) % 2 !== 0 ? " odd" : ""}${isChildren ? " table-collapsible__row-child" : ""}${lastChild ? " table-collapsible__row-last" : ""}`,
role: "row",
style: gridRowClass,
children: [
enableRowSelections ? /*#__PURE__*/ _jsx("div", {
className: "cell-_select",
role: "cell",
children: /*#__PURE__*/ _jsx(SelectRow, {
rowData: row
})
}) : /*#__PURE__*/ _jsx("div", {
"aria-hidden": "true",
role: "cell"
}),
activeColumns.map((col, colIndex)=>{
const Component = col.renderedCells[row.originalIndex]?.type || "span";
return /*#__PURE__*/ _jsx("div", {
className: `cell-${col.accessor}`,
role: "cell",
children: /*#__PURE__*/ _jsx(Component, {
...col.renderedCells[row.originalIndex].props
})
}, colIndex);
}),
/*#__PURE__*/ _jsx("div", {
className: "cell-trigger",
role: "cell",
children: /*#__PURE__*/ _jsx(Collapsible.Trigger, {
asChild: true,
children: hasChildren && /*#__PURE__*/ _jsx("button", {
"aria-label": "toggle children elements",
className: "table-collapsible__trigger",
type: "button",
children: /*#__PURE__*/ _jsx(ChevronIcon, {
direction: openIndexes[row.originalIndex] ? "up" : "down"
})
})
})
})
]
}),
/*#__PURE__*/ _jsx(Collapsible.Content, {
children: /*#__PURE__*/ _jsx(Table, {
columns: columns,
data: row.children,
enableRowSelections: enableRowSelections,
isChildren: isChildren + 1
})
})
]
}, `table-cell-${row.originalIndex}`);
})
]
})
});
};
//# sourceMappingURL=Table.js.map