@spaced-out/ui-design-system/lib/components/Pagination/Pagination.js

Sense UI components library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Pagination = void 0;
var React = _interopRequireWildcard(require("react"));
var _usePagination = require("../../hooks/usePagination");
var _useWindowSize = require("../../hooks/useWindowSize");
var _classify = _interopRequireDefault(require("../../utils/classify"));
var _helpers = require("../../utils/helpers");
var _qa = require("../../utils/qa");
var _Dropdown = require("../Dropdown");
var _PaginationItem = require("./PaginationItem");
var _Text = require("../Text");
var _PaginationModule = _interopRequireDefault(require("./Pagination.module.css"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const LARGE_LIST_DROPDOWN_OPTIONS = 50;
const TABLET_SCREEN_SIZE = 640;
const Pagination = exports.Pagination = /*#__PURE__*/React.forwardRef((props, ref) => {
  const {
    width
  } = (0, _useWindowSize.useWindowSize)();
  const showExtraSecPaginationButtons = width > TABLET_SCREEN_SIZE;
  const {
    classNames,
    style = 'primary',
    children,
    currentPage = 1,
    totalPages = 1,
    onChange,
    showFirstButton = style !== 'primary' && showExtraSecPaginationButtons,
    showLastButton = style !== 'primary' && showExtraSecPaginationButtons,
    staticPaginationLabel,
    testId,
    ...restPaginationProps
  } = props;
  const showPageSelectionDropDown = style !== 'primary' && showExtraSecPaginationButtons;
  const {
    items
  } = (0, _usePagination.usePagination)({
    style,
    showFirstButton,
    showLastButton,
    currentPage,
    totalPages,
    onChange,
    ...restPaginationProps
  });
  const menuVirtualization = {
    enable: totalPages > LARGE_LIST_DROPDOWN_OPTIONS ? true : false
  };
  const allPages = (0, _helpers.range)(1, totalPages);
  const options = style !== 'secondary' ? [] : allPages.map(page => ({
    key: page.toString(),
    label: page.toString()
  }));
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    ref: ref,
    "data-testid": (0, _qa.generateTestId)({
      base: testId,
      slot: 'root'
    }),
    className: (0, _classify.default)(_PaginationModule.default.wrapper, classNames?.wrapper),
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
      className: (0, _classify.default)(_PaginationModule.default.childrenSlot, classNames?.children),
      "data-testid": (0, _qa.generateTestId)({
        base: testId,
        slot: 'children'
      }),
      children: children
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: _PaginationModule.default.paginatorSlots,
      "data-testid": (0, _qa.generateTestId)({
        base: testId,
        slot: 'paginator-slots'
      }),
      children: [style === 'secondary' && showPageSelectionDropDown && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.Dropdown, {
          size: "small",
          classNames: {
            wrapper: _PaginationModule.default.dropdownWrapper
          },
          menu: {
            options,
            isFluid: true,
            classNames: {
              wrapper: _PaginationModule.default.menuWrapper
            },
            selectedKeys: currentPage ? [currentPage.toString()] : [],
            virtualization: menuVirtualization
          },
          dropdownInputText: currentPage.toString(),
          onChange: option => onChange?.(parseInt(option.key)),
          testId: (0, _qa.generateTestId)({
            base: testId,
            slot: 'dropdown'
          })
        }), !!totalPages && !!currentPage && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.SubTitleExtraSmall, {
          color: "tertiary",
          className: _PaginationModule.default.secondaryLabel,
          testId: (0, _qa.generateTestId)({
            base: testId,
            slot: 'label'
          }),
          children: staticPaginationLabel ? staticPaginationLabel : `of ${totalPages} ${totalPages > 1 ? 'Pages' : 'Page'}`
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: (0, _classify.default)(_PaginationModule.default.paginatorSlot, classNames?.paginator),
        "data-testid": (0, _qa.generateTestId)({
          base: testId,
          slot: 'paginator'
        }),
        children: items?.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)(_PaginationItem.PaginationItem, {
          ...item,
          testId: (0, _qa.generateTestId)({
            base: testId,
            slot: 'item',
            index: item.id
          })
        }, item.id))
      })]
    })]
  });
});