dgz-ui-shared
Version:
Custom ui library using React.js, Shadcn/ui, TailwindCSS, Typescript, dgz-ui library
196 lines (195 loc) • 5.62 kB
JavaScript
import { j as i } from "./jsx-runtime-C5mzlN2N.js";
import { a as m } from "./index-DqTIeHVj-CYOpXZHK.js";
import * as f from "react";
import { useCallback as R } from "react";
import { g as k } from "./check-DE-1lGDl-24KCJ29m.js";
import { m as n } from "./utils-D0f6bOsw-HrLsble-.js";
import { e as z } from "./chevron-right-HWBijj-I-BaBb7aQZ.js";
import { k as $ } from "./createLucideIcon-B950nf2d-WasJb88J.js";
import { A as p, U as h, y as j, j as N, $ as t } from "./select-BehdTDP2-BxIxRb2_.js";
import { u as v } from "./useTranslation-dH-uwymc.js";
/**
* @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 M = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]], g = $("chevron-left", M), u = ({ className: s, ...a }) => /* @__PURE__ */ m.jsx(
"nav",
{
role: "navigation",
"aria-label": "pagination",
className: n("flex w-full justify-center", s),
...a
}
);
u.displayName = "Pagination";
const w = f.forwardRef(({ className: s, ...a }, l) => /* @__PURE__ */ m.jsx(
"ul",
{
ref: l,
className: n("flex flex-row items-center gap-1", s),
...a
}
));
w.displayName = "PaginationContent";
const r = f.forwardRef(({ className: s, ...a }, l) => /* @__PURE__ */ m.jsx("li", { ref: l, className: n("", s), ...a }));
r.displayName = "PaginationItem";
const x = ({
className: s,
isActive: a,
size: l = "icon",
...c
}) => /* @__PURE__ */ m.jsx(
"a",
{
"aria-current": a ? "page" : void 0,
className: n(
k({
variant: a ? "tertiary" : "ghost",
size: l
}),
"cursor-pointer",
s
),
...c
}
);
x.displayName = "PaginationLink";
const y = ({
className: s,
...a
}) => /* @__PURE__ */ m.jsx(
x,
{
"aria-label": "Go to previous page",
size: "default",
className: n("gap-1 px-2.5", s),
...a,
children: /* @__PURE__ */ m.jsx(g, { className: "h-4 w-4" })
}
);
y.displayName = "PaginationPrevious";
const b = ({
className: s,
...a
}) => /* @__PURE__ */ m.jsx(
x,
{
"aria-label": "Go to next page",
size: "default",
className: n("gap-1 px-2.5", s),
...a,
children: /* @__PURE__ */ m.jsx(z, { className: "h-4 w-4" })
}
);
b.displayName = "PaginationNext";
const F = ({
currentPage: s = 1,
totalPages: a = 0,
onPageChange: l
}) => {
const { t: c } = v(), A = R(() => {
const e = [];
e.push(1), s - 1 > 2 && e.push("...");
for (let d = Math.max(2, s - 1); d <= Math.min(a - 1, s + 1); d++)
e.push(d);
return s + 1 < a - 1 && e.push("..."), a > 1 && e.push(a), e;
}, [s, a]);
return /* @__PURE__ */ i.jsxs("div", { className: "flex flex-col lg:flex-row items-center justify-end gap-3", children: [
/* @__PURE__ */ i.jsxs("div", { className: "flex gap-3 text-sm items-center", children: [
/* @__PURE__ */ i.jsxs("div", { className: "font-semibold min-w-20", children: [
c("Go to page"),
":"
] }),
/* @__PURE__ */ i.jsxs(
p,
{
onValueChange: (e) => l(parseInt(e)),
defaultValue: "1",
children: [
/* @__PURE__ */ i.jsx(h, { className: "w-14 h-8.5", children: /* @__PURE__ */ i.jsx(j, {}) }),
/* @__PURE__ */ i.jsx(N, { children: new Array(a).fill(0).map((e, o) => /* @__PURE__ */ i.jsx(t, { value: `${o + 1}`, children: o + 1 }, o + 1)) })
]
}
)
] }),
/* @__PURE__ */ i.jsx(u, { className: "justify-end", children: /* @__PURE__ */ i.jsxs(w, { children: [
/* @__PURE__ */ i.jsx(r, { children: /* @__PURE__ */ i.jsx(
y,
{
isActive: s > 1,
size: "sm",
className: n(s > 1 ? "disabled" : "shadow"),
onClick: () => {
s > 1 && l(s - 1);
}
}
) }),
A().map((e, o) => /* @__PURE__ */ i.jsx(
r,
{
onClick: () => {
typeof e == "number" && l(e);
},
children: /* @__PURE__ */ i.jsx(
x,
{
size: "sm",
className: n(
"w-9 text-center px-0",
e === s && "shadow"
),
isActive: e === s,
children: e
}
)
},
o
)),
/* @__PURE__ */ i.jsx(r, { children: /* @__PURE__ */ i.jsx(
b,
{
size: "sm",
onClick: () => {
s < a && l(s + 1);
},
className: n(s < a ? "disabled" : "shadow"),
isActive: s < a
}
) })
] }) })
] });
}, I = 50, S = ({
defaultValue: s = I,
onLimitChange: a
}) => {
const { t: l } = v();
return /* @__PURE__ */ i.jsxs("div", { className: "flex gap-3 items-center", children: [
/* @__PURE__ */ i.jsxs("span", { className: "font-semibold", children: [
l("Rows per page"),
":"
] }),
/* @__PURE__ */ i.jsxs(
p,
{
onValueChange: (c) => a(c),
value: `${s}`,
children: [
/* @__PURE__ */ i.jsx(h, { className: "w-17 h-8.5", children: /* @__PURE__ */ i.jsx(j, {}) }),
/* @__PURE__ */ i.jsxs(N, { children: [
/* @__PURE__ */ i.jsx(t, { value: "10", children: "10" }),
/* @__PURE__ */ i.jsx(t, { value: "20", children: "20" }),
/* @__PURE__ */ i.jsx(t, { value: "50", children: "50" }),
/* @__PURE__ */ i.jsx(t, { value: "100", children: "100" })
] })
]
}
)
] });
};
export {
I as D,
F as M,
S as a
};