dgz-ui-shared/dist/chunks/MyPagination-B0czoGZK.es.js

Custom ui library using React.js, Shadcn/ui, TailwindCSS, Typescript, dgz-ui library

import { jsxs as n, jsx as s } from "react/jsx-runtime";
import { Select as f, SelectTrigger as r, SelectValue as v, SelectContent as N, SelectItem as w, VirtualizedSelectContent as S } from "dgz-ui/form";
import { useTranslation as p } from "react-i18next";
import { Pagination as I, PaginationContent as M, PaginationItem as h, PaginationPrevious as C, PaginationLink as R, PaginationNext as T } from "dgz-ui/pagination";
import { cn as t } from "dgz-ui/utils";
import { useCallback as k, useMemo as y } from "react";
const A = 50, L = [
  {
    value: 10,
    label: "10"
  },
  {
    value: 20,
    label: "20"
  },
  {
    value: 50,
    label: "50"
  },
  {
    value: 100,
    label: "100"
  }
], E = ({
  defaultValue: i = A,
  options: l = L,
  onLimitChange: c
}) => {
  const { t: o } = p();
  return /* @__PURE__ */ n("div", { className: "flex items-center gap-3", children: [
    /* @__PURE__ */ n("span", { className: "font-semibold", children: [
      o("Rows per page"),
      ":"
    ] }),
    /* @__PURE__ */ n(f, { onValueChange: c, value: `${i}`, children: [
      /* @__PURE__ */ s(r, { className: "h-8.5 w-17", children: /* @__PURE__ */ s(v, {}) }),
      /* @__PURE__ */ s(N, { children: l == null ? void 0 : l.map((m) => /* @__PURE__ */ s(w, { value: `${m.value}`, children: m.label }, m.value)) })
    ] })
  ] });
}, F = ({
  currentPage: i = 1,
  totalPages: l = 0,
  onPageChange: c,
  className: o,
  ...m
}) => {
  const { t: b } = p(), u = k(() => {
    const e = [];
    e.push(1), i - 1 > 2 && e.push("...");
    for (let d = Math.max(2, i - 1); d <= Math.min(l - 1, i + 1); d++)
      e.push(d);
    return i + 1 < l - 1 && e.push("..."), l > 1 && e.push(l), e;
  }, [i, l]), x = y(() => {
    const e = [];
    for (let a = 0; a < l; a++)
      e.push({
        value: `${a + 1}`,
        label: `${a + 1}`
      });
    return e;
  }, [l]);
  return /* @__PURE__ */ n(
    "div",
    {
      ...m,
      className: t(
        "flex flex-col items-center justify-end gap-3 lg:flex-row",
        o
      ),
      children: [
        /* @__PURE__ */ n("div", { className: "flex items-center gap-3 text-sm", children: [
          /* @__PURE__ */ n("div", { className: "min-w-20 font-semibold", children: [
            b("Go to page"),
            ":"
          ] }),
          /* @__PURE__ */ n(
            f,
            {
              onValueChange: (e) => c(parseInt(e)),
              value: `${i}`,
              children: [
                /* @__PURE__ */ s(r, { className: "h-8.5 w-16", children: /* @__PURE__ */ s(v, {}) }),
                /* @__PURE__ */ s(S, { options: x })
              ]
            }
          )
        ] }),
        /* @__PURE__ */ s(I, { className: "justify-end", children: /* @__PURE__ */ n(M, { children: [
          /* @__PURE__ */ s(h, { children: /* @__PURE__ */ s(
            C,
            {
              isActive: i > 1,
              size: "sm",
              className: t(i > 1 ? "disabled" : "shadow"),
              onClick: () => {
                i > 1 && c(i - 1);
              }
            }
          ) }),
          u().map((e, a) => /* @__PURE__ */ s(
            h,
            {
              onClick: () => {
                typeof e == "number" && c(e);
              },
              children: /* @__PURE__ */ s(
                R,
                {
                  size: "sm",
                  className: t(
                    "w-9 px-0 text-center",
                    e === i && "shadow"
                  ),
                  isActive: e === i,
                  children: e
                }
              )
            },
            a
          )),
          /* @__PURE__ */ s(h, { children: /* @__PURE__ */ s(
            T,
            {
              size: "sm",
              onClick: () => {
                i < l && c(i + 1);
              },
              className: t(i < l ? "disabled" : "shadow"),
              isActive: i < l
            }
          ) })
        ] }) })
      ]
    }
  );
};
export {
  A as D,
  E as M,
  F as a
};
//# sourceMappingURL=MyPagination-B0czoGZK.es.js.map