@anoki/fse-ui
Version:
FSE UI components library
374 lines (373 loc) • 11.7 kB
JavaScript
import { j as a } from "./index.es237.js";
import * as j from "react";
import { useEffect as S } from "react";
import { clsx as b } from "./index.es238.js";
import './components/ui/Table/Table.css';/* empty css */
import { TriangleUp as ee } from "./index.es231.js";
import { TriangleDown as ae } from "./index.es230.js";
import { ActionIconText as te } from "./index.es18.js";
import { Download as se } from "./index.es189.js";
import { Info as ie } from "./index.es208.js";
const le = j.forwardRef(
({
className: e,
columns: t,
data: i,
pagination: n,
initialCurrentPage: N = 1,
resultsPerPage: y = 10,
defaultSortDirection: h = "desc",
setSelectedSort: l,
initialSortConfig: _,
serverSidePagination: x = !1,
totalItems: w,
hasNextPage: T,
hasPreviousPage: g,
onNextPage: p,
onPreviousPage: L,
onPageChange: V,
...A
}, I) => {
const [o, M] = j.useState(
_ || {
key: t[0].key || t[0].label,
direction: h
}
), [s, R] = j.useState(N);
S(() => {
_ && M(_);
}, [_]);
const c = j.useMemo(() => [...i].sort((d, k) => {
const m = d[o.key], f = k[o.key], u = t.find(
(r) => (r.key || r.label) === o.key
);
if (typeof m == "string" && typeof f == "string") {
if ((u == null ? void 0 : u.type) === "date") {
const r = (O) => {
const [Q, W] = O.split(" - "), [X, Y, Z] = Q.split("/").map(Number), [K, P] = W.split(":").map(Number);
return new Date(Z, Y - 1, X, K, P);
}, D = r(m), F = r(f);
return o.direction === "asc" ? D.getTime() - F.getTime() : F.getTime() - D.getTime();
}
if ((u == null ? void 0 : u.type) === "number") {
const r = parseFloat(m), D = parseFloat(f);
return o.direction === "asc" ? r - D : D - r;
}
return o.direction === "asc" ? m.localeCompare(f) : f.localeCompare(m);
}
return B(m) && B(f) ? o.direction === "asc" ? m.firstLine.localeCompare(f.firstLine) : f.firstLine.localeCompare(m.firstLine) : 0;
}), [i, o, t]), C = (d) => {
const k = {
key: d,
direction: o.key === d && o.direction === "asc" ? "desc" : "asc"
};
M(k), l && l(k);
}, v = n && !x ? (s - 1) * y : 0, G = n && !x ? Math.min(v + y, c.length) : c.length, J = x ? c : c.slice(v, G);
return /* @__PURE__ */ a.jsxs("div", { className: "position-relative w-full", children: [
/* @__PURE__ */ a.jsxs(
"table",
{
ref: I,
className: b("table", e),
role: "table",
...A,
children: [
/* @__PURE__ */ a.jsx(H, { className: "table__header", children: /* @__PURE__ */ a.jsx($, { children: t.map((d, k) => /* @__PURE__ */ a.jsx(
z,
{
config: d,
sortConfig: o,
onSort: () => d.sortable && C(d.key || d.label),
variant: A.variant
},
`${d.label}-${k}`
)) }) }),
/* @__PURE__ */ a.jsx(U, { className: "table__body", children: J.map((d, k) => /* @__PURE__ */ a.jsx($, { className: "table__row", children: t.map((m, f) => {
const u = m.key || m.label, r = d[u];
return /* @__PURE__ */ a.jsx(
q,
{
content: r || "",
type: r && B(r) ? "double-line" : r && E(r) ? "action" : void 0
},
`${u}-${f}`
);
}) }, k)) })
]
}
),
n && /* @__PURE__ */ a.jsx(
ce,
{
currentPage: s,
totalResults: x ? w || 0 : c.length,
currentResultsPerPage: i.length,
resultsPerPage: y,
setCurrentPage: R,
onPageChange: V,
serverSide: x,
totalItems: w,
hasNextPage: T,
hasPreviousPage: g,
onNextPage: p,
onPreviousPage: L
}
)
] });
}
);
le.displayName = "Table";
const H = j.forwardRef(
({ className: e, children: t, ...i }, n) => /* @__PURE__ */ a.jsx(
"thead",
{
ref: n,
className: b("[&_tr]:border-b-0", e),
...i,
children: t
}
)
);
H.displayName = "TableHeader";
const U = j.forwardRef(
({ className: e, children: t, ...i }, n) => /* @__PURE__ */ a.jsx(
"tbody",
{
ref: n,
className: b("[&_tr:last-child]:border-0", e),
...i,
children: t
}
)
);
U.displayName = "TableBody";
const $ = j.forwardRef(
({ className: e, children: t, ...i }, n) => /* @__PURE__ */ a.jsx(
"tr",
{
ref: n,
className: b(
"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
e
),
...i,
children: t
}
)
);
$.displayName = "TableRow";
const z = j.forwardRef(({ className: e, config: t, sortConfig: i, onSort: n, ...N }, y) => {
var w;
const h = i.key === (t.key || t.label), l = h ? i.direction : null, _ = () => l === "asc" ? "ascending" : "descending", x = (T) => {
switch (T) {
case "info":
return /* @__PURE__ */ a.jsx(ie, {});
case "download":
return /* @__PURE__ */ a.jsx(se, {});
default:
return T;
}
};
return /* @__PURE__ */ a.jsx(
"th",
{
ref: y,
className: b(
"table__cell table__cell--header",
{
"table__cell--sortable": t.sortable,
"table__cell--action": t.action
},
e
),
onClick: t.sortable ? n : t.action,
"aria-label": t.ariaLabel,
"aria-sort": h ? _() : void 0,
scope: t.scope || "col",
...N,
children: /* @__PURE__ */ a.jsxs("div", { className: "table__cell--header--content", children: [
/* @__PURE__ */ a.jsx("div", { children: /* @__PURE__ */ a.jsx(
te,
{
icon: x(t.icon),
noIcon: !x(t.icon),
textLabel: t.label,
iconPosition: t.iconPosition,
handleIconAction: () => {
t.iconAction && t.iconAction();
},
popupInfo: t.popupInfo,
positionPopUp: (w = t.popupInfo) == null ? void 0 : w.positionPopUp,
classNameText: N.variant && "fw-bold text-slate-28 fs-custom md-fs-6"
}
) }),
t.sortable && /* @__PURE__ */ a.jsxs("span", { className: "sort-indicator", children: [
/* @__PURE__ */ a.jsx(
ee,
{
filled: h && l === "desc",
className: b("sort-indicator__triangle", {
active: h && l === "desc"
})
}
),
/* @__PURE__ */ a.jsx(
ae,
{
filled: h && l === "asc",
className: b("sort-indicator__triangle", {
active: h && l === "asc"
})
}
)
] })
] })
}
);
});
z.displayName = "TableHead";
const ne = ({ data: e }) => /* @__PURE__ */ a.jsxs(a.Fragment, { children: [
/* @__PURE__ */ a.jsx("div", { className: "table__cell--firstLine", children: e.firstLine }),
/* @__PURE__ */ a.jsx("div", { className: "table__cell--secondLine", children: e.secondLine })
] }), oe = ({ data: e }) => e.type === "link" && e.link ? /* @__PURE__ */ a.jsx("a", { href: e.link, "aria-label": e.ariaLabel, children: e.label }) : /* @__PURE__ */ a.jsx("button", { onClick: e.action, "aria-label": e.ariaLabel, children: e.label }), B = (e) => typeof e == "object" && e !== null && "firstLine" in e && "secondLine" in e, E = (e) => typeof e == "object" && e !== null && "label" in e && "type" in e, re = ({
content: e
}) => typeof e == "string" ? /* @__PURE__ */ a.jsx(a.Fragment, { children: e }) : B(e) ? /* @__PURE__ */ a.jsx(ne, { data: e }) : E(e) ? /* @__PURE__ */ a.jsx(oe, { data: e }) : null, q = j.forwardRef(
({ className: e, content: t, type: i, ...n }, N) => /* @__PURE__ */ a.jsx(
"td",
{
ref: N,
className: b(
"table__cell",
{
"table__cell--double-line": i === "double-line",
"table__cell--action": i === "action"
},
e
),
...n,
children: /* @__PURE__ */ a.jsx(re, { content: t })
}
)
);
q.displayName = "TableCell";
const ce = ({
currentPage: e = 1,
totalResults: t,
resultsPerPage: i,
currentResultsPerPage: n,
setCurrentPage: N,
onPageChange: y,
className: h,
serverSide: l = !1,
totalItems: _,
hasNextPage: x,
hasPreviousPage: w,
onNextPage: T,
onPreviousPage: g
}) => {
const p = Math.ceil(l ? (_ || t) / i : t / i), L = (s) => {
N(s), y && y(s);
}, V = () => {
const s = e + 1;
l && T && T(), L(s);
}, A = () => {
const s = e - 1;
l && g && g(), L(s);
}, I = l ? !x : e === p, o = l ? !w : e === 1, M = () => {
const s = [];
if (p <= 5)
for (let c = 1; c <= p; c++)
s.push(c);
else {
s.push(1);
let c = Math.max(2, e - 1), C = Math.min(p - 1, e + 1);
e <= 3 ? C = 4 : e >= p - 2 && (c = p - 3), c > 2 && s.push("...");
for (let v = c; v <= C; v++)
s.push(v);
C < p - 1 && s.push("..."), s.push(p);
}
return s;
};
return /* @__PURE__ */ a.jsxs("div", { className: b("pagination", h), children: [
/* @__PURE__ */ a.jsxs("div", { className: "pagination__info", children: [
"Stai visualizzando",
" ",
/* @__PURE__ */ a.jsx("span", { className: "pagination__info__resultsPerPage", children: l ? n : e === p && t % i !== 0 ? t % i : i }),
" ",
"di ",
l && _ || t,
" risultati"
] }),
/* @__PURE__ */ a.jsxs("div", { className: "pagination__nav", children: [
/* @__PURE__ */ a.jsx(
"button",
{
className: b(
"pagination__button",
o && "pagination__button--disabled"
),
onClick: A,
disabled: o,
"aria-label": "Previous page",
children: /* @__PURE__ */ a.jsx(
"svg",
{
className: "pagination__button-arrow",
viewBox: "0 0 24 24",
"aria-hidden": "true",
role: "presentation",
children: /* @__PURE__ */ a.jsx("path", { d: "M15 18l-6-6 6-6" })
}
)
}
),
M().map(
(s, R) => s === "..." ? /* @__PURE__ */ a.jsx("span", { className: "pagination__ellipsis", children: "..." }, `ellipsis-${R}`) : /* @__PURE__ */ a.jsx(
"button",
{
className: b(
"pagination__button",
e === s && "pagination__button--active"
),
onClick: () => L(s),
disabled: s === e,
children: s
},
s
)
),
/* @__PURE__ */ a.jsx(
"button",
{
className: b(
"pagination__button",
I && "pagination__button--disabled"
),
onClick: V,
disabled: I,
"aria-label": "Next page",
children: /* @__PURE__ */ a.jsx(
"svg",
{
className: "pagination__button-arrow",
viewBox: "0 0 24 24",
"aria-hidden": "true",
role: "presentation",
children: /* @__PURE__ */ a.jsx("path", { d: "M9 6l6 6-6 6" })
}
)
}
)
] })
] });
};
export {
ce as Pagination,
le as Table,
U as TableBody,
q as TableCell,
z as TableHead,
H as TableHeader,
$ as TableRow
};
//# sourceMappingURL=index.es129.js.map