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

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

"use client";
import { jsxs as m, jsx as s } from "react/jsx-runtime";
import { useRef as y, useState as P, useCallback as l } from "react";
import k from "classnames";
import { IconEnter as z } from "../../internal/Icons/IconEnter.js";
import { useMatchMedia as B } from "../../internal/hooks/useMatchMedia.js";
import i from "./DataTable.module.css.js";
import { Pagination as E } from "../Pagination/Pagination.js";
const K = ({
  setCurrentPage: t,
  currentPage: d,
  pagesAmount: c,
  pageSize: g,
  onPageSizeChange: o,
  rowsCount: p
}) => {
  const u = y(null), [a, f] = P(g), e = l(
    (n) => n <= p,
    [p]
  ), h = l((n) => {
    const x = parseInt(n.target.value);
    f(x);
  }, []), N = l(
    (n) => {
      n.key === "Enter" && e(a) && (o(a), t(1));
    },
    [e, o, a, t]
  ), b = l(() => {
    e(a) && (o(a), t(1));
  }, [e, o, a, t]), r = B("(width >= 768px)"), S = r || c <= 7, v = r || c > 7;
  return /* @__PURE__ */ m("div", { className: i.paginationWrapper, children: [
    /* @__PURE__ */ s(
      E,
      {
        showPageButtons: S,
        showNavigation: v,
        onPageSelect: t,
        selectedPage: d,
        totalPages: c
      }
    ),
    /* @__PURE__ */ m("div", { className: i.paginationFieldset, children: [
      /* @__PURE__ */ s("label", { htmlFor: "input", className: i.paginationLabel, children: "Rows per page:" }),
      /* @__PURE__ */ s(
        "input",
        {
          min: 1,
          max: p,
          ref: u,
          onKeyUp: N,
          onChange: h,
          value: a,
          id: "input",
          type: "number",
          className: k(i.paginationInput, {
            [i.error]: !e(a)
          })
        }
      ),
      /* @__PURE__ */ s(
        "button",
        {
          disabled: !e(a),
          className: i.paginationButton,
          onClick: b,
          children: /* @__PURE__ */ s(z, { className: i.icon })
        }
      )
    ] })
  ] });
};
export {
  K as Pagination
};
//# sourceMappingURL=Pagination.js.map