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