@intility/bifrost-react/dist/components/Pagination/Pagination.js

React library for Intility's design system, Bifrost.

"use client";

import { c as _c } from "react-compiler-runtime";
import { forwardRef } from "react";
import classnames from "classnames";
import { faAngleLeft } from "@fortawesome/free-solid-svg-icons/faAngleLeft";
import { faAngleRight } from "@fortawesome/free-solid-svg-icons/faAngleRight";
import { faAnglesLeft } from "@fortawesome/free-solid-svg-icons/faAnglesLeft";
import { faAnglesRight } from "@fortawesome/free-solid-svg-icons/faAnglesRight";
import Icon from "../Icon/Icon.js";
import useLocale from "../../hooks/useLocale.js";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
/**
 * Component for displaying available pages and current page in a paged
 * environment
 *
 * @see https://bifrost.intility.com/react/pagination
 */
const Pagination = /*#__PURE__*/forwardRef((t0, ref) => {
  const $ = _c(69);
  let className;
  let currentPage;
  let onChange;
  let props;
  let t1;
  let totalPages;
  if ($[0] !== t0) {
    ({
      className,
      currentPage,
      totalPages,
      displayPages: t1,
      onChange,
      ...props
    } = t0);
    $[0] = t0;
    $[1] = className;
    $[2] = currentPage;
    $[3] = onChange;
    $[4] = props;
    $[5] = t1;
    $[6] = totalPages;
  } else {
    className = $[1];
    currentPage = $[2];
    onChange = $[3];
    props = $[4];
    t1 = $[5];
    totalPages = $[6];
  }
  const displayPages = t1 === undefined ? 9 : t1;
  const locale = useLocale();
  const displayPagesCapForMediumScreens = Math.min(displayPages, 9);
  let t2;
  if ($[7] !== className) {
    t2 = classnames(className, "bf-pagination bf-container");
    $[7] = className;
    $[8] = t2;
  } else {
    t2 = $[8];
  }
  const t3 = `${locale.goTo} ${locale.first} ${locale.page}`;
  const t4 = currentPage <= 1;
  let t5;
  if ($[9] !== onChange) {
    t5 = () => onChange(1);
    $[9] = onChange;
    $[10] = t5;
  } else {
    t5 = $[10];
  }
  let t6;
  if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
    t6 = /*#__PURE__*/_jsx(Icon, {
      widthAuto: true,
      icon: faAnglesLeft
    });
    $[11] = t6;
  } else {
    t6 = $[11];
  }
  let t7;
  if ($[12] !== t3 || $[13] !== t4 || $[14] !== t5) {
    t7 = /*#__PURE__*/_jsx("button", {
      "aria-label": t3,
      type: "button",
      disabled: t4,
      className: "bf-pagination-button bf-pagination-button-arrow to-small-container",
      onClick: t5,
      children: t6
    });
    $[12] = t3;
    $[13] = t4;
    $[14] = t5;
    $[15] = t7;
  } else {
    t7 = $[15];
  }
  const t8 = `${locale.goTo} ${locale.previous} ${locale.page}`;
  const t9 = currentPage <= 1;
  let t10;
  if ($[16] !== currentPage || $[17] !== onChange) {
    t10 = () => onChange(currentPage - 1);
    $[16] = currentPage;
    $[17] = onChange;
    $[18] = t10;
  } else {
    t10 = $[18];
  }
  let t11;
  if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
    t11 = /*#__PURE__*/_jsx(Icon, {
      widthAuto: true,
      icon: faAngleLeft
    });
    $[19] = t11;
  } else {
    t11 = $[19];
  }
  let t12;
  if ($[20] !== locale.prev) {
    t12 = /*#__PURE__*/_jsx("span", {
      className: "bf-neutral-link-text",
      children: locale.prev
    });
    $[20] = locale.prev;
    $[21] = t12;
  } else {
    t12 = $[21];
  }
  let t13;
  if ($[22] !== t10 || $[23] !== t12 || $[24] !== t8 || $[25] !== t9) {
    t13 = /*#__PURE__*/_jsxs("button", {
      "aria-label": t8,
      type: "button",
      className: "bf-neutral-link bf-pagination-prev",
      disabled: t9,
      onClick: t10,
      children: [t11, t12]
    });
    $[22] = t10;
    $[23] = t12;
    $[24] = t8;
    $[25] = t9;
    $[26] = t13;
  } else {
    t13 = $[26];
  }
  const t14 = `${currentPage} ${locale.of} ${totalPages}`;
  let t15;
  if ($[27] !== t14) {
    t15 = /*#__PURE__*/_jsx("span", {
      className: "to-small-container",
      children: t14
    });
    $[27] = t14;
    $[28] = t15;
  } else {
    t15 = $[28];
  }
  let t16;
  if ($[29] !== currentPage || $[30] !== displayPagesCapForMediumScreens || $[31] !== onChange || $[32] !== totalPages) {
    t16 = /*#__PURE__*/_jsx("span", {
      className: "from-small-container to-medium-container",
      children: totalPages > displayPagesCapForMediumScreens ? /*#__PURE__*/_jsx(ComplexPagination, {
        currentPage: currentPage,
        onChange: onChange,
        displayPages: displayPagesCapForMediumScreens,
        totalPages: totalPages
      }) : /*#__PURE__*/_jsx(BasicPagination, {
        currentPage: currentPage,
        onChange: onChange,
        totalPages: totalPages
      })
    });
    $[29] = currentPage;
    $[30] = displayPagesCapForMediumScreens;
    $[31] = onChange;
    $[32] = totalPages;
    $[33] = t16;
  } else {
    t16 = $[33];
  }
  let t17;
  if ($[34] !== currentPage || $[35] !== displayPages || $[36] !== onChange || $[37] !== totalPages) {
    t17 = /*#__PURE__*/_jsx("span", {
      className: "from-medium-container",
      children: totalPages > displayPages ? /*#__PURE__*/_jsx(ComplexPagination, {
        currentPage: currentPage,
        onChange: onChange,
        displayPages: displayPages,
        totalPages: totalPages
      }) : /*#__PURE__*/_jsx(BasicPagination, {
        currentPage: currentPage,
        onChange: onChange,
        totalPages: totalPages
      })
    });
    $[34] = currentPage;
    $[35] = displayPages;
    $[36] = onChange;
    $[37] = totalPages;
    $[38] = t17;
  } else {
    t17 = $[38];
  }
  const t18 = `${locale.goTo} ${locale.next} ${locale.page}`;
  const t19 = currentPage >= totalPages;
  let t20;
  if ($[39] !== currentPage || $[40] !== onChange) {
    t20 = () => onChange(currentPage + 1);
    $[39] = currentPage;
    $[40] = onChange;
    $[41] = t20;
  } else {
    t20 = $[41];
  }
  let t21;
  if ($[42] !== locale.next) {
    t21 = /*#__PURE__*/_jsx("span", {
      className: "bf-neutral-link-text",
      children: locale.next
    });
    $[42] = locale.next;
    $[43] = t21;
  } else {
    t21 = $[43];
  }
  let t22;
  if ($[44] === Symbol.for("react.memo_cache_sentinel")) {
    t22 = /*#__PURE__*/_jsx(Icon, {
      widthAuto: true,
      icon: faAngleRight
    });
    $[44] = t22;
  } else {
    t22 = $[44];
  }
  let t23;
  if ($[45] !== t18 || $[46] !== t19 || $[47] !== t20 || $[48] !== t21) {
    t23 = /*#__PURE__*/_jsxs("button", {
      "aria-label": t18,
      type: "button",
      className: "bf-neutral-link bf-pagination-next",
      disabled: t19,
      onClick: t20,
      children: [t21, t22]
    });
    $[45] = t18;
    $[46] = t19;
    $[47] = t20;
    $[48] = t21;
    $[49] = t23;
  } else {
    t23 = $[49];
  }
  const t24 = `${locale.goTo} ${locale.last} ${locale.page}`;
  const t25 = currentPage >= totalPages;
  let t26;
  if ($[50] !== onChange || $[51] !== totalPages) {
    t26 = () => onChange(totalPages);
    $[50] = onChange;
    $[51] = totalPages;
    $[52] = t26;
  } else {
    t26 = $[52];
  }
  let t27;
  if ($[53] === Symbol.for("react.memo_cache_sentinel")) {
    t27 = /*#__PURE__*/_jsx(Icon, {
      widthAuto: true,
      icon: faAnglesRight
    });
    $[53] = t27;
  } else {
    t27 = $[53];
  }
  let t28;
  if ($[54] !== t24 || $[55] !== t25 || $[56] !== t26) {
    t28 = /*#__PURE__*/_jsx("button", {
      "aria-label": t24,
      type: "button",
      className: "bf-pagination-button bf-pagination-button-arrow to-small-container",
      disabled: t25,
      onClick: t26,
      children: t27
    });
    $[54] = t24;
    $[55] = t25;
    $[56] = t26;
    $[57] = t28;
  } else {
    t28 = $[57];
  }
  let t29;
  if ($[58] !== props || $[59] !== ref || $[60] !== t13 || $[61] !== t15 || $[62] !== t16 || $[63] !== t17 || $[64] !== t2 || $[65] !== t23 || $[66] !== t28 || $[67] !== t7) {
    t29 = /*#__PURE__*/_jsxs("div", {
      className: t2,
      ref: ref,
      "data-testid": "bf-pagination",
      ...props,
      children: [t7, t13, t15, t16, t17, t23, t28]
    });
    $[58] = props;
    $[59] = ref;
    $[60] = t13;
    $[61] = t15;
    $[62] = t16;
    $[63] = t17;
    $[64] = t2;
    $[65] = t23;
    $[66] = t28;
    $[67] = t7;
    $[68] = t29;
  } else {
    t29 = $[68];
  }
  return t29;
});

