dgz-ui-shared
Version:
Custom ui library using React.js, Shadcn/ui, TailwindCSS, Typescript, dgz-ui library
405 lines (404 loc) • 13.8 kB
JavaScript
import { j as s } from "../../jsx-runtime-DS1N_tNq.js";
import { u as Y } from "../../button-CdZDBhmr-BT_j3ig5.js";
import { T as Z, A as U, i as I, u as K, f as S, d as P } from "../../dropdown-menu-TWRSm6RK-D_FJpI4C.js";
import { D as H, a as C, M as ss } from "../../MyLimitSelect-D5ZWDY-s.js";
import { y as es, f as ls } from "../../index-BrQ82Wyu.js";
import { forwardRef as h, useEffect as u, useState as ts } from "react";
import { l as w } from "../../lodash-CYNxjS-I.js";
import { a as j } from "../../index-BL59b1Bz-C9bJE_xn.js";
import { m as x } from "../../utils-B6fNqzRf-B1_jG1K7.js";
import { u as is, a as ds, b as rs } from "../../useSortable-DwSvT1qU.js";
import { v as V } from "../../input-mask-DBLFIvhN-BBxoZxnd.js";
import { S as W } from "../../SortOrder-CwuehjY1.js";
import { E as cs } from "../../Empty-_eAFU6r6.js";
import { c as R } from "../../createLucideIcon-B950nf2d.js";
import { S as as, F as xs } from "../../FilterWrapper-Dk18nVPy.js";
import { L as os } from "../../Loader-gLl5AAz4.js";
import { A as fs } from "../../Actions-CKVu3P3q.js";
import { E as ps } from "../../ExportData-1xS2UAoq.js";
import { u as ms } from "../../useTranslation-dH-uwymc.js";
const J = h(
({ className: e, ...l }, i) => /* @__PURE__ */ j.jsx(
"table",
{
ref: i,
className: x("w-full caption-bottom text-sm", e),
...l
}
)
);
J.displayName = "Table";
const B = h(({ className: e, ...l }, i) => /* @__PURE__ */ j.jsx("thead", { ref: i, className: x("[&_tr]:border-b", e), ...l }));
B.displayName = "TableHeader";
const O = h(({ className: e, ...l }, i) => /* @__PURE__ */ j.jsx(
"tbody",
{
ref: i,
className: x("[&_tr:last-child]:border-0", e),
...l
}
));
O.displayName = "TableBody";
const hs = h(({ className: e, ...l }, i) => /* @__PURE__ */ j.jsx(
"tfoot",
{
ref: i,
className: x(
"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
e
),
...l
}
));
hs.displayName = "TableFooter";
const L = h(({ className: e, ...l }, i) => /* @__PURE__ */ j.jsx(
"tr",
{
ref: i,
className: x(
"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
e
),
...l
}
));
L.displayName = "TableRow";
const z = h(({ className: e, ...l }, i) => /* @__PURE__ */ j.jsx(
"th",
{
ref: i,
className: x(
"text-muted-foreground h-12 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0",
e
),
...l
}
));
z.displayName = "TableHead";
const M = h(({ className: e, ...l }, i) => /* @__PURE__ */ j.jsx(
"td",
{
ref: i,
className: x("p-4 align-middle [&:has([role=checkbox])]:pr-0", e),
...l
}
));
M.displayName = "TableCell";
const js = h(({ className: e, ...l }, i) => /* @__PURE__ */ j.jsx(
"caption",
{
ref: i,
className: x("text-muted-foreground mt-4 text-sm", e),
...l
}
));
js.displayName = "TableCaption";
/**
* @license lucide-react v0.511.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const Ns = [
["path", { d: "m3 16 4 4 4-4", key: "1co6wj" }],
["path", { d: "M7 20V4", key: "1yoxec" }],
["path", { d: "M11 4h10", key: "1w87gc" }],
["path", { d: "M11 8h7", key: "djye34" }],
["path", { d: "M11 12h4", key: "q8tih4" }]
], ns = R("arrow-down-wide-narrow", Ns);
/**
* @license lucide-react v0.511.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const ys = [
["path", { d: "m21 16-4 4-4-4", key: "f6ql7i" }],
["path", { d: "M17 20V4", key: "1ejh1v" }],
["path", { d: "m3 8 4-4 4 4", key: "11wl7u" }],
["path", { d: "M7 4v16", key: "1glfcx" }]
], bs = R("arrow-up-down", ys);
/**
* @license lucide-react v0.511.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const ks = [
["path", { d: "m3 8 4-4 4 4", key: "11wl7u" }],
["path", { d: "M7 4v16", key: "1glfcx" }],
["path", { d: "M11 12h10", key: "1438ji" }],
["path", { d: "M11 16h7", key: "uosisv" }],
["path", { d: "M11 20h4", key: "1krc32" }]
], ws = R("arrow-up-wide-narrow", ks);
/**
* @license lucide-react v0.511.0 - ISC
*
* This source code is licensed under the ISC license.
* See the LICENSE file in the root directory of this source tree.
*/
const vs = [
["path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8", key: "v9h5vc" }],
["path", { d: "M21 3v5h-5", key: "1q7to0" }],
["path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16", key: "3uifl3" }],
["path", { d: "M8 16H3v5", key: "1cv678" }]
], gs = R("refresh-cw", vs), Ms = ({
rows: e = [],
columns: l,
onRowClick: i,
rowKey: p,
params: o = {
page: 1,
limit: H
},
hasNumbers: y = !1,
hasCheckbox: N = !1,
selectedItems: v,
onSelectedItemsChange: b,
onSortOrderChange: D,
isStickyHeader: d
}) => {
const { sortObject: a, handleSort: $ } = is({
sortField: o == null ? void 0 : o.sortField,
sortOrder: o == null ? void 0 : o.sortOrder,
onSortOrderChange: D
}), {
selectedRows: m,
isRowSelected: k,
isAllRowsSelected: T,
handleSelectAllRows: g,
handleSelectRow: f
} = ds({ rows: e, defaultSelectedRows: v });
return u(() => {
JSON.stringify(v) !== JSON.stringify(m) && m && (b == null || b(m));
}, [m, v, b]), /* @__PURE__ */ s.jsxs(J, { className: "relative", children: [
/* @__PURE__ */ s.jsx(
B,
{
className: x("bg-bg", d && "sticky top-0 z-10"),
children: /* @__PURE__ */ s.jsxs(L, { children: [
N && /* @__PURE__ */ s.jsx(z, { className: "w-12 p-3", children: /* @__PURE__ */ s.jsx(
V,
{
className: "mt-1",
checked: T(p),
onCheckedChange: (t) => g(p, !!t),
"aria-label": "Select all"
}
) }),
y && /* @__PURE__ */ s.jsx(z, { className: "w-12 p-2", children: "#" }),
l.filter((t) => !t.hidden).map((t) => /* @__PURE__ */ s.jsx(
z,
{
style: t.styles,
className: x("p-2", t.sortable && "cursor-pointer"),
onClick: () => t.sortable && $(t.dataIndex),
children: /* @__PURE__ */ s.jsxs("div", { className: "flex items-center gap-2", children: [
t.name,
" ",
t.sortable && ((a == null ? void 0 : a.sortField) === t.key ? /* @__PURE__ */ s.jsxs(s.Fragment, { children: [
(a == null ? void 0 : a.sortOrder) === W.DESC && /* @__PURE__ */ s.jsx(ns, { size: 15 }),
(a == null ? void 0 : a.sortOrder) === W.ASC && /* @__PURE__ */ s.jsx(ws, { size: 15 })
] }) : /* @__PURE__ */ s.jsx(bs, { size: 15 }))
] })
},
t.key
))
] })
}
),
/* @__PURE__ */ s.jsx(O, { className: "[&>tr:nth-child(even)]:bg-bg-secondary", children: e.length ? e.map((t, n) => /* @__PURE__ */ s.jsxs(
L,
{
onClick: () => i == null ? void 0 : i(t),
className: x(i && "cursor-pointer"),
"data-state": k(t[p]) && "selected",
children: [
N && /* @__PURE__ */ s.jsx(
M,
{
className: "w-12 p-3",
onClick: (r) => r.stopPropagation(),
children: /* @__PURE__ */ s.jsx(
V,
{
className: "mt-1",
checked: k(t[p]),
onCheckedChange: (r) => f(t[p], !!r),
"aria-label": "Select row"
}
)
}
),
y && /* @__PURE__ */ s.jsx(M, { className: "w-12 p-2", children: (o.page - 1) * (o.limit || H) + n + 1 }),
l.filter((r) => !r.hidden).map((r) => /* @__PURE__ */ s.jsx(
M,
{
className: "text-body-xs-medium max-w-xs p-2",
style: r.styles,
children: r.render ? r.render(w.get(t, r.dataIndex), t) : w.get(t, r.dataIndex, "")
},
`${n}-${r.key}`
))
]
},
`${t[p]}`
)) : /* @__PURE__ */ s.jsx(L, { children: /* @__PURE__ */ s.jsx(
M,
{
colSpan: y ? N ? l.length + 2 : l.length + 1 : l.length,
children: /* @__PURE__ */ s.jsx(cs, {})
}
) }) })
] });
}, Qs = ({
dataSource: e,
columns: l,
onRowClick: i,
rowKey: p,
hasNumbers: o,
hasSearch: y,
exportOptions: N,
hasCheckbox: v,
hasPagination: b,
isStickyHeader: D,
onParamChange: d,
dataKey: a = "docs",
loading: $,
tableKey: m,
filters: k,
actions: T,
handleFilterChange: g,
params: f,
exportLoading: t = !1,
onColumnsUpdate: n,
hasColumnsVisibilityDropdown: r,
onSelectedItemsChange: A
}) => {
const { t: q } = ms(), [E, G] = ts([]), { formattedColumns: _, handleColumnsChange: Q, resetColumns: X } = rs({ key: m, columns: l });
return u(() => {
n == null || n(_);
}, [_, n]), u(() => {
A == null || A(E);
}, [E, A]), /* @__PURE__ */ s.jsxs(
"div",
{
className: "border-border-alpha-light flex grow flex-col overflow-auto rounded-xl border shadow-xs",
children: [
(y || r && m || !w.isEmpty(N) || !w.isEmpty(k)) && /* @__PURE__ */ s.jsxs("div", { className: "flex shrink-0 flex-col items-center justify-between gap-3 p-4 lg:flex-row", children: [
/* @__PURE__ */ s.jsx("div", { className: "w-full shrink", children: y && /* @__PURE__ */ s.jsx(
as,
{
defaultValue: w.get(f, "search", ""),
onSearchChange: (c) => d == null ? void 0 : d({ ...f, search: c, page: 1 })
}
) }),
/* @__PURE__ */ s.jsxs("div", { className: "flex shrink-0 items-center justify-end gap-3", children: [
N && /* @__PURE__ */ s.jsx(ps, { options: N, loading: t }),
r && m && /* @__PURE__ */ s.jsxs(Z, { children: [
/* @__PURE__ */ s.jsx(U, { asChild: !0, children: /* @__PURE__ */ s.jsxs(
Y,
{
variant: "secondary",
size: "sm",
className: "ml-auto rounded-lg px-3",
children: [
/* @__PURE__ */ s.jsx(es, {}),
" ",
/* @__PURE__ */ s.jsx("span", { className: "hidden lg:!inline", children: q("Customize columns") }),
/* @__PURE__ */ s.jsx(ls, {})
]
}
) }),
/* @__PURE__ */ s.jsxs(I, { align: "end", children: [
/* @__PURE__ */ s.jsxs(
K,
{
className: "capitalize",
onClick: X,
children: [
/* @__PURE__ */ s.jsx(gs, {}),
" ",
q("Reset columns")
]
}
),
/* @__PURE__ */ s.jsx(S, {}),
_.map((c) => /* @__PURE__ */ s.jsx(
P,
{
className: "capitalize",
checked: !c.hidden,
onCheckedChange: (F) => Q(c, !F),
children: c.name
},
c.key
))
] })
] }),
T && /* @__PURE__ */ s.jsx(fs, { actions: T }),
k && /* @__PURE__ */ s.jsx(
xs,
{
filters: k,
params: f,
onFilter: (c) => {
d == null || d({ ...f, ...c, page: 1 }), g == null || g(c);
}
}
)
] })
] }),
/* @__PURE__ */ s.jsx("div", { className: "flex flex-col overflow-auto border-y", children: $ ? /* @__PURE__ */ s.jsx(os, {}) : /* @__PURE__ */ s.jsx(
Ms,
{
params: {
page: (e == null ? void 0 : e.page) || 1,
limit: e == null ? void 0 : e.limit,
...f
},
rows: w.get(e, a, []),
rowKey: p,
selectedItems: E,
isStickyHeader: D,
columns: _,
hasCheckbox: v,
hasNumbers: o,
onRowClick: i,
onSelectedItemsChange: G,
onSortOrderChange: ({ sortField: c, sortOrder: F }) => {
d == null || d({ ...f, sortField: c, sortOrder: F });
}
}
) }),
b && /* @__PURE__ */ s.jsxs("div", { className: "flex shrink-0 flex-col items-center justify-between gap-3 p-4 lg:flex-row", children: [
/* @__PURE__ */ s.jsx("div", { className: "text-sm", children: /* @__PURE__ */ s.jsx(
C,
{
onLimitChange: (c) => d == null ? void 0 : d({ ...f, limit: c, page: 1 }),
defaultValue: e == null ? void 0 : e.limit
}
) }),
/* @__PURE__ */ s.jsxs("div", { className: "text-muted-foreground text-sm", children: [
E.length,
" of ",
(e == null ? void 0 : e.total) || 0,
" row(s) selected."
] }),
/* @__PURE__ */ s.jsx("div", { children: /* @__PURE__ */ s.jsx(
ss,
{
onPageChange: (c) => d == null ? void 0 : d({ ...f, page: c }),
currentPage: e == null ? void 0 : e.page,
totalPages: e == null ? void 0 : e.totalPages
}
) })
] })
]
}
);
};
export {
Qs as DataTable,
Ms as MyTable
};