@bigbinary/neetoui/dist/cjs/Pagination.js

neetoUI drives the experience at all neeto products

'use strict';

var React = require('react');
var classnames = require('classnames');
var neetoIcons = require('@bigbinary/neeto-icons');
var ramda = require('ramda');
var reactRouterDom = require('react-router-dom');
require('@babel/runtime/helpers/slicedToArray');
require('@bigbinary/neeto-hotkeys');
require('./overlayManager.js');
var index = require('./index--BeRLo6L.js');
var useQueryParams = require('./useQueryParams-l5fJJYCR.js');
var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
require('@babel/runtime/helpers/classCallCheck');
require('@babel/runtime/helpers/createClass');
require('@babel/runtime/helpers/defineProperty');
require('@bigbinary/neeto-cist');
require('qs');
require('./en-K2ZIAV2F.js');
require('dayjs');
require('dayjs/plugin/localeData');
require('dayjs/plugin/utc');
require('dayjs/plugin/weekday');
require('dayjs/plugin/weekOfYear');

var DOTS = "...";

var usePaginationQueryParams = function usePaginationQueryParams() {
  var queryParams = useQueryParams.useQueryParams();
  var history = reactRouterDom.useHistory();
  var updatePageInQueryParam = function updatePageInQueryParam(page) {
    var params = {
      page: page
    };
    var pathname = window.location.pathname;
    history.push(index.buildUrl(pathname, ramda.mergeLeft(params, queryParams)));
  };
  return {
    updatePageInQueryParam: updatePageInQueryParam
  };
};

var range = function range(start, end) {
  var length = end - start + 1;
  return Array.from({
    length: length
  }, function (_, index) {
    return index + start;
  });
};
var usePagination = function usePagination(_ref) {
  var count = _ref.count,
    pageSize = _ref.pageSize,
    _ref$siblingCount = _ref.siblingCount,
    siblingCount = _ref$siblingCount === void 0 ? 1 : _ref$siblingCount,
    pageNo = _ref.pageNo;
  var paginationRange = React.useMemo(function () {
    var totalPageCount = Math.ceil(count / pageSize);

    // Pages count is determined as siblingCount + firstPage + lastPage + pageNo + 2*DOTS
    var totalPageNumbers = siblingCount + 5;

    // If the number of pages is less than the page numbers we want to show in our
    // paginationComponent, we return the range [1..totalPageCount]
    if (totalPageNumbers >= totalPageCount) {
      return range(1, totalPageCount);
    }

    // Calculate left and right sibling index and make sure they are within range 1 and totalPageCount
    var leftSiblingIndex = Math.max(pageNo - siblingCount, 1);
    var rightSiblingIndex = Math.min(pageNo + siblingCount, totalPageCount);

    // We do not show dots just when there is just one page number to be inserted between the extremes of sibling and the page limits i.e 1 and totalPageCount. Hence we are using leftSiblingIndex > 2 and rightSiblingIndex < totalPageCount - 2
    var shouldShowLeftDots = leftSiblingIndex > 2;
    var shouldShowRightDots = rightSiblingIndex < totalPageCount - 2;
    var firstPageIndex = 1;
    var lastPageIndex = totalPageCount;

    // Case 2: No left dots to show, but rights dots to be shown
    if (!shouldShowLeftDots && shouldShowRightDots) {
      var leftItemCount = 3 + 2 * siblingCount;
      var leftRange = range(1, leftItemCount);
      return [].concat(_toConsumableArray(leftRange), [DOTS, totalPageCount]);
    }

    // Case 3: No right dots to show, but left dots to be shown
    if (shouldShowLeftDots && !shouldShowRightDots) {
      var rightItemCount = 3 + 2 * siblingCount;
      var rightRange = range(totalPageCount - rightItemCount + 1, totalPageCount);
      return [firstPageIndex, DOTS].concat(_toConsumableArray(rightRange));
    }

    // Case 4: Both left and right dots to be shown
    if (shouldShowLeftDots && shouldShowRightDots) {
      var middleRange = range(leftSiblingIndex, rightSiblingIndex);
      return [firstPageIndex, DOTS].concat(_toConsumableArray(middleRange), [DOTS, lastPageIndex]);
    }
    return undefined;
  }, [count, pageSize, siblingCount, pageNo]);
  return paginationRange;
};

