koval-ui/dist/src/lib/Pagination/Pagination.js

React components collection with minimalistic design. Supports theming, layout, and input validation.

"use client";
import { jsxs as m, jsx as t } from "react/jsx-runtime";
import { forwardRef as T, useEffect as x, useState as U, useCallback as u, useMemo as _, Fragment as q } from "react";
import h from "classnames";
import { useLocalTheme as G } from "css-vars-hook";
import { createArray as H } from "../../internal/utils/createArray.js";
import { IconForward as J } from "../../internal/Icons/IconForward.js";
import { IconBackward as O } from "../../internal/Icons/IconBackward.js";
import { IconEnter as Q } from "../../internal/Icons/IconEnter.js";
import { PageButton as v } from "./PageButton.js";
import { usePagePaginationState as S } from "./usePagePaginationState.js";
import n from "./Pagination.module.css.js";
const W = T(
  ({
    children: X,
    className: y,
    totalPages: d,
    onPageSelect: r,
    selectedPage: g,
    showNavigation: A = !0,
    showPageButtons: E = !0,
    ...w
  }, L) => {
    const {
      visible: j,
      first: N,
      last: f,
      selectedPage: o,
      setSelectedPage: a,
      nextPage: k,
      previousPage: b,
      isLong: C,
      maxDigits: B,
      checkValidity: l
    } = S(d, g);
    x(() => {
      a(g);
    }, [g, a]);
    const [i, p] = U(o);
    x(() => {
      p(o);
    }, [o]);
    const s = u(
      (e) => {
        a(e), p(e), r(e);
      },
      [r, a]
    ), D = u(() => {
      a(k), r(k);
    }, [k, r, a]), F = u(() => {
      a(b), r(b);
    }, [r, b, a]), R = u(
      (e) => {
        const c = parseInt(e.target.value);
        e.target.value !== "" && p(c);
      },
      [p]
    ), V = u(() => {
      l(i) && i !== null && s(i);
    }, [l, s, i]), z = u(
      (e) => {
        e.key === "Enter" && l(i) && i !== null && s(i);
      },
      [l, s, i]
    ), { LocalRoot: K } = G(), M = _(
      () => ({
        digits: B
      }),
      [B]
    );
    return /* @__PURE__ */ m("div", { ...w, className: h(n.pagination, y), ref: L, children: [
      E && /* @__PURE__ */ m("div", { className: h(n.buttons, { [n.short]: !C }), children: [
        !C && H(d).map((e, c) => {
          const P = c + 1 === o;
          return /* @__PURE__ */ t(
            v,
            {
              isActive: P,
              onClick: s,
              pageNumber: c + 1
            },
            c
          );
        }),
        C && /* @__PURE__ */ m(q, { children: [
          /* @__PURE__ */ t(
            v,
            {
              isActive: N === o,
              onClick: s,
              pageNumber: N
            }
          ),
          /* @__PURE__ */ t("div", { className: n.ellipsis, children: "…" }),
          j.map((e, c) => {
            const I = e === o;
            return /* @__PURE__ */ t(
              v,
              {
                className: h({
                  [n.centerButton]: c !== 1
                }),
                isActive: I,
                onClick: s,
                pageNumber: e
              },
              e
            );
          }),
          /* @__PURE__ */ t("div", { className: n.ellipsis, children: "…" }),
          /* @__PURE__ */ t(
            v,
            {
              isActive: f === o,
              onClick: s,
              pageNumber: f
            }
          )
        ] })
      ] }),
      A && /* @__PURE__ */ m(K, { className: n.navigation, theme: M, children: [
        /* @__PURE__ */ m("div", { className: n.navigationBlock, children: [
          /* @__PURE__ */ t(
            "button",
            {
              disabled: d === 1,
              onClick: F,
              className: n.navigationButton,
              children: /* @__PURE__ */ t(O, { className: n.icon })
            }
          ),
          /* @__PURE__ */ t(
            "button",
            {
              disabled: d === 1,
              onClick: D,
              className: n.navigationButton,
              children: /* @__PURE__ */ t(J, { className: n.icon })
            }
          )
        ] }),
        /* @__PURE__ */ m("div", { className: n.navigationBlock, children: [
          /* @__PURE__ */ t(
            "input",
            {
              className: h(n.input, {
                [n.error]: !l(i)
              }),
              min: N,
              max: f,
              pattern: "[0-9]{10}",
              step: "1",
              size: B,
              type: "number",
              value: i,
              onChange: R,
              onKeyUp: z
            }
          ),
          /* @__PURE__ */ t(
            "button",
            {
              disabled: !l(i) || i === null,
              className: n.navigationButton,
              onClick: V,
              children: /* @__PURE__ */ t(Q, { className: n.icon })
            }
          )
        ] })
      ] })
    ] });
  }
);
W.displayName = "Pagination";
export {
  W as Pagination
};
//# sourceMappingURL=Pagination.js.map