@frontify/fondue
Version:
Design system of Frontify
110 lines (109 loc) • 4.57 kB
JavaScript
import { jsx as a, jsxs as p } from "react/jsx-runtime";
import { useTableState as D, TableHeader as A, Column as O, TableBody as R, Row as E, Cell as H } from "@react-stately/table";
import { useState as z, useRef as F } from "react";
import { TableCellType as m, TableCell as $ } from "./TableCell.es.js";
import { TableColumnHeaderType as g, TableColumnHeader as j } from "./TableColumnHeader.es.js";
import { TableHeaderRow as L } from "./TableHeaderRow.es.js";
import { TableRow as _ } from "./TableRow.es.js";
var B = /* @__PURE__ */ ((e) => (e.NoSelect = "none", e.SingleSelect = "single", e.MultiSelect = "multiple", e))(B || {}), I = /* @__PURE__ */ ((e) => (e.Ascending = "ascending", e.Descending = "descending", e))(I || {});
const K = "descending", P = (e, n, d = !1) => ({
children: [
/* @__PURE__ */ a(A, { columns: e, children: (t) => {
const s = !!(t.sortable && d);
return /* @__PURE__ */ a(O, { allowsSorting: s, align: t.align, children: t.titleNode ?? t.name });
} }, "table-header"),
/* @__PURE__ */ a(R, { items: n, children: (t) => /* @__PURE__ */ a(E, { children: (s) => /* @__PURE__ */ a(
H,
{
"aria-label": t.cells[s].ariaLabel,
children: t.cells[s].value
},
`${t.key}-${s}`
) }) }, "table-body")
]
}), U = (e, n) => e.find(({ key: d }) => d === n) || null, q = (e) => e.map(({ key: n }) => n), G = ({
columns: e,
rows: n,
onSelectionChange: d,
selectionMode: t = "none",
onSortChange: s,
selectedRowIds: c = [],
ariaLabel: w = "Table"
}) => {
const y = t === "single" || t === "multiple", [{ sortedColumnKey: b, sortOrder: k }, u] = z({
sortedColumnKey: void 0,
sortOrder: void 0
}), T = (l, r) => {
u({
sortedColumnKey: l,
sortOrder: b !== l ? K : r === "ascending" ? "descending" : "ascending"
}), s == null || s(l, r);
}, f = q(n), C = F(null), S = P(e, n, !!s), v = D({
...S,
selectionMode: t,
showSelectionCheckboxes: y
}), { collection: h } = v;
return /* @__PURE__ */ a("div", { className: "tw-w-full tw-max-h-96 sm:tw-max-h-full", children: /* @__PURE__ */ p(
"table",
{
"aria-label": w,
ref: C,
className: "tw-border-collapse tw-table-auto tw-w-full tw-min-w-max tw-text-left dark:tw-bg-black-100 dark:tw-text-black-20",
children: [
/* @__PURE__ */ a("thead", { children: h.headerRows.map((l) => /* @__PURE__ */ p(L, { children: [
[...l.childNodes].map((r) => {
var o;
const i = r.props.isSelectionCell ? g.SelectAll : g.Default;
return /* @__PURE__ */ a(
j,
{
column: r,
type: i,
rowIds: f,
sortDirection: k,
selectionMode: t,
isColumnSorted: b === r.key,
handleSortChange: T,
setSelectedRows: d,
align: (o = r.props) == null ? void 0 : o.align
},
r.key
);
}),
/* @__PURE__ */ a("td", {})
] }, l.key)) }),
/* @__PURE__ */ a("tbody", { className: "tw-relative tw-z-[-1] sm:tw-z-auto", children: [...h.body.childNodes].map((l) => {
const r = U(n, l.key);
return /* @__PURE__ */ p(_, { isSelected: c.includes(l.key), children: [
[...l.childNodes].map((i) => {
const o = e.find(
({ key: x }) => x === String(i.key).split(`${l.key}-`)[1]
), N = i.props.isSelectionCell ? m.Checkbox : m.Default;
return /* @__PURE__ */ a(
$,
{
cell: i,
selectionMode: t,
type: N,
isChecked: c.includes(l.key),
selectedRows: c,
setSelectedRows: d,
align: o == null ? void 0 : o.align
},
i.key
);
}),
(r == null ? void 0 : r.actionElements) && /* @__PURE__ */ a("td", { className: "tw-sticky tw-right-0 tw-z-10", "data-test-id": "table-actions", children: /* @__PURE__ */ a("div", { className: "tw-float-right hover:tw-bg-gradient-to-r hover:tw-from-transparent hover:tw-to-black-0 dark:hover:tw-to-black-95 tw-py-4 tw-pr-8 tw-pl-4", children: r.actionElements }) })
] }, l.key);
}) })
]
}
) });
};
G.displayName = "FondueTable";
export {
B as SelectionMode,
I as SortDirection,
G as Table
};
//# sourceMappingURL=Table.es.js.map