@lanaco/lnc-react-ui/dist/Pagination.js

React component library

import { jsx as i, jsxs as G, Fragment as $ } from "react/jsx-runtime";
import { useState as E } from "react";
import { P as t } from "./index-S5Cd7WrG.js";
import h from "./Button.js";
import b from "./IconButton.js";
import U from "./ButtonGroup.js";
import { n as O } from "./emotion-styled.browser.esm-CjCaF13H.js";
import { u as q } from "./emotion-element-f0de968e.browser.esm-CkCiQliQ.js";
import { u as w } from "./useUpdateEffect-CuYWz7EA.js";
const D = O.div`
  display: inline-flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 0.375rem;
  justify-content: ${(d) => d.horizontalAlignment};
`, H = O.div`
  & > .button-group-pagination-lnc {
    width: 100%;
    justify-content: ${(d) => d.horizontalAlignment};
  }
`, I = (d) => {
  const {
    icons: c = {},
    borderRadius: f = "regular",
    currentPage: m = 1,
    buttonType: B = "outline",
    currentPageButtonType: N = "tinted",
    withFirstLast: y = !0,
    withButtonGroup: v = !0,
    disabledNext: k = !1,
    disabledPrevious: z = !1,
    disabledFirst: L = !1,
    disabledLast: j = !1,
    disabled: l = !1,
    totalNumberOfPages: g = 1,
    pagesOffset: p = 0,
    horizontalAlignment: P = "left",
    //------------------
    onPageChange: F = () => {
    },
    //------------------
    className: x = "",
    style: C = {},
    color: S = "primary",
    size: A = "small"
  } = d, s = { theme: q(), size: A, color: S, btnType: B }, [n, a] = E(m);
  w(() => {
    a(m);
  }, [m]), w(() => {
    F(n);
  }, [n]);
  const u = (r, e) => {
    e == "next" && n < g ? a(n + 1) : e == "previous" && n > 1 ? a(n - 1) : e == "last" && n != g ? a(g) : e == "first" && n != 1 ? a(1) : isNaN(+e) || a(e);
  }, R = () => {
    let r = [];
    for (let e = n - p > 0 ? n - p : 1; e < n && e > 0; e++)
      r.push(
        /* @__PURE__ */ i(
          h,
          {
            ...s,
            borderRadius: f,
            onClick: (o) => u(o, e),
            btnType: "basic",
            text: e.toString(),
            disabled: l
          },
          e
        )
      );
    r.push(
      /* @__PURE__ */ i(
        h,
        {
          ...s,
          borderRadius: f,
          btnType: N,
          text: n.toString(),
          disabled: l
        },
        n
      )
    );
    for (let e = n + 1; e <= n + p && e <= g; e++)
      r.push(
        /* @__PURE__ */ i(
          h,
          {
            ...s,
            borderRadius: f,
            onClick: (o) => u(o, e),
            btnType: "basic",
            text: e.toString(),
            disabled: l
          },
          e
        )
      );
    return r;
  }, T = (r = null) => {
    var e = {};
    return r && (e.borderRadius = r), /* @__PURE__ */ G($, { children: [
      y && /* @__PURE__ */ i(
        b,
        {
          ...s,
          icon: c.doubleLeft || "angle-double-left",
          disabled: L || l,
          onClick: (o) => u(o, "first"),
          ...e
        }
      ),
      /* @__PURE__ */ i(
        b,
        {
          ...s,
          icon: c.left || "angle-left",
          disabled: z || l,
          onClick: (o) => u(o, "previous"),
          ...e
        }
      ),
      R(),
      /* @__PURE__ */ i(
        b,
        {
          ...s,
          icon: c.right || "angle-right",
          disabled: k || l,
          onClick: (o) => u(o, "next"),
          ...e
        }
      ),
      y && /* @__PURE__ */ i(
        b,
        {
          ...s,
          icon: c.doubleRight || "angle-double-right",
          disabled: j || l,
          onClick: (o) => u(o, "last"),
          ...e
        }
      )
    ] });
  };
  return v ? /* @__PURE__ */ i(H, { horizontalAlignment: P, children: /* @__PURE__ */ i(
    U,
    {
      className: "button-group-pagination-lnc " + x,
      style: C,
      borderRadius: f,
      children: T()
    }
  ) }) : /* @__PURE__ */ i(
    D,
    {
      horizontalAlignment: P,
      className: x,
      style: C,
      children: T(f)
    }
  );
};
I.propTypes = {
  icons: t.shape({
    left: t.element,
    right: t.element,
    doubleLeft: t.element,
    doubleRight: t.element
  }),
  /**
   *  Applies to the movement buttons and to the page number buttons
   */
  disabled: t.bool,
  borderRadius: t.oneOf([
    "slight",
    "regular",
    "edged",
    "curved",
    "none"
  ]),
  /**
   * Sets the button `type`
   */
  buttonType: t.oneOf(["filled", "tinted", "outline", "basic"]),
  /**
   * Set button `type` of the current page button
   */
  currentPageButtonType: t.oneOf([
    "filled",
    "tinted",
    "outline",
    "basic"
  ]),
  /**
   * Show the First and Last buttons
   */
  withFirstLast: t.bool,
  /**
   * Wrap the buttons in a `ButtonGroup` component
   */
  withButtonGroup: t.bool,
  /**
   * Active page number
   */
  currentPage: t.number,
  totalNumberOfPages: t.number,
  /**
   * how many page numbers will be shown to the right/left of the current page
   */
  pagesOffset: t.number,
  /**
   *  Applies to the Next button
   */
  disabledNext: t.bool,
  /**
   *  Applies to the Previous button
   */
  disabledPrevious: t.bool,
  /**
   *  Applies to the First button
   */
  disabledFirst: t.bool,
  /**
   *  Applies to the Last button
   */
  disabledLast: t.bool,
  horizontalAlignment: t.oneOf(["left", "center", "right"]),
  //-------------------------------
  onPageChange: t.func,
  //-------------------------------
  className: t.string,
  style: t.object,
  size: t.oneOf(["small", "medium", "large"]),
  color: t.oneOf([
    "primary",
    "secondary",
    "success",
    "warning",
    "danger",
    "information",
    "neutral",
    "gray"
  ])
};
export {
  I as default
};