@payfit/unity-components
Version:
126 lines (125 loc) • 4.98 kB
JavaScript
import { CircularIconButton as e } from "../icon-button/CircularIconButton.js";
import { TablePagination as t } from "../table/parts/TablePagination.js";
import { Table as n, TableRoot as r } from "../table/Table.js";
import { TableBody as i } from "../table/parts/TableBody.js";
import { TableColumnHeader as a } from "../table/parts/TableColumnHeader.js";
import { TableEmptyStateError as o, TableEmptyStateLoading as s, TableEmptyStateNoData as c, TableNoSearchResults as l } from "../table/parts/TableEmptyState.js";
import { TableHeader as u } from "../table/parts/TableHeader.js";
import { getPaginationTable as d } from "./DataTablePagination.js";
import { ColumnSortHeader as f, isSortableHeader as p } from "./parts/ColumnSortHeader.js";
import { useMemo as m, useRef as h } from "react";
import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
import { useId as y } from "react-aria/useId";
import { flexRender as b } from "@tanstack/react-table";
import { useSelector as x } from "@tanstack/react-store";
//#region src/components/data-table/DataTable.tsx
var S = ({ children: t, columnNameId: n, helperText: r }) => r === void 0 ? /* @__PURE__ */ _(g, { children: t }) : /* @__PURE__ */ v("div", {
className: "uy:flex uy:gap-50 uy:items-center",
children: [t, /* @__PURE__ */ _(e, {
"aria-labelledby": n,
icon: "QuestionOutlined",
title: r,
color: "content.neutral.lowest"
})]
}), C = ({ table: e, tableRef: n, pagination: r, onPageChange: i, onPageHover: a, onPageSizeChange: o }) => {
let s = e.atoms.pagination, { pageIndex: c, pageSize: l } = x(m(() => ({
get: () => s.get(),
subscribe: (e) => s.subscribe((t) => {
n.current?.scrollToTop(), e(t);
})
}), [s, n]));
return e.getPageCount() <= 0 ? null : /* @__PURE__ */ _(t, {
pageCount: e.getPageCount(),
rowCount: e.getRowCount(),
currentPage: c + 1,
rowsPerPage: l,
pageSizeOptions: r.pageSizeOptions,
onPageChange: (t, n, r) => {
e.setPageIndex(t - 1), i?.(t - 1, n, r);
},
onPageHover: (e) => {
a?.(e);
},
onPageSizeChange: (t) => {
e.setPageSize(t), o?.(t);
},
itemLabel: r.labels?.itemLabel
});
};
function w({ table: e, isLoading: t, error: m, emptyState: g, loadingState: x, errorState: w, pagination: T, minRows: E, maxRows: D, onPageChange: O, onPageHover: k, onPageSizeChange: A, children: j, enableVirtualization: M, estimatedRowHeight: N, overscan: P, onErrorButtonPress: F, onNoDataButtonPress: I, noDataDescription: L, onNoSearchResultsButtonPress: R, ...z }) {
let B = h(null), V = y(), H = d(e), U = {
label: z.label,
description: z.description,
isHorizontalScrollEnabled: z.isHorizontalScrollEnabled,
layout: z.layout
}, W = () => {
if (t) return x ?? /* @__PURE__ */ _(s, {});
if (m) return w ?? /* @__PURE__ */ _(o, { onButtonPress: F });
}, G = () => {
let t = e.state, n = t.globalFilter !== void 0 && t.globalFilter !== "", r = t.columnFilters !== void 0 && t.columnFilters.length > 0;
return n || r;
}, K = () => t || m ? W() : e.getRowModel().rows.length === 0 ? G() && R ? /* @__PURE__ */ _(l, { onButtonPress: R }) : g ?? /* @__PURE__ */ _(c, {
onButtonPress: I,
description: L
}) : g;
return /* @__PURE__ */ v(r, {
minRows: E,
maxRows: D,
children: [/* @__PURE__ */ v(n, {
ref: B,
...U,
enableVirtualization: M,
estimatedRowHeight: N,
overscan: P,
children: [/* @__PURE__ */ _(u, { children: e.getHeaderGroups().map((t) => {
let n = 0;
return /* @__PURE__ */ _("tr", { children: t.headers.map((r) => {
let i = n;
if (n += r.colSpan, r.rowSpan === 0) return null;
let o = !r.isPlaceholder || r.rowSpan > 1, s = `${V}-column-name-${r.column.id}`, c = r.column.columnDef.meta, l = p(r);
return /* @__PURE__ */ _(a, {
colIndex: i,
rowIndex: t.depth,
colSpan: r.colSpan,
rowSpan: r.rowSpan,
scope: r.colSpan > 1 ? "colgroup" : "col",
isFocusable: c?.isFocusable,
className: c?.headerClassName,
children: o && e.getRowModel().rows.length > 0 && l ? /* @__PURE__ */ _(f, {
header: r,
children: /* @__PURE__ */ _(S, {
columnNameId: s,
helperText: c?.helperText,
children: /* @__PURE__ */ _("span", {
id: s,
children: b(r.column.columnDef.header, r.getContext())
})
})
}) : o ? /* @__PURE__ */ _(S, {
columnNameId: s,
helperText: c?.helperText,
children: /* @__PURE__ */ _("span", {
id: s,
children: b(r.column.columnDef.header, r.getContext())
})
}) : null
}, r.id);
}) }, t.id);
}) }), /* @__PURE__ */ _(i, {
renderEmptyState: K,
renderDataState: W,
children: !t && !m && e.getRowModel().rows.map(j)
})]
}), H !== void 0 && /* @__PURE__ */ _(C, {
table: H,
tableRef: B,
pagination: T ?? {},
onPageChange: O,
onPageHover: k,
onPageSizeChange: A
})]
});
}
w.displayName = "DataTable";
//#endregion
export { w as DataTable };