laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
449 lines (448 loc) • 16.1 kB
JavaScript
"use client";
import { jsx as t, jsxs as b } from "react/jsx-runtime";
import { useReactTable as ue, flexRender as J } from "../../node_modules/@tanstack/react-table/build/lib/index.js";
import { useState as x, useRef as _, useMemo as de, useEffect as M } from "react";
import { cn as fe } from "../../lib/utils.js";
import { createCustomFilterFns as he, ELogicalFilterOperator as xe, debounce as Ce, createMultiValueFilterFn as be, updatePageSizeFromContainer as se } from "./data-table.service.js";
import { Pagination as we, PaginationContent as re, PaginationItem as I, PaginationFirst as Ie, PaginationPrevious as Re, PaginationLink as ze, PaginationNext as Ne, PaginationLast as Me } from "./pagination.js";
import { Checkbox as K } from "./checkbox.js";
import { Input as ye } from "./input.js";
import { ScrollArea as q, ScrollBar as F } from "./scroll-area.js";
import { AppMultipleSelectDropdown as ke } from "./app-multiple-select-dropdown.js";
import { Table as Pe, TableHeader as He, TableRow as y, TableHead as De, TableBody as Fe, TableCell as V } from "./table.js";
import { Skeleton as Ve } from "./skeleton.js";
import { getPaginationRowModel as je, getFilteredRowModel as Le, getSortedRowModel as Te, getCoreRowModel as Ae } from "../../node_modules/@tanstack/table-core/build/lib/index.js";
function pe({
columns: R,
data: j,
loading: Q = !1,
emptyComponent: U,
className: X,
rowSelection: Y = {},
onRowSelectionChange: L,
checkable: z = !1,
onCheckedRowsChange: k,
notFoundMessage: Z = "Nessun risultato trovato.",
searchBar: h = void 0,
dropdownFilters: u = void 0,
totalItems: P = void 0,
datatableSizes: s = {
rowHeight: 32.5,
// default table row height in pixels
headerHeight: 40,
// default table header height in pixels
containerHeight: 600
// default container height in pixels
},
paginationPlaceholders: m = void 0,
serverOptions: g = void 0,
setServerOptions: i = void 0
}) {
var S, E;
const [p, B] = x([]), [v, O] = x([]), [ee, le] = x({}), [r, te] = x(""), [ae, ne] = x({}), T = L ? Y : ae, ie = L || ne, [N, ge] = x({}), d = !!g, [w, H] = x({
pageIndex: 0,
pageSize: 10
}), [oe, A] = x(0), D = _(null), $ = _(void 0), ce = de(() => z ? [
{
id: "select",
header: ({ table: e }) => /* @__PURE__ */ t(
K,
{
checked: e.getIsAllPageRowsSelected(),
onCheckedChange: (l) => e.toggleAllPageRowsSelected(!!l),
"aria-label": "Seleziona tutti"
}
),
cell: ({ row: e }) => /* @__PURE__ */ t("div", { className: "text-center", children: /* @__PURE__ */ t(
K,
{
checked: e.getIsSelected(),
onCheckedChange: (l) => e.toggleSelected(!!l),
"aria-label": "Seleziona riga"
}
) }),
enableSorting: !1,
enableHiding: !1
},
...R
] : R, [R, z]).map((e) => {
const l = u == null ? void 0 : u.find(
(n) => n.column === (e == null ? void 0 : e.accessorKey)
);
return {
...e,
filterFn: l != null && l.filterFn ? l.column : "multiValue"
};
}), me = {
data: j,
columns: ce,
getCoreRowModel: Ae(),
onSortingChange: B,
getSortedRowModel: Te(),
onColumnVisibilityChange: le,
onRowSelectionChange: ie,
getFilteredRowModel: Le(),
globalFilterFn: (e, l, n) => d || !n ? !0 : (h == null ? void 0 : h.columns.some((o) => {
const c = e.getValue(o);
return String(c).toLowerCase().includes(n.toLowerCase());
})) ?? !1,
filterFns: {
multiValue: (e, l, n) => be(
e,
l,
n,
u,
g
),
...he(u ?? [], g)
},
onPaginationChange: (e) => {
d ? typeof e == "object" && i && i((l) => ({
...l,
pagination: {
pageIndex: e.pageIndex,
pageSize: e.pageSize
}
})) : H(e);
},
getPaginationRowModel: je(),
manualPagination: d,
pageCount: oe,
state: {
sorting: p,
columnFilters: v,
columnVisibility: ee,
rowSelection: T,
globalFilter: r,
pagination: (g == null ? void 0 : g.pagination) ?? w
}
}, a = ue(me);
M(() => {
let e;
if (h && r && (e || (e = {}), e.searchbarFilters = {
value: r,
columns: h.columns
}), u && Object.keys(N).length > 0) {
const c = {};
for (const f of u) {
const C = N[f.column];
C && C.length > 0 && (c[f.column] = {
column: f.column,
value: C,
logic: f.innerFiltersMode || xe.OR
});
}
Object.keys(c).length > 0 && (e || (e = {}), e.dropdownFilters = c);
}
const l = $.current, n = e;
JSON.stringify(l ?? {}) !== JSON.stringify(n ?? {}) && i && ($.current = n, i((c) => ({
...c,
pagination: {
pageIndex: 0,
pageSize: (g == null ? void 0 : g.pagination.pageSize) ?? 10
},
filters: n
})));
}, [
u,
N,
h,
r,
g,
i
]);
const G = a.getFilteredRowModel();
return M(() => {
var e;
if (d)
A(
Math.ceil(
(P ?? 0) / (((e = g.pagination) == null ? void 0 : e.pageSize) || w.pageSize || 10)
)
);
else {
const l = G.rows.length;
A(Math.ceil(l / w.pageSize));
}
}, [
d,
P,
g == null ? void 0 : g.pagination,
a,
G,
w.pageSize
]), M(() => {
const e = Ce(() => {
const l = D.current;
l && se(l, {
rowHeight: s.rowHeight,
headerHeight: s.headerHeight,
containerHeight: s.containerHeight,
onPageChange: d ? (n, o) => {
i == null || i((c) => ({
...c,
pagination: { pageIndex: n, pageSize: o }
}));
} : (n, o) => {
H({ pageIndex: n, pageSize: o });
},
setPagination: (n) => {
const o = typeof n == "function" ? n({ pageIndex: 0, pageSize: 10 }) : n;
d ? i == null || i((c) => ({
...c,
pagination: {
...c.pagination,
pageIndex: o.pageIndex,
pageSize: o.pageSize
}
})) : H({
pageIndex: o.pageIndex,
pageSize: o.pageSize
});
}
});
}, 200);
return e(), window.addEventListener("resize", e), () => {
window.removeEventListener("resize", e);
};
}, [
d,
s.containerHeight,
s.headerHeight,
s.rowHeight,
D,
i
// should be stable, but include for clarity
]), M(() => {
if (k && z) {
const e = a.getFilteredSelectedRowModel().rows.map((l) => l.original);
k(e);
}
}, [a, k, z, T]), /* @__PURE__ */ b(
"div",
{
className: fe(
"flex h-full max-h-full min-h-0 w-full max-w-full flex-col gap-2",
X
),
children: [
(h || (u == null ? void 0 : u.length)) && /* @__PURE__ */ b("div", { className: "flex flex-col items-start justify-between gap-2 sm:flex-row sm:items-end", children: [
h && /* @__PURE__ */ t(
ye,
{
iconLeft: "Search",
placeholder: h.placeholder ?? "Cerca...",
value: r,
onChange: (e) => {
te(e.target.value);
},
className: "w-60"
}
),
/* @__PURE__ */ t("div", { className: "flex h-full max-w-full min-w-0 flex-1 items-center", children: u && u.length > 0 && /* @__PURE__ */ b(q, { className: "h-full w-full", children: [
/* @__PURE__ */ t(F, { orientation: "horizontal" }),
/* @__PURE__ */ t("div", { className: "flex w-full max-w-full min-w-0 items-center justify-start gap-2 sm:justify-end", children: u.map((e, l) => {
const n = N[e.column] ?? [];
return /* @__PURE__ */ t(
ke,
{
className: "w-60",
options: e.items,
value: n,
placeholder: e.placeholder,
label: e.label,
onChange: (o) => {
ge((c) => ({
...c,
[e.column]: o
})), O((c) => {
const f = c.filter(
(C) => C.id !== e.column
);
return o.length === 0 ? f : [
...f,
{ id: e.column, value: o }
];
});
}
},
l
);
}) })
] }) })
] }),
/* @__PURE__ */ t(
"div",
{
className: "flex max-h-full min-h-0 max-w-full min-w-0 flex-1",
ref: D,
children: /* @__PURE__ */ b(q, { className: "border-d-border h-full min-h-0 w-full rounded-md border", children: [
/* @__PURE__ */ t(F, { orientation: "horizontal" }),
/* @__PURE__ */ t(F, { orientation: "vertical" }),
/* @__PURE__ */ b(Pe, { children: [
/* @__PURE__ */ t(He, { children: a.getHeaderGroups().map((e) => /* @__PURE__ */ t(y, { children: e.headers.map((l) => /* @__PURE__ */ t(
De,
{
className: `bg-d-secondary sticky top-0 z-10 ${l.column.columnDef.sticky ? "left-0" : ""}`,
children: l.isPlaceholder ? null : J(
l.column.columnDef.header,
l.getContext()
)
},
l.id
)) }, e.id)) }),
/* @__PURE__ */ t(Fe, { children: Q ? Array.from({ length: j.length || 8 }).map((e, l) => /* @__PURE__ */ t(y, { children: a.getHeaderGroups()[0].headers.map((n, o) => /* @__PURE__ */ t(
V,
{
className: `w-full ${n.column.columnDef.sticky ? "bg-d-background sticky left-0 z-10" : ""}`,
children: /* @__PURE__ */ t(Ve, { className: "h-6 w-full" })
},
`skeleton-cell-${l}-${o}`
)) }, `skeleton-row-${l}`)) : (S = a.getRowModel().rows) != null && S.length ? a.getRowModel().rows.map((e) => /* @__PURE__ */ t(
y,
{
"data-state": e.getIsSelected() && "selected",
children: e.getVisibleCells().map((l) => /* @__PURE__ */ t(
V,
{
className: `${l.column.columnDef.sticky ? "bg-d-background sticky left-0 z-10" : ""}`,
children: J(
l.column.columnDef.cell,
l.getContext()
)
},
l.id
))
},
e.id
)) : /* @__PURE__ */ t(y, { children: /* @__PURE__ */ t(
V,
{
colSpan: R.length,
className: "pt-4 text-center",
children: U || Z
}
) }) })
] })
] })
}
),
/* @__PURE__ */ b(we, { className: "h-9", children: [
/* @__PURE__ */ t("div", { className: "flex h-full flex-1 items-center align-middle", children: /* @__PURE__ */ t("div", { className: "text-d-foreground hidden text-sm md:flex", children: Math.min(
((E = g == null ? void 0 : g.pagination) == null ? void 0 : E.pageSize) ?? w.pageSize,
a.getFilteredRowModel().rows.length ?? 9999
) + " / " + (g ? P ?? "missing totalItems" : a.getFilteredRowModel().rows.length) + " " + ((m == null ? void 0 : m.rows) ?? "Righe") }) }),
/* @__PURE__ */ b(re, { children: [
/* @__PURE__ */ t(I, { children: /* @__PURE__ */ t(
Ie,
{
size: "sm",
isDisabled: !a.getCanPreviousPage(),
label: m == null ? void 0 : m.first,
onClick: () => {
d ? i == null || i((e) => ({
...e,
pagination: {
...e.pagination,
pageIndex: 0
}
})) : a.setPageIndex(0);
},
"aria-label": "Go to first page"
}
) }),
/* @__PURE__ */ t(I, { children: /* @__PURE__ */ t(
Re,
{
size: "sm",
isDisabled: !a.getCanPreviousPage(),
label: m == null ? void 0 : m.previous,
onClick: () => {
if (a.getCanPreviousPage())
if (d) {
const e = (g == null ? void 0 : g.pagination.pageIndex) ?? w.pageIndex, l = Math.max(e - 1, 0);
i == null || i((n) => ({
...n,
pagination: {
...n.pagination,
pageIndex: l
}
}));
} else
a.previousPage();
}
}
) }),
(() => {
const e = a.getState().pagination.pageIndex, l = a.getPageCount(), n = 5;
let o = Math.max(
0,
e - Math.floor(n / 2)
), c = o + n;
return c > l && (c = l, o = Math.max(0, c - n)), a.getPageOptions().slice(o, c).map((f, C) => /* @__PURE__ */ t(I, { children: /* @__PURE__ */ t(
ze,
{
size: "icon",
isActive: e === f,
onClick: () => {
if (d) {
if (e === f) return;
i == null || i((W) => ({
...W,
pagination: {
...W.pagination,
pageIndex: f
}
}));
} else
a.setPageIndex(f);
},
children: f + 1
}
) }, C));
})(),
/* @__PURE__ */ t(I, { children: /* @__PURE__ */ t(
Ne,
{
size: "sm",
isDisabled: !a.getCanNextPage(),
label: m == null ? void 0 : m.next,
onClick: () => {
a.getCanNextPage() && (d ? i == null || i((e) => ({
...e,
pagination: {
...e.pagination,
pageIndex: e.pagination.pageIndex + 1
}
})) : a.nextPage());
}
}
) }),
/* @__PURE__ */ t(I, { children: /* @__PURE__ */ t(
Me,
{
size: "sm",
isDisabled: !a.getCanNextPage(),
label: m == null ? void 0 : m.last,
onClick: () => {
d ? i == null || i((e) => ({
...e,
pagination: {
...e.pagination,
pageIndex: a.getPageCount() - 1
}
})) : a.setPageIndex(a.getPageCount() - 1);
},
"aria-label": "Go to last page"
}
) })
] }),
/* @__PURE__ */ t("div", { className: "flex h-full flex-1 items-center justify-end align-middle", children: /* @__PURE__ */ t("div", { className: "text-d-foreground hidden text-sm md:flex", children: (a.getPageCount() ? a.getState().pagination.pageIndex + 1 : 0) + " / " + a.getPageCount() + " " + ((m == null ? void 0 : m.pages) ?? "Pagine") }) })
] })
]
}
);
}
export {
pe as DataTable
};