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