react-box-tools/dist/pagination.js

Box tools react components, utils and hooks

import { jsxs as f, jsx as m } from "react/jsx-runtime";
import { c as v } from "./clsx-DG-5vF7T.js";
import { useState as E, useEffect as C, useMemo as S } from "react";
function y({
  data: h,
  pageSize: d = 5,
  pageItems: o = 10,
  pageActive: R = 1,
  onPaginated: M,
  className: x
}) {
  const {
    onNextPage: c,
    onPrevPage: t,
    onNextRange: a,
    onPrevRange: u,
    changePage: s,
    pageNumbers: r,
    totalItems: l,
    totalPages: g,
    currentPage: i
  } = j({ data: h, pageSize: d, pageItems: o, pageActive: R, onPaginated: M }), N = i * o;
  return /* @__PURE__ */ f("div", { className: v(`pagination ${x}`), children: [
    /* @__PURE__ */ f("div", { className: "items", children: [
      /* @__PURE__ */ m(
        "button",
        {
          onClick: t,
          disabled: i === 1,
          className: "item prev",
          children: "〈"
        }
      ),
      /* @__PURE__ */ m(
        "button",
        {
          onClick: u,
          disabled: i <= d,
          className: "item prev-range",
          children: "«"
        }
      ),
      r.map((P, b) => /* @__PURE__ */ m(
        "button",
        {
          onClick: () => {
            s(P);
          },
          className: v(
            `item number ${P === i && "current-page"}`
          ),
          children: P
        },
        b
      )),
      /* @__PURE__ */ m(
        "button",
        {
          onClick: a,
          disabled: i >= g - d,
          className: "item next-range",
          children: "»"
        }
      ),
      /* @__PURE__ */ m(
        "button",
        {
          onClick: c,
          disabled: i === g,
          className: "item next",
          children: "〉"
        }
      )
    ] }),
    /* @__PURE__ */ m("span", { className: "separate", children: "|" }),
    l > 0 && /* @__PURE__ */ f("div", { className: "data-info", children: [
      /* @__PURE__ */ f("span", { className: "range", children: [
        N - o + 1,
        "–",
        l < o ? l : N
      ] }),
      /* @__PURE__ */ m("span", { className: "total", children: l })
    ] })
  ] });
}
function j({
  data: h,
  pageSize: d = 5,
  pageItems: o = 10,
  pageActive: R = 1,
  onPaginated: M
}) {
  const x = h.length, c = Math.ceil(x / o), t = Math.min(d, c), [a, u] = E([1, t]), [s, r] = E(R), l = (n) => {
    n >= 1 && n <= c && n !== s && r(n);
  }, g = (n, e) => {
    u([n, e]), l(n);
  }, i = () => {
    const n = Math.max(t, a[0] - 1), e = Math.max(1, n - (t - 1));
    g(e, n);
  }, N = () => {
    const n = Math.min(
      c - (t - 1),
      a[1] + 1
    ), e = Math.min(c, n + (t - 1));
    g(n, e);
  }, P = () => {
    if (s > 1) {
      if (s === a[0]) {
        const n = Math.max(1, a[0] - 1), e = Math.max(t, n + (t - 1));
        g(n, e);
      }
      r(s - 1);
    }
  }, b = () => {
    if (s < c) {
      if (s === a[1]) {
        const n = Math.min(
          c - (t - 1),
          a[1] + 1
        ), e = Math.min(
          c,
          n + (t - 1)
        );
        g(n, e);
      }
      r(s + 1);
    }
  }, p = () => {
    const n = (s - 1) * o, e = n + o, w = h.slice(n, e);
    M(w);
  };
  C(() => {
    const n = () => {
      const e = Math.min(
        c - (t - 1),
        a[1] + 1
      ), w = Math.min(c, e + (t - 1));
      u([e, w]), r(R);
    };
    t < d ? n() : u([1, t]);
  }, [t]);
  const k = S(() => {
    const n = [];
    for (let e = a[0]; e <= a[1]; e++)
      n.push(e);
    return n;
  }, [a, s]);
  return C(() => {
    p();
  }, [s, o]), C(() => {
    r(1), p();
  }, [h]), {
    pageNumbers: k,
    totalItems: x,
    pageRange: a,
    currentPage: s,
    totalPages: c,
    onPrevRange: i,
    onNextRange: N,
    onPrevPage: P,
    onNextPage: b,
    changePage: l
  };
}
export {
  y as Pagination,
  j as usePagination
};