dgz-ui-shared
Version:
Custom ui library using React.js, Shadcn/ui, TailwindCSS, Typescript, dgz-ui library
390 lines (389 loc) • 13.3 kB
JavaScript
import { j as e } from "../../jsx-runtime-C5mzlN2N.js";
import { u as W } from "../../button-Bp2lHjov-BTlHPcva.js";
import { N as B, j as G, u as J, i as O, f as Q, d as S } from "../../dropdown-menu-BPBcxHRB-EjT0ADL9.js";
import { D as I, a as X, M as Y } from "../../MyLimitSelect-Bzc40bxS.js";
import { y as Z, f as K } from "../../index-KCZvOJVU.js";
import { forwardRef as p, useEffect as C, useState as P } from "react";
import { l as h } from "../../lodash-CYNxjS-I.js";
import { a as f } from "../../index-DqTIeHVj-CeLMF2B2.js";
import { m as o } from "../../utils-B6fNqzRf-B1_jG1K7.js";
import { u as ee, a as se, b as te } from "../../useSortable-DRvyr1Gy.js";
import { T as D } from "../../radio-group-CqPTye2U-DGs9dBuR.js";
import { S as F } from "../../SortOrder-CwuehjY1.js";
import { E as le } from "../../Empty--aMfJ9Jw.js";
import { c as E } from "../../createLucideIcon-B950nf2d.js";
import { S as de, F as ie } from "../../FilterWrapper-C6rEmxjr.js";
import { L as re } from "../../Loader-CVKJNLck.js";
import { A as ae } from "../../Actions-h8ihzX2Y.js";
import { u as ce } from "../../useTranslation-dH-uwymc.js";
const $ = p(
({ className: s, ...l }, d) => /* @__PURE__ */ f.jsx(
"table",
{
ref: d,
className: o("w-full caption-bottom text-sm", s),
...l
}
)
);
$.displayName = "Table";
const q = p(({ className: s, ...l }, d) => /* @__PURE__ */ f.jsx("thead", { ref: d, className: o("[&_tr]:border-b", s), ...l }));
q.displayName = "TableHeader";
const H = p(({ className: s, ...l }, d) => /* @__PURE__ */ f.jsx(
"tbody",
{
ref: d,
className: o("[&_tr:last-child]:border-0", s),
...l
}
));
H.displayName = "TableBody";
const oe = p(({ className: s, ...l }, d) => /* @__PURE__ */ f.jsx(
"tfoot",
{
ref: d,
className: o(
"bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
s
),
...l
}
));
oe.displayName = "TableFooter";
const T = p(({ className: s, ...l }, d) => /* @__PURE__ */ f.jsx(
"tr",
{
ref: d,
className: o(
"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
s
),
...l
}
));
T.displayName = "TableRow";
const _ = p(({ className: s, ...l }, d) => /* @__PURE__ */ f.jsx(
"th",
{
ref: d,
className: o(
"text-muted-foreground h-12 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0",
s
),
...l
}
));
_.displayName = "TableHead";
const v = p(({ className: s, ...l }, d) => /* @__PURE__ */ f.jsx(
"td",
{
ref: d,
className: o("p-4 align-middle [&:has([role=checkbox])]:pr-0", s),
...l
}
));
v.displayName = "TableCell";
const xe = p(({ className: s, ...l }, d) => /* @__PURE__ */ f.jsx(
"caption",
{
ref: d,
className: o("text-muted-foreground mt-4 text-sm", s),
...l
}
));
xe.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 me = [
["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" }]
], ne = E("arrow-down-wide-narrow", me);
/**
* @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 pe = [
["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" }]
], fe = E("arrow-up-down", pe);
/**
* @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 he = [
["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" }]
], je = E("arrow-up-wide-narrow", he);
/**
* @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 Ne = [
["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" }]
], ye = E("refresh-cw", Ne), be = ({
rows: s = [],
columns: l,
onRowClick: d,
rowKey: n,
params: x = {
page: 1,
limit: I
},
hasNumbers: j = !1,
hasCheckbox: y = !1,
selectedItems: A,
onSelectedItemsChange: u,
onSortOrderChange: i,
isStickyHeader: L
}) => {
const { sortObject: c, handleSort: b } = ee({
sortField: x == null ? void 0 : x.sortField,
sortOrder: x == null ? void 0 : x.sortField,
onSortOrderChange: i
}), {
selectedRows: N,
isRowSelected: k,
isAllRowsSelected: w,
handleSelectAllRows: m,
handleSelectRow: M
} = se({ rows: s, defaultSelectedRows: A });
return C(() => {
u && u(N);
}, [N]), /* @__PURE__ */ e.jsxs($, { className: "relative", children: [
/* @__PURE__ */ e.jsx(
q,
{
className: o("bg-bg", L && "sticky top-0 z-10"),
children: /* @__PURE__ */ e.jsxs(T, { children: [
y && /* @__PURE__ */ e.jsx(_, { className: "w-12 p-3", children: /* @__PURE__ */ e.jsx(
D,
{
className: "mt-1",
checked: w(n),
onCheckedChange: (t) => m(n, !!t),
"aria-label": "Select all"
}
) }),
j && /* @__PURE__ */ e.jsx(_, { className: "w-12 p-2", children: "#" }),
l.filter((t) => !t.hidden).map((t) => /* @__PURE__ */ e.jsx(
_,
{
style: t.styles,
className: o("p-2", t.sortable && "cursor-pointer"),
onClick: () => t.sortable && b(t.dataIndex),
children: /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2", children: [
t.name,
" ",
t.sortable && ((c == null ? void 0 : c.sortField) === t.key ? /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
(c == null ? void 0 : c.sortOrder) === F.DESC && /* @__PURE__ */ e.jsx(ne, { size: 15 }),
(c == null ? void 0 : c.sortOrder) === F.ASC && /* @__PURE__ */ e.jsx(je, { size: 15 })
] }) : /* @__PURE__ */ e.jsx(fe, { size: 15 }))
] })
},
t.key
))
] })
}
),
/* @__PURE__ */ e.jsx(H, { className: "[&>tr:nth-child(even)]:bg-bg-secondary", children: s.length ? s.map((t, g) => /* @__PURE__ */ e.jsxs(
T,
{
onClick: () => d == null ? void 0 : d(t),
className: o(d && "cursor-pointer"),
"data-state": k(t[n]) && "selected",
children: [
y && /* @__PURE__ */ e.jsx(
v,
{
className: "w-12 p-3",
onClick: (a) => a.stopPropagation(),
children: /* @__PURE__ */ e.jsx(
D,
{
className: "mt-1",
checked: k(t[n]),
onCheckedChange: (a) => M(t[n], !!a),
"aria-label": "Select row"
}
)
}
),
j && /* @__PURE__ */ e.jsx(v, { className: "w-12 p-2", children: (x.page - 1) * (x.limit || I) + g + 1 }),
l.filter((a) => !a.hidden).map((a) => /* @__PURE__ */ e.jsx(
v,
{
className: "text-body-xs-medium max-w-xs p-2",
style: a.styles,
children: a.render ? a.render(h.get(t, a.dataIndex), t) : h.get(t, a.dataIndex, "")
},
`${g}-${a.key}`
))
]
},
`${t[n]}`
)) : /* @__PURE__ */ e.jsx(T, { children: /* @__PURE__ */ e.jsx(
v,
{
colSpan: j ? y ? l.length + 2 : l.length + 1 : l.length,
children: /* @__PURE__ */ e.jsx(le, {})
}
) }) })
] });
}, He = ({
dataSource: s,
columns: l,
onRowClick: d,
rowKey: n,
hasNumbers: x,
hasSearch: j,
hasCheckbox: y,
hasPagination: A,
isStickyHeader: u,
onParamChange: i,
dataKey: L = "docs",
loading: c,
tableKey: b,
filters: N = [],
actions: k = [],
handleFilterChange: w,
params: m,
hasColumnsVisibilityDropdown: M
}) => {
const { t } = ce(), [g, a] = P([]), { formattedColumns: R, handleColumnsChange: U, resetColumns: V } = te({ key: b, columns: l });
return /* @__PURE__ */ e.jsxs(
"div",
{
className: "border-border-alpha-light flex grow flex-col overflow-auto rounded-xl border shadow-xs",
children: [
(j || M && b || !h.isEmpty(N)) && /* @__PURE__ */ e.jsxs("div", { className: "flex shrink-0 flex-col items-center justify-between gap-3 p-4 lg:flex-row", children: [
/* @__PURE__ */ e.jsx("div", { className: "w-full shrink", children: j && /* @__PURE__ */ e.jsx(
de,
{
defaultValue: h.get(m, "search", ""),
onSearchChange: (r) => i == null ? void 0 : i({ ...m, search: r, page: 1 })
}
) }),
/* @__PURE__ */ e.jsxs("div", { className: "flex shrink-0 items-center justify-end gap-3", children: [
M && b && /* @__PURE__ */ e.jsxs(B, { children: [
/* @__PURE__ */ e.jsx(G, { asChild: !0, children: /* @__PURE__ */ e.jsxs(
W,
{
variant: "secondary",
size: "sm",
className: "ml-auto rounded-lg px-3",
children: [
/* @__PURE__ */ e.jsx(Z, {}),
" ",
/* @__PURE__ */ e.jsx("span", { className: "hidden lg:!inline", children: t("Customize columns") }),
/* @__PURE__ */ e.jsx(K, {})
]
}
) }),
/* @__PURE__ */ e.jsxs(J, { align: "end", children: [
/* @__PURE__ */ e.jsxs(
O,
{
className: "capitalize",
onClick: V,
children: [
/* @__PURE__ */ e.jsx(ye, {}),
" ",
t("Reset columns")
]
}
),
/* @__PURE__ */ e.jsx(Q, {}),
R.map((r) => /* @__PURE__ */ e.jsx(
S,
{
className: "capitalize",
checked: !r.hidden,
onCheckedChange: (z) => U(r, !z),
children: r.name
},
r.key
))
] })
] }),
!h.isEmpty(k) && /* @__PURE__ */ e.jsx(ae, { actions: k }),
!h.isEmpty(N) && /* @__PURE__ */ e.jsx(
ie,
{
filters: N,
onFilter: (r) => {
i == null || i({ ...m, ...r, page: 1 }), w == null || w(r);
}
}
)
] })
] }),
/* @__PURE__ */ e.jsx("div", { className: "flex flex-col overflow-auto border-y", children: c ? /* @__PURE__ */ e.jsx(re, {}) : /* @__PURE__ */ e.jsx(
be,
{
params: m,
rows: h.get(s, L, []),
rowKey: n,
selectedItems: g,
isStickyHeader: u,
columns: R,
hasCheckbox: y,
hasNumbers: x,
onRowClick: d,
onSelectedItemsChange: a,
onSortOrderChange: ({ sortField: r, sortOrder: z }) => {
i == null || i({ ...m, sortField: r, sortOrder: z });
}
}
) }),
A && /* @__PURE__ */ e.jsxs("div", { className: "flex shrink-0 flex-col items-center justify-between gap-3 p-4 lg:flex-row", children: [
/* @__PURE__ */ e.jsx("div", { className: "text-sm", children: /* @__PURE__ */ e.jsx(
X,
{
onLimitChange: (r) => i == null ? void 0 : i({ ...m, limit: r, page: 1 }),
defaultValue: s == null ? void 0 : s.limit
}
) }),
/* @__PURE__ */ e.jsxs("div", { className: "text-muted-foreground text-sm", children: [
g.length,
" of ",
(s == null ? void 0 : s.total) || 0,
" row(s) selected."
] }),
/* @__PURE__ */ e.jsx("div", { children: /* @__PURE__ */ e.jsx(
Y,
{
onPageChange: (r) => i == null ? void 0 : i({ ...m, page: r }),
currentPage: s == null ? void 0 : s.page,
totalPages: s == null ? void 0 : s.totalPages
}
) })
] })
]
}
);
};
export {
He as DataTable,
be as MyTable
};