@procore/core-react/dist/Pagination/Pagination.js

React library of Procore Design Guidelines

var _excluded = ["activePage", "items", "onSelectPage", "perPage"];
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
import { ChevronLeft, ChevronRight } from '@procore/core-icons/dist';
import { NumberFormatter } from '@procore/globalization-toolkit';
import { useId } from '@react-aria/utils';
import React from 'react';
import { useI18nContext } from '../_hooks/I18n';
import { StyledButton, StyledContainer, StyledCurrentPage, StyledPageCount } from './Pagination.styles';
import { PaginationSelect } from './PaginationSelect';
function noop() {}
var usePagination = function usePagination(_ref) {
  var _ref$activePage = _ref.activePage,
    activePage = _ref$activePage === void 0 ? 0 : _ref$activePage,
    _ref$items = _ref.items,
    items = _ref$items === void 0 ? 0 : _ref$items,
    _ref$onSelectPage = _ref.onSelectPage,
    onSelectPage = _ref$onSelectPage === void 0 ? function () {} : _ref$onSelectPage,
    _ref$perPage = _ref.perPage,
    perPage = _ref$perPage === void 0 ? 0 : _ref$perPage;
  var pages = Math.ceil(items / perPage);
  activePage = pages === 0 ? 0 : activePage;
  return {
    end: Math.min(activePage * perPage, items),
    isFirst: activePage < 2,
    isLast: activePage === pages,
    pages: pages,
    selectNext: function selectNext() {
      return onSelectPage(activePage + 1);
    },
    selectPage: function selectPage(selection) {
      return onSelectPage(selection.item);
    },
    selectPrev: function selectPrev() {
      return onSelectPage(activePage - 1);
    },
    start: Math.max((activePage - 1) * perPage + 1, 0)
  };
};

/**

 We paginate pages that display large data sets to our users. This helps reduce
 page load time and makes the data easier to navigate.

 Pagination is commonly seen on tool landing pages, where we display 150 objects
 or table rows per page.

 @since 10.19.0

 @see [Storybook](https://stories.core.procore.com/?path=/story/demos-pagination--demo)

 @see [Design Guidelines](https://design.procore.com/pagination)

 */
export var Pagination = /*#__PURE__*/React.forwardRef(function Pagination(_ref2, ref) {
  var _ref2$activePage = _ref2.activePage,
    activePage = _ref2$activePage === void 0 ? 1 : _ref2$activePage,
    items = _ref2.items,
    _ref2$onSelectPage = _ref2.onSelectPage,
    onSelectPage = _ref2$onSelectPage === void 0 ? noop : _ref2$onSelectPage,
    _ref2$perPage = _ref2.perPage,
    perPage = _ref2$perPage === void 0 ? 50 : _ref2$perPage,
    props = _objectWithoutProperties(_ref2, _excluded);
  var _usePagination = usePagination({
      activePage: activePage,
      items: items,
      onSelectPage: onSelectPage,
      perPage: perPage
    }),
    end = _usePagination.end,
    isFirst = _usePagination.isFirst,
    isLast = _usePagination.isLast,
    pages = _usePagination.pages,
    selectNext = _usePagination.selectNext,
    selectPage = _usePagination.selectPage,
    selectPrev = _usePagination.selectPrev,
    start = _usePagination.start;
  var i18n = useI18nContext();
  var labelId = useId();
  var selectId = useId();
  function formattedNumber(items) {
    var formatter = new NumberFormatter({
      locale: i18n.locale
    });
    return formatter.formatNumber(items);
  }
  return /*#__PURE__*/React.createElement(StyledContainer, _extends({
    ref: ref
  }, props), /*#__PURE__*/React.createElement(StyledPageCount, {
    ref: ref,
    italic: true,
    color: "gray45"
  }, i18n.t('core.pagination.notation', {
    end: formattedNumber(end),
    start: formattedNumber(start),
    totalItems: formattedNumber(items || 0)
  })), /*#__PURE__*/React.createElement(StyledCurrentPage, {
    id: labelId
  }, i18n.t('core.pagination.page')), /*#__PURE__*/React.createElement(PaginationSelect, {
    activePage: activePage,
    "aria-labelledby": "".concat(labelId, " ").concat(selectId),
    disabled: pages <= 1,
    id: selectId,
    onSelect: selectPage,
    pages: pages
  }), /*#__PURE__*/React.createElement(StyledButton, {
    disabled: isFirst,
    variant: "tertiary",
    "aria-label": i18n.t('core.pagination.prevPage'),
    icon: /*#__PURE__*/React.createElement(ChevronLeft, null),
    onClick: selectPrev
  }), /*#__PURE__*/React.createElement(StyledButton, {
    disabled: isLast,
    variant: "tertiary",
    "aria-label": i18n.t('core.pagination.nextPage'),
    icon: /*#__PURE__*/React.createElement(ChevronRight, null),
    onClick: selectNext
  }));
});
Pagination.displayName = 'Pagination';
//# sourceMappingURL=Pagination.js.map