// INTERNAL PageButton

const PageButton = t0 => {
  const $ = _c(11);
  const {
    page,
    currentPage,
    onChange
  } = t0;
  const locale = useLocale();
  const t1 = `${locale.goTo} ${locale.page} ${page}`;
  const t2 = page === currentPage;
  const t3 = page === currentPage;
  let t4;
  if ($[0] !== t3) {
    t4 = classnames("bf-pagination-button", {
      "bf-pagination-button-selected": t3
    });
    $[0] = t3;
    $[1] = t4;
  } else {
    t4 = $[1];
  }
  let t5;
  if ($[2] !== onChange || $[3] !== page) {
    t5 = () => onChange(page);
    $[2] = onChange;
    $[3] = page;
    $[4] = t5;
  } else {
    t5 = $[4];
  }
  let t6;
  if ($[5] !== page || $[6] !== t1 || $[7] !== t2 || $[8] !== t4 || $[9] !== t5) {
    t6 = /*#__PURE__*/_jsx("button", {
      "aria-label": t1,
      type: "button",
      disabled: t2,
      className: t4,
      onClick: t5,
      children: page
    });
    $[5] = page;
    $[6] = t1;
    $[7] = t2;
    $[8] = t4;
    $[9] = t5;
    $[10] = t6;
  } else {
    t6 = $[10];
  }
  return t6;
};

