@geezee/react-ui/esm/pagination/pagination-pages.js

Modern and minimalist React UI library.

import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useCallback, useMemo } from 'react';
import PaginationItem from './pagination-item';
import PaginationEllipsis from './pagination-ellipsis';
import { usePaginationContext } from './pagination-context';

var PaginationPages = function PaginationPages(_ref) {
  var limit = _ref.limit,
      count = _ref.count;

  var _usePaginationContext = usePaginationContext(),
      updatePage = _usePaginationContext.updatePage,
      page = _usePaginationContext.page;

  var showPages = useMemo(function () {
    var oddLimit = limit % 2 === 0 ? limit - 1 : limit;
    return oddLimit - 2;
  }, [limit]);
  var middleNumber = (showPages + 1) / 2;

  var _useMemo = useMemo(function () {
    var showEllipsis = count > limit;
    return [showEllipsis && page && page > middleNumber + 1, showEllipsis && page && page < count - middleNumber];
  }, [page, showPages, middleNumber, count, limit]),
      _useMemo2 = _slicedToArray(_useMemo, 2),
      showBeforeEllipsis = _useMemo2[0],
      showAfterEllipsis = _useMemo2[1];

  var pagesArray = useMemo(function () {
    return _toConsumableArray(new Array(showPages));
  }, [showPages]);
  var renderItem = useCallback(function (value, active) {
    return /*#__PURE__*/React.createElement(PaginationItem, {
      key: "pagination-item-".concat(value),
      active: value === active,
      onClick: function onClick() {
        return updatePage && updatePage('click', value);
      }
    }, value);
  }, [updatePage]);
  var startPages = pagesArray.map(function (_, index) {
    var value = index + 2;
    return renderItem(value, page);
  });
  var middlePages = pagesArray.map(function (_, index) {
    var middleIndexNumber = middleNumber - (index + 1);
    var value = page - middleIndexNumber;
    return /*#__PURE__*/React.createElement(PaginationItem, {
      key: "pagination-middle-".concat(index),
      active: index + 1 === middleNumber,
      onClick: function onClick() {
        return updatePage && updatePage('click', value);
      }
    }, value);
  });
  var endPages = pagesArray.map(function (_, index) {
    var value = count - (showPages - index);
    return renderItem(value, page);
  });

  if (count <= limit) {
    return (
      /*#__PURE__*/

      /* eslint-disable react/jsx-no-useless-fragment */
      React.createElement(React.Fragment, null, _toConsumableArray(new Array(count)).map(function (_, index) {
        var value = index + 1;
        return /*#__PURE__*/React.createElement(PaginationItem, {
          key: "pagination-item-".concat(value),
          active: value === page,
          onClick: function onClick() {
            return updatePage && updatePage('click', value);
          }
        }, value);
      }))
    );
    /* eslint-enable */
  }

  return /*#__PURE__*/React.createElement(React.Fragment, null, renderItem(1, page), showBeforeEllipsis && /*#__PURE__*/React.createElement(PaginationEllipsis, {
    key: "pagination-ellipsis-before",
    isBefore: true,
    onClick: function onClick() {
      return updatePage && updatePage('click', page - 5 >= 1 ? page - 5 : 1);
    }
  }), showBeforeEllipsis && showAfterEllipsis ? middlePages : showBeforeEllipsis ? endPages : startPages, showAfterEllipsis && /*#__PURE__*/React.createElement(PaginationEllipsis, {
    key: "pagination-ellipsis-after",
    onClick: function onClick() {
      return updatePage && updatePage('click', page + 5 <= count ? page + 5 : count);
    }
  }), renderItem(count, page));
};

export default PaginationPages;