@anoki/fse-marche-ui
Version:
FSE UI components library
296 lines (295 loc) • 9.71 kB
JavaScript
import { j as a } from "./index.es137.js";
import * as _ from "react";
import { clsx as c } from "./index.es139.js";
import './components/ui/Table/Table.css';/* empty css */
import { ActionIconText as q } from "./index.es59.js";
import { TriangleUp as G } from "./index.es113.js";
import { TriangleDown as J } from "./index.es114.js";
import { Download as Q } from "./index.es106.js";
import { Info as W } from "./index.es115.js";
const X = _.forwardRef(
({
className: e,
columns: t,
data: s,
pagination: i,
initialCurrentPage: f = 1,
resultsPerPage: m = 10,
defaultSortDirection: n = "desc",
...p
}, g) => {
const [d, u] = _.useState({
key: t[0].key || t[0].label,
direction: n
}), [k, $] = _.useState(f), N = _.useMemo(() => [...s].sort((o, x) => {
const r = o[d.key], l = x[d.key], b = t.find(
(j) => (j.key || j.label) === d.key
);
if (typeof r == "string" && typeof l == "string") {
if ((b == null ? void 0 : b.type) === "date") {
const j = (M) => {
const [F, H] = M.split(" - "), [V, z, E] = F.split("/").map(Number), [O, U] = H.split(":").map(Number);
return new Date(E, z - 1, V, O, U);
}, h = j(r), v = j(l);
return d.direction === "asc" ? h.getTime() - v.getTime() : v.getTime() - h.getTime();
}
if ((b == null ? void 0 : b.type) === "number") {
const j = parseFloat(r), h = parseFloat(l);
return d.direction === "asc" ? j - h : h - j;
}
return d.direction === "asc" ? r.localeCompare(l) : l.localeCompare(r);
}
return y(r) && y(l) ? d.direction === "asc" ? r.firstLine.localeCompare(l.firstLine) : l.firstLine.localeCompare(r.firstLine) : 0;
}), [s, d, t]), S = (o) => {
u((x) => ({
key: o,
direction: x.key === o && x.direction === "asc" ? "desc" : "asc"
}));
}, L = i ? (k - 1) * m : 0, B = i ? Math.min(L + m, N.length) : N.length, I = N.slice(L, B);
return /* @__PURE__ */ a.jsxs("div", { className: "position-relative w-full", children: [
/* @__PURE__ */ a.jsxs(
"table",
{
ref: g,
className: c("table", e),
role: "table",
...p,
children: [
/* @__PURE__ */ a.jsx(C, { className: "table__header", children: /* @__PURE__ */ a.jsx(w, { children: t.map((o, x) => /* @__PURE__ */ a.jsx(
R,
{
config: o,
sortConfig: d,
onSort: () => o.sortable && S(o.key || o.label)
},
`${o.label}-${x}`
)) }) }),
/* @__PURE__ */ a.jsx(D, { className: "table__body", children: I.map((o, x) => /* @__PURE__ */ a.jsx(w, { className: "table__row", children: Object.entries(o).map(([r, l], b) => l ? r === "actionData" && A(l) ? /* @__PURE__ */ a.jsx(
T,
{
content: l,
type: "action"
},
`${r}-${b}`
) : y(l) ? /* @__PURE__ */ a.jsx(
T,
{
content: l,
type: "double-line"
},
`${r}-${b}`
) : typeof l == "string" ? /* @__PURE__ */ a.jsx(T, { content: l }, `${r}-${b}`) : null : null) }, x)) })
]
}
),
i && /* @__PURE__ */ a.jsx(
P,
{
currentPage: k,
totalResults: N.length,
resultsPerPage: m,
setCurrentPage: $
}
)
] });
}
);
X.displayName = "Table";
const C = _.forwardRef(
({ className: e, children: t, ...s }, i) => /* @__PURE__ */ a.jsx(
"thead",
{
ref: i,
className: c("[&_tr]:border-b-0", e),
...s,
children: t
}
)
);
C.displayName = "TableHeader";
const D = _.forwardRef(
({ className: e, children: t, ...s }, i) => /* @__PURE__ */ a.jsx(
"tbody",
{
ref: i,
className: c("[&_tr:last-child]:border-0", e),
...s,
children: t
}
)
);
D.displayName = "TableBody";
const w = _.forwardRef(
({ className: e, children: t, ...s }, i) => /* @__PURE__ */ a.jsx(
"tr",
{
ref: i,
className: c(
"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
e
),
...s,
children: t
}
)
);
w.displayName = "TableRow";
const R = _.forwardRef(({ className: e, config: t, sortConfig: s, onSort: i, ...f }, m) => {
const n = s.key === (t.key || t.label), p = n ? s.direction : null, g = () => p === "asc" ? "ascending" : "descending", d = (u) => {
switch (u) {
case "info":
return /* @__PURE__ */ a.jsx(W, {});
case "download":
return /* @__PURE__ */ a.jsx(Q, {});
default:
return u;
}
};
return /* @__PURE__ */ a.jsx(
"th",
{
ref: m,
className: c(
"table__cell table__cell--header",
{
"table__cell--sortable": t.sortable,
"table__cell--action": t.action
},
e
),
onClick: t.sortable ? i : t.action,
"aria-label": t.ariaLabel,
"aria-sort": n ? g() : void 0,
...f,
children: /* @__PURE__ */ a.jsxs("div", { className: "table__cell--header--content", children: [
/* @__PURE__ */ a.jsx("div", { children: /* @__PURE__ */ a.jsx(
q,
{
icon: d(t.icon),
textLabel: t.label,
iconPosition: t.iconPosition,
handleIconAction: () => {
t.iconAction;
},
popupInfo: t.popupInfo
}
) }),
t.sortable && /* @__PURE__ */ a.jsxs("span", { className: "sort-indicator", children: [
/* @__PURE__ */ a.jsx(
G,
{
filled: n && p === "desc",
className: c("sort-indicator__triangle", {
active: n && p === "desc"
})
}
),
/* @__PURE__ */ a.jsx(
J,
{
filled: n && p === "asc",
className: c("sort-indicator__triangle", {
active: n && p === "asc"
})
}
)
] })
] })
}
);
});
R.displayName = "TableHead";
const Y = ({ 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 })
] }), Z = ({ 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 }), y = (e) => typeof e == "object" && e !== null && "firstLine" in e && "secondLine" in e, A = (e) => typeof e == "object" && e !== null && "label" in e && "type" in e, K = ({
content: e
}) => typeof e == "string" ? /* @__PURE__ */ a.jsx(a.Fragment, { children: e }) : y(e) ? /* @__PURE__ */ a.jsx(Y, { data: e }) : A(e) ? /* @__PURE__ */ a.jsx(Z, { data: e }) : null, T = _.forwardRef(
({ className: e, content: t, type: s, ...i }, f) => /* @__PURE__ */ a.jsx(
"td",
{
ref: f,
className: c(
"table__cell",
{
"table__cell--double-line": s === "double-line",
"table__cell--action": s === "action"
},
e
),
...i,
children: /* @__PURE__ */ a.jsx(K, { content: t })
}
)
);
T.displayName = "TableCell";
const P = ({
currentPage: e = 1,
totalResults: t,
resultsPerPage: s,
setCurrentPage: i,
className: f
}) => {
const m = Math.ceil(t / s);
return /* @__PURE__ */ a.jsxs("div", { className: c("pagination", f), children: [
/* @__PURE__ */ a.jsxs("div", { className: "pagination__info", children: [
"Stai visualizzando",
" ",
/* @__PURE__ */ a.jsx("span", { className: "pagination__info__resultsPerPage", children: s }),
" ",
"di ",
t,
" risultati"
] }),
/* @__PURE__ */ a.jsxs("div", { className: "pagination__nav", children: [
/* @__PURE__ */ a.jsx(
"button",
{
className: c(
"pagination__button",
e === 1 && "pagination__button--disabled"
),
onClick: () => i(e - 1),
disabled: e === 1,
"aria-label": "Previous page",
children: /* @__PURE__ */ a.jsx("svg", { className: "pagination__button-arrow", viewBox: "0 0 24 24", children: /* @__PURE__ */ a.jsx("path", { d: "M15 18l-6-6 6-6" }) })
}
),
Array.from({ length: m }, (n, p) => p + 1).map((n) => /* @__PURE__ */ a.jsx(
"button",
{
className: c(
"pagination__button",
e === n && "pagination__button--active"
),
onClick: () => i(n),
children: n
},
n
)),
/* @__PURE__ */ a.jsx(
"button",
{
className: c(
"pagination__button",
e === m && "pagination__button--disabled"
),
onClick: () => i(e + 1),
disabled: e === m,
"aria-label": "Next page",
children: /* @__PURE__ */ a.jsx("svg", { className: "pagination__button-arrow", viewBox: "0 0 24 24", children: /* @__PURE__ */ a.jsx("path", { d: "M9 6l6 6-6 6" }) })
}
)
] })
] });
};
export {
P as Pagination,
X as Table,
D as TableBody,
T as TableCell,
R as TableHead,
C as TableHeader,
w as TableRow
};
//# sourceMappingURL=index.es65.js.map