// INTERNAL BasicPagination

const BasicPagination = t0 => {
  const $ = _c(11);
  const {
    currentPage,
    totalPages,
    onChange,
    offset: t1
  } = t0;
  const offset = t1 === undefined ? 1 : t1;
  let t2;
  if ($[0] !== currentPage || $[1] !== offset || $[2] !== onChange || $[3] !== totalPages) {
    let t3;
    if ($[5] !== currentPage || $[6] !== offset || $[7] !== onChange) {
      t3 = (_, i) => /*#__PURE__*/_jsx(PageButton, {
        page: i + offset,
        currentPage: currentPage,
        onChange: onChange
      }, i + offset);
      $[5] = currentPage;
      $[6] = offset;
      $[7] = onChange;
      $[8] = t3;
    } else {
      t3 = $[8];
    }
    t2 = Array(totalPages).fill(null).map(t3);
    $[0] = currentPage;
    $[1] = offset;
    $[2] = onChange;
    $[3] = totalPages;
    $[4] = t2;
  } else {
    t2 = $[4];
  }
  let t3;
  if ($[9] !== t2) {
    t3 = /*#__PURE__*/_jsx(_Fragment, {
      children: t2
    });
    $[9] = t2;
    $[10] = t3;
  } else {
    t3 = $[10];
  }
  return t3;
};