var Pagination = function Pagination(_ref) {
  var _ref$count = _ref.count,
    count = _ref$count === void 0 ? 0 : _ref$count,
    pageNo = _ref.pageNo,
    navigate = _ref.navigate,
    pageSize = _ref.pageSize,
    _ref$siblingCount = _ref.siblingCount,
    siblingCount = _ref$siblingCount === void 0 ? 1 : _ref$siblingCount,
    _ref$className = _ref.className,
    className = _ref$className === void 0 ? "" : _ref$className;
  var paginationRange = usePagination({
    pageNo: pageNo,
    count: count,
    siblingCount: siblingCount,
    pageSize: pageSize
  });
  var _usePaginationQueryPa = usePaginationQueryParams(),
    updatePageInQueryParam = _usePaginationQueryPa.updatePageInQueryParam;
  if (!navigate) navigate = updatePageInQueryParam;
  if (pageNo === 0 || paginationRange.length < 2) {
    return null;
  }
  var onNext = function onNext() {
    if (!isLastPage) navigate(pageNo + 1);
  };
  var onPrevious = function onPrevious() {
    if (!isFirstPage) navigate(pageNo - 1);
  };
  var lastPage = paginationRange[paginationRange.length - 1];
  var isFirstPage = pageNo === 1;
  var isLastPage = pageNo === lastPage;
  return /*#__PURE__*/React.createElement("nav", {
    "aria-label": "Pagination Navigation",
    role: "navigation"
  }, /*#__PURE__*/React.createElement("ul", {
    className: classnames(["neeto-ui-pagination__wrapper", className])
  }, /*#__PURE__*/React.createElement("li", {
    "data-testid": "left-navigate-button",
    tabIndex: 0,
    className: classnames({
      "neeto-ui-pagination__item": true,
      "neeto-ui-pagination__item--navigate": true,
      disabled: isFirstPage
    }),
    onClick: onPrevious
  }, /*#__PURE__*/React.createElement("a", null, /*#__PURE__*/React.createElement(neetoIcons.Left, {
    size: 20
  }))), paginationRange.map(function (pageNumber, index) {
    var isActive = pageNumber === pageNo;
    if (pageNumber === DOTS) {
      return /*#__PURE__*/React.createElement("li", {
        className: "neeto-ui-pagination__item neeto-ui-pagination__item--dots",
        "data-testid": "dots",
        key: index
      }, "\u2026");
    }
    return /*#__PURE__*/React.createElement("li", {
      "aria-current": isActive && true,
      key: index,
      tabIndex: 0,
      "aria-label": isActive ? "Current Page, Page ".concat(pageNumber) : "Goto Page ".concat(pageNumber),
      className: classnames("neeto-ui-pagination__item", {
        active: isActive
      }),
      onClick: function onClick() {
        return navigate(pageNumber);
      }
    }, /*#__PURE__*/React.createElement("a", null, pageNumber));
  }), /*#__PURE__*/React.createElement("li", {
    "data-testid": "right-navigate-button",
    tabIndex: 0,
    className: classnames({
      "neeto-ui-pagination__item": true,
      "neeto-ui-pagination__item--navigate": true,
      disabled: isLastPage
    }),
    onClick: onNext
  }, /*#__PURE__*/React.createElement("a", null, /*#__PURE__*/React.createElement(neetoIcons.Right, {
    size: 20
  })))));
};

module.exports = Pagination;
//# sourceMappingURL=Pagination.js.map