@anoki/fse-ui
Version:
FSE UI components library
293 lines (292 loc) • 9.37 kB
JavaScript
import { j as i } from "./index.es244.js";
import { clsx as _ } from "./index.es246.js";
import './components/ui/TableMobile/TableMobile.css';/* empty css */
import * as B from "react";
import { useState as U } from "react";
import { Col as $ } from "./index.es10.js";
import { Row as T } from "./index.es9.js";
import { ActionIconText as E } from "./index.es67.js";
import { TriangleUp as q } from "./index.es198.js";
import { TriangleDown as v } from "./index.es199.js";
import { Download as F } from "./index.es191.js";
import { Info as G } from "./index.es200.js";
const ii = ({
data: t,
columns: s,
pagination: c = !0,
resultsPerPage: r = 5,
totalResults: h,
initialCurrentPage: N = 1,
serverSidePagination: o = !1,
totalItems: n,
hasNextPage: l,
hasPreviousPage: y,
onNextPage: m,
onPreviousPage: b,
onPageChange: x,
setCurrentPage: a,
sortConfig: d = null,
onSortChange: V
}) => {
const [w, k] = U(N), L = (p) => {
k(p), a == null || a(p);
}, j = B.useMemo(() => d ? [...t].sort((p, u) => {
const M = p[d.key], I = u[d.key], z = typeof M == "object" && "firstLine" in M ? M.firstLine : M, A = typeof I == "object" && "firstLine" in I ? I.firstLine : I;
return z < A ? d.direction === "asc" ? -1 : 1 : z > A ? d.direction === "asc" ? 1 : -1 : 0;
}) : t, [t, d]), e = o ? 0 : (w - 1) * r, D = o ? j.length : Math.min(e + r, j.length), f = j.slice(e, D);
return /* @__PURE__ */ i.jsxs($, { className: "w-full h-full", gap: "x16", children: [
f.map((p, u) => /* @__PURE__ */ i.jsx(
J,
{
columns: s,
data: p,
sortConfig: d,
onSortChange: V
},
u
)),
c && /* @__PURE__ */ i.jsx(
K,
{
currentPage: w,
totalResults: h || j.length,
resultsPerPage: r,
setCurrentPage: L,
onPageChange: x,
serverSide: o,
totalItems: n,
hasNextPage: l,
hasPreviousPage: y,
onNextPage: m,
onPreviousPage: b,
currentResultsPerPage: o ? j.length : r,
className: "mt-x16"
}
)
] });
}, H = ({ data: t }) => t.type === "link" && t.link ? /* @__PURE__ */ i.jsx("a", { href: t.link, "aria-label": t.ariaLabel, children: t.label }) : /* @__PURE__ */ i.jsx("button", { onClick: t.action, "aria-label": t.ariaLabel, children: t.label }), J = ({
columns: t,
sortConfig: s,
data: c,
onSortChange: r
}) => {
const h = (n) => {
if (!n) return "";
if (typeof n == "object" && "firstLine" in n) {
const l = n;
return `${l.firstLine}${l.secondLine ? ` ${l.secondLine}` : ""}`;
}
return typeof n == "object" && "label" in n && "type" in n ? /* @__PURE__ */ i.jsx(H, { data: n }) : n;
}, N = (n) => {
switch (n) {
case "info":
return /* @__PURE__ */ i.jsx(G, {});
case "download":
return /* @__PURE__ */ i.jsx(F, {});
default:
return n;
}
}, o = (n) => {
if (!r || !s) return;
const l = s.key === n && s.direction === "asc" ? "desc" : "asc";
r(n, l);
};
return /* @__PURE__ */ i.jsx(
"div",
{
className: _("ui-card-table shadow br-x4 text-slate-28 fs-custom "),
children: t.map((n, l) => {
if (!n.key || n.key === "actionData")
return /* @__PURE__ */ i.jsx(
T,
{
p: "x16",
className: "ui-table-header",
justifyContent: "space-between",
children: /* @__PURE__ */ i.jsx($, { justifyContent: "end", gap: "x4", className: "w-full", children: /* @__PURE__ */ i.jsx(T, { justifyContent: "end", className: "table-mobile-actions", children: h(c.actionData) }) })
},
l
);
const y = c[n.key], m = n, b = (s == null ? void 0 : s.key) === n.key, x = b ? s.direction : null;
return /* @__PURE__ */ i.jsx(
T,
{
p: "x16",
className: "ui-table-header",
justifyContent: "space-between",
children: /* @__PURE__ */ i.jsxs($, { justifyContent: "center", gap: "x4", className: "w-full", children: [
/* @__PURE__ */ i.jsx(
E,
{
justifyContent: "space-between",
alignItems: "center",
icon: N(m.icon),
noIcon: !N(m.icon),
textLabel: m.label,
iconPosition: m.iconPosition,
popupInfo: m.popupInfo,
positionPopUp: "left",
classNameText: "fw-bold text-slate-28 fs-custom md-fs-6",
children: m.sortable && /* @__PURE__ */ i.jsxs(
"span",
{
className: "sort-indicator",
onClick: (a) => {
a.stopPropagation(), o(n.key);
},
children: [
/* @__PURE__ */ i.jsx(
q,
{
filled: b && x === "desc",
className: _("sort-indicator__triangle", {
active: b && x === "desc"
})
}
),
/* @__PURE__ */ i.jsx(
v,
{
filled: b && x === "asc",
className: _("sort-indicator__triangle", {
active: b && x === "asc"
})
}
)
]
}
)
}
),
/* @__PURE__ */ i.jsx(T, { children: h(y) })
] })
},
l
);
})
}
);
}, K = ({
currentPage: t = 1,
totalResults: s = 0,
resultsPerPage: c,
setCurrentPage: r,
onPageChange: h,
className: N,
serverSide: o = !1,
totalItems: n,
hasNextPage: l,
hasPreviousPage: y,
onNextPage: m,
onPreviousPage: b,
currentResultsPerPage: x = c
}) => {
const a = Math.ceil(o ? (n || s) / c : s / c), d = (e) => {
r == null || r(e), h && h(e);
}, V = () => {
const e = t + 1;
o && m && m(), d(e);
}, w = () => {
const e = t - 1;
o && b && b(), d(e);
}, k = o ? !l : t === a, L = o ? !y : t === 1, j = () => {
const e = [];
if (a <= 5)
for (let f = 1; f <= a; f++)
e.push(f);
else {
e.push(1);
let f = Math.max(2, t - 1), p = Math.min(a - 1, t + 1);
t <= 3 ? p = 4 : t >= a - 2 && (f = a - 3), f > 2 && e.push("...");
for (let u = f; u <= p; u++)
e.push(u);
p < a - 1 && e.push("..."), e.push(a);
}
return e;
};
return /* @__PURE__ */ i.jsxs("div", { className: _("pagination-mobile", N), children: [
/* @__PURE__ */ i.jsxs("div", { className: "pagination-mobile__info", children: [
"Stai visualizzando",
" ",
/* @__PURE__ */ i.jsx("span", { className: "pagination-mobile__info__resultsPerPage", children: o ? x : t === a && s % c !== 0 ? s % c : c }),
" ",
"di ",
o && n || s,
" risultati"
] }),
/* @__PURE__ */ i.jsxs("div", { className: "pagination-mobile__nav", children: [
/* @__PURE__ */ i.jsx(
"button",
{
className: _(
"pagination-mobile__button",
L && "pagination-mobile__button--disabled"
),
onClick: w,
disabled: L,
"aria-label": "Previous page",
children: /* @__PURE__ */ i.jsx(
"svg",
{
className: "pagination-mobile__button-arrow",
viewBox: "0 0 24 24",
"aria-hidden": "true",
role: "presentation",
children: /* @__PURE__ */ i.jsx("path", { d: "M15 18l-6-6 6-6" })
}
)
}
),
j().map(
(e, D) => e === "..." ? /* @__PURE__ */ i.jsx(
"span",
{
className: "pagination-mobile__ellipsis",
children: "..."
},
`ellipsis-${D}`
) : /* @__PURE__ */ i.jsx(
"button",
{
className: _(
"pagination-mobile__button",
t === e && "pagination-mobile__button--active"
),
onClick: () => d(e),
disabled: e === t,
children: e
},
e
)
),
/* @__PURE__ */ i.jsx(
"button",
{
className: _(
"pagination-mobile__button",
k && "pagination-mobile__button--disabled"
),
onClick: V,
disabled: k,
"aria-label": "Next page",
children: /* @__PURE__ */ i.jsx(
"svg",
{
className: "pagination-mobile__button-arrow",
viewBox: "0 0 24 24",
"aria-hidden": "true",
role: "presentation",
children: /* @__PURE__ */ i.jsx("path", { d: "M9 6l6 6-6 6" })
}
)
}
)
] })
] });
};
export {
J as CardTable,
ii as TableMobile,
K as TableMobilePagination
};
//# sourceMappingURL=index.es74.js.map