laif-ds
Version:
Design System di Laif con componenti React basati su principi di Atomic Design
503 lines (502 loc) • 20.1 kB
JavaScript
"use client";
import { jsxs as d, jsx as l } from "react/jsx-runtime";
import { useState as f, useEffect as ae, useCallback as S, useMemo as Y, useRef as $e } from "react";
import { useReactTable as Ae, flexRender as _ } from "../../../../node_modules/@tanstack/react-table/build/lib/index.js";
import { useVirtualizer as He } from "../../../../node_modules/@tanstack/react-virtual/dist/esm/index.js";
import { TableSkeleton as Be } from "../../table-skeleton.js";
import { TruncatedText as w } from "./truncated-text.js";
import { useDataCrossTable as Fe } from "./data-cross-table-context.js";
import { cn as k } from "../../../../lib/utils.js";
import { Button as z } from "../../button.js";
import { Icon as q } from "../../icon.js";
import { Popover as Oe, PopoverTrigger as We, PopoverContent as Ue } from "../../popover.js";
import { Table as ce, TableHeader as de, TableRow as G, TableHead as ue, TableBody as Xe, TableCell as Ye } from "../../table.js";
import { getSortedRowModel as _e, getCoreRowModel as qe } from "../../../../node_modules/@tanstack/table-core/build/lib/index.js";
function ut({
crossTableData: I,
filterable: y = !1,
loading: fe = !1,
emptyComponent: me,
className: K,
notFoundMessage: pe = "Nessun risultato trovato.",
cornerHeaderFrom: M = "Da",
cornerHeaderTo: V = "A",
minWidthCell: R = 160,
editable: he = !1,
editMode: ge = !1,
onEditModeChange: L,
onSelectedRow: J,
selectedRow: u,
rowSortAsc: ve = !0
}) {
var le, re;
const [xe, be] = f([]), h = I.headerTop, m = I.headerLeft, v = I.data, [C, P] = f(
(u == null ? void 0 : u.id) ?? null
), [$, A] = f(ve), c = Fe(), [we, Ge] = f(he && ge), [ye, Ce] = f({}), [Ne, Se] = f({}), N = (c == null ? void 0 : c.editMode) ?? we, Q = (c == null ? void 0 : c.editedCells) ?? ye, H = (c == null ? void 0 : c.setEditedCells) ?? Ce, B = (c == null ? void 0 : c.toDefaultCells) ?? Ne, F = (c == null ? void 0 : c.setToDefaultCells) ?? Se;
ae(() => {
L && L(!!N);
}, [N, L]), ae(() => {
u != null && u.id && P(u.id);
}, [u]);
const [n, ke] = f(null), [ze, x] = f(!1), [T, D] = f(null), Te = S(
(t) => {
t && n && D(n.value), x(t);
},
[n]
), De = S(() => {
n && T !== null ? (H((t) => ({
...t,
[n.cellKey]: {
value: T,
cell: n.cellData
}
})), B[n.cellKey] && F((t) => {
const e = { ...t };
return delete e[n.cellKey], e;
}), setTimeout(() => {
x(!1);
}, 300)) : x(!1);
}, [n, T, B]), Ee = S(() => {
n && (D(n.originalValue), H((t) => {
const e = { ...t };
return e[n.cellKey] && delete e[n.cellKey], e;
}), F((t) => {
const e = { ...t };
return e[n.cellKey] && delete e[n.cellKey], e;
})), x(!1);
}, [n]), je = S(() => {
n && (H((t) => {
const e = { ...t };
return e[n.cellKey] && delete e[n.cellKey], e;
}), F((t) => ({
...t,
[n.cellKey]: {
value: n.originalValue,
cell: n.cellData
}
}))), x(!1);
}, [n]), Ie = S(
(t) => {
D(t.target.value);
},
[]
), Ke = (t) => t && typeof t == "object" && "value" in t ? t.value : t, b = Y(() => {
if (!C || !m.find((r) => r.id === C)) return h;
const e = m.findIndex(
(r) => r.id === C
);
if (e === -1) return h;
const o = h.map((r, i) => {
var p;
const s = ((p = v[e]) == null ? void 0 : p[i]) ?? null, a = Ke(s);
return { header: r, value: a };
});
return o.sort((r, i) => {
if (typeof r.value == "number" && typeof i.value == "number")
return $ ? r.value - i.value : i.value - r.value;
const s = String(r.value ?? ""), a = String(i.value ?? "");
return $ ? s.localeCompare(a) : a.localeCompare(s);
}), o.map((r) => r.header);
}, [h, m, v, C, $]), Me = Y(() => {
const t = [
{
id: "cross-header",
header: () => /* @__PURE__ */ d("div", { className: "relative", children: [
/* @__PURE__ */ l("div", { className: "absolute top-0 left-2 text-xs", children: M }),
/* @__PURE__ */ l("div", { className: "absolute right-2 bottom-0 text-xs", children: V })
] }),
accessorFn: (e) => e.item,
cell: (e) => {
const o = e.getValue();
if (!y)
return /* @__PURE__ */ l(w, { text: o.label, className: "w-full" });
const r = C === o.id;
return /* @__PURE__ */ l(
z,
{
variant: "ghost",
size: "sm",
iconLeft: "ArrowLeftRight",
className: "text-right",
onClick: () => {
y && (r ? A((i) => !i) : (P(m[e.row.index].id), A(!0), J && J(m[e.row.index])));
},
children: /* @__PURE__ */ l(w, { text: o.label })
}
);
}
}
];
return b.forEach((e) => {
t.push({
id: e.id,
accessorFn: (o) => o[e.id],
header: ({ column: o }) => y ? /* @__PURE__ */ l(
z,
{
variant: "ghost",
size: "sm",
iconLeft: "ArrowUpDown",
onClick: y ? () => o.toggleSorting(o.getIsSorted() === "asc") : void 0,
children: /* @__PURE__ */ l(
w,
{
text: e.label,
className: "w-full max-w-full min-w-0"
}
)
}
) : /* @__PURE__ */ l(
w,
{
text: e.label,
className: "w-full max-w-full min-w-0 text-center font-medium"
}
),
sortingFn: (o, r, i) => {
let s = o.getValue(i), a = r.getValue(i);
return s == null && a == null ? 0 : s == null ? 1 : a == null ? -1 : (s && typeof s == "object" && "value" in s && (s = s.value), a && typeof a == "object" && "value" in a && (a = a.value), typeof s == "number" && typeof a == "number" ? s - a : String(s).localeCompare(String(a)));
},
cell: (o) => {
const r = o.getValue();
return r ? r.render ? r.render(r.fromId, r.toId, r.id) : /* @__PURE__ */ l("div", { className: "flex h-full w-full min-w-0 items-center justify-center", children: /* @__PURE__ */ l(w, { text: String((r == null ? void 0 : r.value) ?? "") }) }) : null;
}
});
}), t;
}, [
b,
M,
V,
u,
y,
P,
A
]), Ve = Y(() => m.map((t, e) => {
const o = { item: t };
return b.forEach((r) => {
var s;
const i = h.findIndex((a) => a.id === r.id);
o[r.id] = i !== -1 ? ((s = v[e]) == null ? void 0 : s[i]) ?? null : null;
}), o;
}), [m, b, v, h]), E = Ae({
data: Ve,
columns: Me,
state: { sorting: xe },
onSortingChange: be,
getCoreRowModel: qe(),
getSortedRowModel: _e()
}), Z = $e(null), ee = He({
count: E.getRowModel().rows.length,
getScrollElement: () => Z.current,
estimateSize: () => 40,
overscan: 5,
measureElement: typeof window < "u" ? (t) => t.getBoundingClientRect().height : void 0
});
if (fe)
return /* @__PURE__ */ l(
Be,
{
headerRow: b.map((t) => t.label),
rowCount: m.length || 5,
columnCount: b.length || 5,
className: K,
cornerHeaderFrom: M,
cornerHeaderTo: V
}
);
const te = (t) => {
const e = t.column.id === "cross-header", o = e, r = ["bg-d-secondary"];
e || r.push("border-r"), e && r.push("sticky left-0"), r.push("sticky top-0 z-20"), o ? r.push("z-40") : e && r.push("z-30");
let i = "none";
return e && (i = "inset -1px 0 0 0 var(--d-border), 0 1px 0 0 var(--d-border)"), {
className: r.join(" "),
style: { boxShadow: i, width: `${R}px` }
};
};
return !v || v.length === 0 ? /* @__PURE__ */ d(
"div",
{
className: k(
"flex h-full w-full flex-col overflow-auto",
K ?? ""
),
children: [
/* @__PURE__ */ l(ce, { className: "relative w-full table-fixed border-collapse", children: /* @__PURE__ */ l(
de,
{
className: "bg-d-secondary sticky top-0 z-20 w-full",
style: { boxShadow: "0 1px 0 0 var(--d-border)" },
children: (E.getHeaderGroups() ?? []).map((t) => /* @__PURE__ */ l(
G,
{
className: "bg-d-secondary sticky top-0 z-20",
children: t.headers.map((e) => {
const o = te(e);
return /* @__PURE__ */ l(
ue,
{
className: o.className,
style: o.style,
children: e.isPlaceholder ? null : _(
e.column.columnDef.header,
e.getContext()
)
},
e.id
);
})
},
t.id
))
}
) }),
/* @__PURE__ */ l("div", { className: "sticky top-0 left-0 flex flex-1", children: me || pe })
]
}
) : /* @__PURE__ */ d("div", { className: `${k("w-[900px]", K || "")}`, children: [
/* @__PURE__ */ l(
"div",
{
ref: Z,
className: "border-d-border h-fit max-h-full min-h-0 overflow-auto rounded-md border",
children: /* @__PURE__ */ d(ce, { className: "relative w-full table-fixed border-collapse", children: [
/* @__PURE__ */ l(
de,
{
className: "bg-d-secondary sticky top-0 z-20 w-full",
style: { boxShadow: "0 1px 0 0 var(--d-border)" },
children: E.getHeaderGroups().map((t) => /* @__PURE__ */ l(
G,
{
className: "bg-d-secondary sticky top-0 z-20",
children: t.headers.map((e) => {
const o = te(e);
return /* @__PURE__ */ l(
ue,
{
className: o.className,
style: o.style,
children: e.isPlaceholder ? null : _(
e.column.columnDef.header,
e.getContext()
)
},
e.id
);
})
},
t.id
))
}
),
/* @__PURE__ */ l(
Xe,
{
style: {
height: `${ee.getTotalSize()}px`,
position: "relative",
width: "100%"
},
children: ee.getVirtualItems().map((t) => {
const e = E.getRowModel().rows[t.index];
return /* @__PURE__ */ l(
G,
{
"data-index": t.index,
style: {
position: "absolute",
top: 0,
left: 0,
transform: `translateY(${t.start}px)`,
width: "100%",
height: `${t.size}px`,
display: "flex"
},
children: e.getVisibleCells().map((o, r) => {
const i = r === 0, s = o.getValue(), a = i ? "var(--d-secondary)" : (s == null ? void 0 : s.bgColor) || "transparent", p = s.editable ?? !0;
return /* @__PURE__ */ l(
Ye,
{
onClick: (g) => {
!p || !N || (g.stopPropagation(), g.preventDefault());
},
className: k(
"border-d-border text-center",
i ? "sticky left-0 z-10" : "border-r",
p && N && "cursor-pointer"
),
style: {
boxShadow: i ? "inset -1px 0 0 0 var(--d-border)" : "none",
backgroundColor: a,
color: (s == null ? void 0 : s.textColor) || "inherit",
minWidth: `${R}px`,
flex: `1 0 ${R}px`,
display: "flex",
alignItems: "center",
justifyContent: "center"
},
children: i || !N || !s ? (
// Rendering normale per la prima colonna o quando non siamo in modalità edit
_(
o.column.columnDef.cell,
o.getContext()
)
) : (
// Rendering con cella modificabile
(() => {
const g = `${e.index}-${o.column.id}`, j = g in Q ? Q[g].value : s.value || "", Re = j !== s.value, ne = g in B;
return /* @__PURE__ */ l(
"div",
{
className: "flex w-full cursor-pointer items-center justify-center",
onClick: (Le) => {
const O = Le.currentTarget.getBoundingClientRect(), oe = 400, se = 164, W = 8;
let U = O.left + window.scrollX, X = O.bottom + 5;
const ie = window.innerWidth, Pe = window.innerHeight;
U + oe > ie - W && (U = ie - oe - W), X + se > Pe - W && (X = O.bottom - se - 5), ke({
cellKey: g,
value: j,
originalValue: s.value || "",
cellData: s,
position: { top: X, left: U }
}), D(j), x(!0);
},
children: /* @__PURE__ */ d("div", { className: "relative flex h-full max-h-full w-full max-w-full items-center justify-center gap-1", children: [
Re && !ne && /* @__PURE__ */ l(
"div",
{
className: "bg-d-primary absolute -top-1.5 -left-1.5 rounded p-1",
title: "Valore modificato"
}
),
ne && /* @__PURE__ */ l(
"div",
{
className: "bg-d-destructive absolute -top-1.5 -left-1.5 rounded p-1",
title: "Ripristino richiesto"
}
),
/* @__PURE__ */ l("div", { className: "flex min-w-0 flex-1", children: /* @__PURE__ */ l(
"div",
{
className: k(
"h-full min-h-full w-full min-w-full truncate text-center",
p ? "text-d-muted-foreground" : "text-d-muted"
),
children: /* @__PURE__ */ l(
w,
{
text: j,
className: "w-full"
}
)
}
) }),
/* @__PURE__ */ l(
q,
{
name: p ? "Pencil" : "PencilOff",
size: "sm",
className: k(
"h-3 w-3",
p ? "text-d-muted-foreground" : "text-d-muted"
)
}
)
] })
}
);
})()
)
},
o.id
);
})
},
e.id
);
})
}
)
] })
}
),
/* @__PURE__ */ d(Oe, { open: ze, onOpenChange: Te, children: [
/* @__PURE__ */ l(We, { asChild: !0, children: /* @__PURE__ */ l("div", { style: { display: "none" } }) }),
/* @__PURE__ */ l(
Ue,
{
className: "w-[400px] p-4",
sideOffset: 5,
style: {
position: "absolute",
top: ((le = n == null ? void 0 : n.position) == null ? void 0 : le.top) ?? 0,
left: ((re = n == null ? void 0 : n.position) == null ? void 0 : re.left) ?? 0,
zIndex: 50
},
children: /* @__PURE__ */ d("div", { className: "space-y-4", children: [
/* @__PURE__ */ d("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ l("div", { className: "font-medium", children: "Modifica valore" }),
n && n.value !== n.originalValue && /* @__PURE__ */ l("div", { className: "text-d-muted-foreground text-xs", children: "Valore modificato" })
] }),
/* @__PURE__ */ l(
"input",
{
type: "text",
className: "bg-d-secondary w-full rounded border p-2",
value: T || "",
onChange: Ie,
autoFocus: !0
}
),
/* @__PURE__ */ d("div", { className: "flex items-center justify-between", children: [
/* @__PURE__ */ d(
z,
{
variant: "destructive",
size: "sm",
onClick: je,
className: "text-xs",
title: "Ripristina il valore originale e segna la cella come da ripristinare",
children: [
/* @__PURE__ */ l(q, { name: "RotateCcw", className: "mr-1 h-3 w-3" }),
"Ripristina"
]
}
),
/* @__PURE__ */ d("div", { className: "flex space-x-2", children: [
/* @__PURE__ */ l(
z,
{
variant: "ghost",
size: "sm",
onClick: Ee,
className: "text-xs",
title: "Annulla le modifiche correnti e chiudi",
children: "Annulla"
}
),
/* @__PURE__ */ d(
z,
{
size: "sm",
onClick: De,
className: "text-xs",
title: "Conferma le modifiche e salva",
children: [
/* @__PURE__ */ l(q, { name: "Check", className: "mr-1 h-3 w-3" }),
"Conferma"
]
}
)
] })
] })
] })
}
)
] })
] });
}
export {
ut as DataCrossTable
};