// INTERNAL ComplexPagination

const ComplexPagination = t0 => {
  const $ = _c(27);
  const {
    currentPage,
    totalPages,
    displayPages: t1,
    onChange
  } = t0;
  const dp = t1 === undefined ? 9 : t1;
  const displayPages = Math.max(7, dp % 2 === 0 ? dp + 1 : dp);
  const dynamicPages = displayPages - 4;
  const dynamicOffset = Math.min(Math.max(currentPage - (displayPages - 5) / 2, 3), totalPages - 1 - dynamicPages);
  let t2;
  if ($[0] !== currentPage || $[1] !== onChange) {
    t2 = /*#__PURE__*/_jsx(PageButton, {
      page: 1,
      currentPage: currentPage,
      onChange: onChange
    });
    $[0] = currentPage;
    $[1] = onChange;
    $[2] = t2;
  } else {
    t2 = $[2];
  }
  let t3;
  if ($[3] !== currentPage || $[4] !== displayPages || $[5] !== onChange) {
    t3 = currentPage <= Math.ceil(displayPages / 2) ? /*#__PURE__*/_jsx(PageButton, {
      page: 2,
      currentPage: currentPage,
      onChange: onChange
    }) : /*#__PURE__*/_jsx("span", {
      className: "bf-pagination-dots",
      children: "..."
    });
    $[3] = currentPage;
    $[4] = displayPages;
    $[5] = onChange;
    $[6] = t3;
  } else {
    t3 = $[6];
  }
  let t4;
  if ($[7] !== currentPage || $[8] !== dynamicOffset || $[9] !== dynamicPages || $[10] !== onChange) {
    t4 = /*#__PURE__*/_jsx(BasicPagination, {
      totalPages: dynamicPages,
      currentPage: currentPage,
      offset: dynamicOffset,
      onChange: onChange
    });
    $[7] = currentPage;
    $[8] = dynamicOffset;
    $[9] = dynamicPages;
    $[10] = onChange;
    $[11] = t4;
  } else {
    t4 = $[11];
  }
  let t5;
  if ($[12] !== currentPage || $[13] !== displayPages || $[14] !== onChange || $[15] !== totalPages) {
    t5 = currentPage >= totalPages - Math.floor(displayPages / 2) ? /*#__PURE__*/_jsx(PageButton, {
      page: totalPages - 1,
      currentPage: currentPage,
      onChange: onChange
    }) : /*#__PURE__*/_jsx("span", {
      className: "bf-pagination-dots",
      children: "..."
    });
    $[12] = currentPage;
    $[13] = displayPages;
    $[14] = onChange;
    $[15] = totalPages;
    $[16] = t5;
  } else {
    t5 = $[16];
  }
  let t6;
  if ($[17] !== currentPage || $[18] !== onChange || $[19] !== totalPages) {
    t6 = /*#__PURE__*/_jsx(PageButton, {
      page: totalPages,
      currentPage: currentPage,
      onChange: onChange
    });
    $[17] = currentPage;
    $[18] = onChange;
    $[19] = totalPages;
    $[20] = t6;
  } else {
    t6 = $[20];
  }
  let t7;
  if ($[21] !== t2 || $[22] !== t3 || $[23] !== t4 || $[24] !== t5 || $[25] !== t6) {
    t7 = /*#__PURE__*/_jsxs(_Fragment, {
      children: [t2, t3, t4, t5, t6]
    });
    $[21] = t2;
    $[22] = t3;
    $[23] = t4;
    $[24] = t5;
    $[25] = t6;
    $[26] = t7;
  } else {
    t7 = $[26];
  }
  return t7;
};
Pagination.displayName = "Pagination";
export default Pagination;