dgz-ui-shared
Version:
Custom ui library using React.js, Shadcn/ui, TailwindCSS, Typescript, dgz-ui library
405 lines (404 loc) • 14.1 kB
JavaScript
import { jsx as e, jsxs as x, Fragment as O } from "react/jsx-runtime";
import { y as u, f as C } from "../../chunks/index-E1NtSoNr.es.js";
import { Button as q } from "dgz-ui/button";
import { DropdownMenu as P, DropdownMenuTrigger as ee, DropdownMenuContent as te, DropdownMenuItem as le, DropdownMenuSeparator as de, DropdownMenuCheckboxItem as se } from "dgz-ui/dropdown";
import { cn as k } from "dgz-ui/utils";
import { g as B } from "../../chunks/MyInput-ByJ5vTAN.es.js";
import { i as I, u as fe, a as re, b as ie } from "../../chunks/useSortable-B1BtakAy.es.js";
import { XIcon as Z, ArrowDownWideNarrow as ce, ArrowUpWideNarrow as pe, ArrowUpDown as me, RefreshCw as xe } from "lucide-react";
import { memo as Ne, useMemo as U, useEffect as K } from "react";
import { useTranslation as F } from "react-i18next";
import { A as ne } from "../../chunks/Actions-Du8iQ3WR.es.js";
import { E as we } from "../../chunks/ExportData-CwotVgye.es.js";
import { S as ge, F as De } from "../../chunks/Search-DunDXQgP.es.js";
import { ButtonGroup as ve } from "dgz-ui";
import { L as Te } from "../../chunks/Loader-zvzAi0F6.es.js";
import { D as j, M as Ae, a as Me } from "../../chunks/MyPagination-B0czoGZK.es.js";
import { Checkbox as y } from "dgz-ui/form";
import { Table as ke, TableHeader as ze, TableRow as G, TableHead as X, TableBody as Ee, TableCell as W } from "dgz-ui/table";
import { S as b } from "../../chunks/SortOrder-CwuehjY1.es.js";
import { E as oe } from "../../chunks/Empty-BReVQKje.es.js";
const Le = Ne(function({
filters: g,
params: D,
onFilter: m,
className: n,
...z
}) {
const { t } = F(), i = U(
() => Object.fromEntries(
(g == null ? void 0 : g.map((c) => {
var p;
return [
c.name,
Object.fromEntries(
((p = c.options) == null ? void 0 : p.map(({ label: M, value: r }) => [r, M])) || []
)
];
})) || []
),
[g]
), T = U(
() => Object.entries(D || {}).filter(
([c, p]) => !!(i != null && i[c]) && !I(p)
),
[i, D]
);
return !I(T) && /* @__PURE__ */ e("div", { ...z, className: k("flex flex-wrap gap-2", n), children: T.map(
([c, p]) => {
var M;
return Array.isArray(p) ? /* @__PURE__ */ e(ve, { children: p.filter((r) => {
var d;
return ((d = i == null ? void 0 : i[c]) == null ? void 0 : d[r]) && r;
}).map((r, d) => {
var E;
return /* @__PURE__ */ x(
q,
{
size: "sm",
onClick: () => {
m == null || m({
...D,
[c]: p.filter((A) => A !== r)
});
},
children: [
t(String(((E = i == null ? void 0 : i[c]) == null ? void 0 : E[r]) || "")),
" ",
/* @__PURE__ */ e(Z, {})
]
},
d
);
}) }, c) : /* @__PURE__ */ x(
q,
{
size: "sm",
onClick: () => {
const r = { ...D };
delete r[c], m == null || m(r);
},
children: [
t(String(((M = i == null ? void 0 : i[c]) == null ? void 0 : M[p]) || "")),
" ",
/* @__PURE__ */ e(Z, {})
]
}
);
}
) });
}), Ie = ({
rows: l = [],
columns: g,
onRowClick: D,
rowKey: m,
params: n = {
page: 1,
limit: j
},
hasNumbers: z = !1,
hasCheckbox: t = !1,
selectedItems: i,
onSelectedItemsChange: T,
onSortOrderChange: c,
isStickyHeader: p,
className: M,
...r
}) => {
const { sortObject: d, handleSort: E } = fe({
sortField: n == null ? void 0 : n.sortField,
sortOrder: n == null ? void 0 : n.sortOrder,
onSortOrderChange: c
}), {
selectedRows: A,
isRowSelected: o,
isAllRowsSelected: $,
handleSelectAllRows: h,
handleSelectRow: H
} = re({ rows: l, defaultSelectedRows: i });
return K(() => {
T == null || T(A);
}, [A, T]), /* @__PURE__ */ x(ke, { ...r, children: [
/* @__PURE__ */ e(
ze,
{
className: k("bg-bg", p && "sticky top-0 z-1"),
children: /* @__PURE__ */ x(G, { children: [
t && /* @__PURE__ */ e(X, { className: "w-12 p-3", children: /* @__PURE__ */ e(
y,
{
className: "mt-1",
checked: $(m),
onCheckedChange: (s) => h(m, !!s),
"aria-label": "Select all"
}
) }),
z && /* @__PURE__ */ e(X, { className: "w-12 p-2", children: "#" }),
g.filter((s) => !s.hidden).map((s) => /* @__PURE__ */ e(
X,
{
style: s.styles,
className: k("p-2", s.sortable && "cursor-pointer"),
onClick: () => s.sortable && E(s.dataIndex),
children: /* @__PURE__ */ x("div", { className: "flex items-center gap-2", children: [
s.name,
" ",
s.sortable && ((d == null ? void 0 : d.sortField) === s.key ? /* @__PURE__ */ x(O, { children: [
(d == null ? void 0 : d.sortOrder) === b.DESC && /* @__PURE__ */ e(ce, { size: 15 }),
(d == null ? void 0 : d.sortOrder) === b.ASC && /* @__PURE__ */ e(pe, { size: 15 })
] }) : /* @__PURE__ */ e(me, { size: 15 }))
] })
},
s.key
))
] })
}
),
/* @__PURE__ */ e(Ee, { className: "[&>tr:nth-child(even)]:bg-bg-secondary", children: l.length ? l.map((s, N) => /* @__PURE__ */ x(
G,
{
onClick: () => D == null ? void 0 : D(s),
className: k(D && "cursor-pointer"),
"data-state": o(s[m]) && "selected",
children: [
t && /* @__PURE__ */ e(
W,
{
className: "w-12 p-3",
onClick: (w) => w.stopPropagation(),
children: /* @__PURE__ */ e(
y,
{
className: "mt-1",
checked: o(s[m]),
onCheckedChange: (w) => H(s[m], !!w),
"aria-label": "Select row"
}
)
}
),
z && /* @__PURE__ */ e(W, { className: "w-12 p-2", children: (n.page - 1) * (n.limit || j) + N + 1 }),
g.filter((w) => !w.hidden).map((w) => /* @__PURE__ */ e(
W,
{
className: "text-body-xs-medium max-w-xs p-2",
style: w.styles,
children: w.render ? w.render(B(s, w.dataIndex), s) : B(s, w.dataIndex, "")
},
`${N}-${w.key}`
))
]
},
`${s[m]}`
)) : /* @__PURE__ */ e(G, { children: /* @__PURE__ */ e(
W,
{
colSpan: z ? t ? g.length + 2 : g.length + 1 : g.length,
children: /* @__PURE__ */ e(oe, {})
}
) }) })
] });
}, Fe = ({
dataSource: l,
columns: g,
rowKey: D,
hasSearch: m,
exportOptions: n,
hasPagination: z,
onParamChange: t,
dataKey: i = "docs",
loading: T,
tableKey: c,
filters: p,
actions: M,
handleFilterChange: r,
params: d,
exportLoading: E = !1,
onColumnsUpdate: A,
hasColumnsVisibilityDropdown: o,
showAppliedFilters: $ = !1,
actionProps: h,
filterWrapperProps: H,
exportOptionsProps: s,
columnsVisibilityProps: N,
paginationProps: w,
searchProps: v,
className: a,
...J
}) => {
var Q, Y;
const { t: _ } = F(), { formattedColumns: R, handleColumnsChange: S, resetColumns: V } = ie({ key: c, columns: g });
return K(() => {
A == null || A(R);
}, [R, A]), /* @__PURE__ */ x(
"div",
{
className: k(
"border-border-alpha-light relative flex grow flex-col overflow-auto rounded-xl border shadow-xs",
a
),
children: [
/* @__PURE__ */ x("div", { className: "flex shrink-0 flex-col gap-4 p-4", children: [
(m || o && c || !I(n) || !I(p)) && /* @__PURE__ */ x("div", { className: "flex flex-col justify-between gap-3 lg:flex-row lg:items-center", children: [
/* @__PURE__ */ e("div", { className: "grow", children: m && /* @__PURE__ */ e(
ge,
{
...v,
inputProps: {
...v == null ? void 0 : v.inputProps,
className: k(
"h-8 grow",
(Q = v == null ? void 0 : v.inputProps) == null ? void 0 : Q.className
)
},
className: k(
"max-w-full lg:max-w-80! [&_button]:-top-1",
v == null ? void 0 : v.className
),
defaultValue: B(d, "search", ""),
onSearchChange: (f) => t == null ? void 0 : t({ ...d, search: f, page: 1 })
}
) }),
/* @__PURE__ */ x("div", { className: "flex items-center justify-end gap-3", children: [
n && /* @__PURE__ */ e(
we,
{
...s,
options: n,
loading: E
}
),
o && c && /* @__PURE__ */ x(P, { modal: !1, children: [
/* @__PURE__ */ e(
ee,
{
asChild: !0,
className: "grow",
...N == null ? void 0 : N.triggerProps,
children: /* @__PURE__ */ e(
q,
{
variant: "secondary",
size: "sm",
className: "ml-auto rounded-lg px-3",
children: (N == null ? void 0 : N.title) || /* @__PURE__ */ x(O, { children: [
/* @__PURE__ */ e(u, {}),
" ",
/* @__PURE__ */ e("span", { className: "hidden md:inline!", children: _("Customize columns") }),
/* @__PURE__ */ e(C, {})
] })
}
)
}
),
/* @__PURE__ */ x(
te,
{
align: "end",
...N == null ? void 0 : N.contentProps,
children: [
/* @__PURE__ */ x(
le,
{
"data-testid": "reset-columns-button",
onSelect: (f) => f.preventDefault(),
className: "capitalize",
onClick: V,
children: [
/* @__PURE__ */ e(xe, {}),
" ",
(N == null ? void 0 : N.resetText) || _("Reset columns")
]
}
),
/* @__PURE__ */ e(de, {}),
R.map((f) => /* @__PURE__ */ e(
se,
{
"data-testid": f.key,
onSelect: (L) => L.preventDefault(),
className: "capitalize",
checked: !f.hidden,
onCheckedChange: (L) => S(f, !L),
children: f.name
},
f.key
))
]
}
)
] }),
M && /* @__PURE__ */ e(ne, { ...h, actions: M }),
p && /* @__PURE__ */ e(
De,
{
...H,
filters: p,
params: d,
onChange: r,
onFilter: (f) => {
t == null || t({ ...f, page: 1 }), r == null || r(f);
}
}
)
] })
] }),
$ && !I(p) && /* @__PURE__ */ e(
Le,
{
filters: p,
params: d,
onFilter: (f) => {
t == null || t({ ...f, page: 1 }), r == null || r(f);
}
}
)
] }),
/* @__PURE__ */ e("div", { className: k("flex grow flex-col overflow-auto border-y"), children: T ? /* @__PURE__ */ e(Te, {}) : /* @__PURE__ */ e(
Ie,
{
...J,
params: {
page: (l == null ? void 0 : l.page) || 1,
limit: l == null ? void 0 : l.limit,
...d
},
rows: B(l, i, []),
rowKey: D,
columns: R,
onSortOrderChange: ({ sortField: f, sortOrder: L }) => {
t == null || t({ ...d, sortField: f, sortOrder: L });
}
}
) }),
z && /* @__PURE__ */ x("div", { className: "flex shrink-0 flex-wrap items-center justify-center gap-3 p-4 lg:justify-between", children: [
/* @__PURE__ */ e("div", { className: "text-sm", children: /* @__PURE__ */ e(
Ae,
{
onLimitChange: (f) => t == null ? void 0 : t({ ...d, limit: f, page: 1 }),
defaultValue: l == null ? void 0 : l.limit
}
) }),
/* @__PURE__ */ e("div", { className: "text-muted-foreground text-sm", children: _("{{selectedCount}} of {{total}} row(s) selected", {
selectedCount: ((Y = J.selectedItems) == null ? void 0 : Y.length) ?? 0,
total: (l == null ? void 0 : l.total) || 0
}) }),
/* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
Me,
{
...w,
onPageChange: (f) => t == null ? void 0 : t({ ...d, page: f }),
currentPage: l == null ? void 0 : l.page,
totalPages: l == null ? void 0 : l.totalPages
}
) })
] })
]
}
);
};
export {
Fe as DataTable,
Ie as MyTable
};
//# sourceMappingURL=index.es.js.map