@ea-lab/reactive-json/dist/component/hook/usePagination.js

A REACT-based lib that transforms JSON (or YAML) into interactive HTML markup.

import { jsx as t, jsxs as A } from "react/jsx-runtime";
import { useContext as w, useState as y } from "react";
import { GlobalDataContext as j } from "../../engine/GlobalDataContext.js";
import '../../assets/usePagination.css';const V = "_paginationContainer_1uiid_1", $ = "_paginationFirst_1uiid_11", S = "_paginationPrev_1uiid_12", q = "_paginationItem_1uiid_13", z = "_paginationNext_1uiid_14", H = "_paginationLast_1uiid_15", J = "_active_1uiid_71", K = "_paginationEllipsis_1uiid_83", r = {
  paginationContainer: V,
  paginationFirst: $,
  paginationPrev: S,
  paginationItem: q,
  paginationNext: z,
  paginationLast: H,
  active: J,
  paginationEllipsis: K
}, ti = ({
  customComponents: i = {},
  containerProps: n = {},
  dataToPaginate: e = [],
  forcePaginationDisplay: o = !1,
  itemProps: u = {},
  maxPageButtonsCount: c = 5,
  pageMaxItemCount: p = 10
}) => {
  var x;
  const d = w(j), l = ((x = d == null ? void 0 : d.plugins) == null ? void 0 : x.pagination) ?? {}, E = i.Container ?? l.Container ?? O, F = i.First ?? l.First ?? Q, I = i.Prev ?? l.Prev ?? R, L = i.Item ?? l.Item ?? U, v = i.Ellipsis ?? l.Ellipsis ?? W, D = i.Next ?? l.Next ?? X, k = i.Last ?? l.Last ?? Y, [s, g] = y(0), f = Math.floor(c / 2), P = s * p, N = P + p, m = (a) => Math.ceil(a.length / p);
  return {
    firstShownItemIndex: P,
    getPageCountForContent: m,
    maxShownItemIndexExcluded: N,
    PageControls: () => {
      const a = m(e);
      return !o && a <= 1 ? null : /* @__PURE__ */ A(E, { ...n, children: [
        /* @__PURE__ */ t(
          F,
          {
            disabled: s <= 0,
            onClick: () => {
              g(0);
            }
          }
        ),
        /* @__PURE__ */ t(
          I,
          {
            disabled: s <= 0,
            onClick: () => {
              g(s - 1);
            }
          }
        ),
        Math.min(s - f, a - c) > 0 ? /* @__PURE__ */ t(v, { disabled: !0 }) : null,
        (() => {
          const C = [];
          let _ = Math.min(
            Math.max(0, a - c),
            Math.max(0, s - f)
          ), b = c;
          const M = (h, G) => {
            C.push(
              /* @__PURE__ */ t(
                L,
                {
                  active: s === h,
                  onClick: () => {
                    g(h);
                  },
                  ...u,
                  children: h + 1
                },
                c - G
              )
            );
          };
          for (; b && (M(_, b), ++_, --b, !(_ >= a)); )
            ;
          return C;
        })(),
        a > Math.max(f, s) + Math.ceil(c / 2) ? /* @__PURE__ */ t(v, { disabled: !0 }) : null,
        /* @__PURE__ */ t(
          D,
          {
            disabled: s + 1 >= a,
            onClick: () => {
              g(s + 1);
            }
          }
        ),
        /* @__PURE__ */ t(
          k,
          {
            disabled: s + 1 >= a,
            onClick: () => {
              g(a - 1);
            }
          }
        )
      ] });
    },
    pageMaxItemCount: p,
    sliceVisibleContent: (a) => Array.isArray(a) ? a.slice(P, N) : a
  };
};
function O({ children: i, ...n }) {
  return /* @__PURE__ */ t("nav", { "aria-label": "Pagination", ...n, children: /* @__PURE__ */ t("div", { className: r.paginationContainer, children: i }) });
}
function Q({ disabled: i, onClick: n, children: e, ...o }) {
  return /* @__PURE__ */ t(
    "button",
    {
      disabled: i,
      onClick: n,
      className: r.paginationFirst,
      "aria-label": "Go to first page",
      ...o,
      children: e ?? "«"
    }
  );
}
function R({ disabled: i, onClick: n, children: e, ...o }) {
  return /* @__PURE__ */ t(
    "button",
    {
      disabled: i,
      onClick: n,
      className: r.paginationPrev,
      "aria-label": "Go to previous page",
      ...o,
      children: e ?? "‹"
    }
  );
}
function U({ active: i, disabled: n, onClick: e, children: o, ...u }) {
  return /* @__PURE__ */ t(
    "button",
    {
      disabled: n,
      onClick: e,
      "aria-current": i ? "page" : void 0,
      className: `${r.paginationItem} ${i ? r.active : ""}`,
      ...u,
      children: o
    }
  );
}
function W({ children: i, ...n }) {
  return /* @__PURE__ */ t("span", { className: r.paginationEllipsis, ...n, children: i ?? "…" });
}
function X({ disabled: i, onClick: n, children: e, ...o }) {
  return /* @__PURE__ */ t(
    "button",
    {
      disabled: i,
      onClick: n,
      className: r.paginationNext,
      "aria-label": "Go to next page",
      ...o,
      children: e ?? "›"
    }
  );
}
function Y({ disabled: i, onClick: n, children: e, ...o }) {
  return /* @__PURE__ */ t(
    "button",
    {
      disabled: i,
      onClick: n,
      className: r.paginationLast,
      "aria-label": "Go to last page",
      ...o,
      children: e ?? "»"
    }
  );
}
export {
  ti as usePagination
};