@bigbinary/neetoui/dist/Pagination.js

neetoUI drives the experience at all neeto products

import React__default, { useMemo } from 'react';
import classnames from 'classnames';
import { Left, Right } from '@bigbinary/neeto-icons';
import { mergeLeft } from 'ramda';
import { useHistory } from 'react-router-dom';
import '@babel/runtime/helpers/slicedToArray';
import '@bigbinary/neeto-hotkeys';
import './overlayManager.js';
import { b as buildUrl } from './index-Dxaw6gl9.js';
import { u as useQueryParams } from './useQueryParams-b60CHFUx.js';
import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
import '@babel/runtime/helpers/classCallCheck';
import '@babel/runtime/helpers/createClass';
import '@babel/runtime/helpers/defineProperty';
import '@bigbinary/neeto-cist';
import 'qs';
import './en-CIkXIYyl.js';
import 'dayjs';
import 'dayjs/plugin/localeData';
import 'dayjs/plugin/utc';
import 'dayjs/plugin/weekday';
import 'dayjs/plugin/weekOfYear';

var DOTS = "...";

var usePaginationQueryParams = function usePaginationQueryParams() {
  var queryParams = useQueryParams();
  var history = useHistory();
  var updatePageInQueryParam = function updatePageInQueryParam(page) {
    var params = {
      page: page
    };
    var pathname = window.location.pathname;
    history.push(buildUrl(pathname, 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 = 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__default.createElement("nav", {
    "aria-label": "Pagination Navigation",
    role: "navigation"
  }, /*#__PURE__*/React__default.createElement("ul", {
    className: classnames(["neeto-ui-pagination__wrapper", className])
  }, /*#__PURE__*/React__default.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__default.createElement("a", null, /*#__PURE__*/React__default.createElement(Left, {
    size: 20
  }))), paginationRange.map(function (pageNumber, index) {
    var isActive = pageNumber === pageNo;
    if (pageNumber === DOTS) {
      return /*#__PURE__*/React__default.createElement("li", {
        className: "neeto-ui-pagination__item neeto-ui-pagination__item--dots",
        "data-testid": "dots",
        key: index
      }, "\u2026");
    }
    return /*#__PURE__*/React__default.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__default.createElement("a", null, pageNumber));
  }), /*#__PURE__*/React__default.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__default.createElement("a", null, /*#__PURE__*/React__default.createElement(Right, {
    size: 20
  })))));
};

export { Pagination as default };
//# sourceMappingURL=Pagination.js.map