tabletable/dist/Pager.js

A simple and extremely flexible table component written in React.

// Tabletable - Copyright 2018 Zeroarc Software, LLC
'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _reactFontawesome = require("@fortawesome/react-fontawesome");
var _classnames = _interopRequireDefault(require("classnames"));
var _react = _interopRequireDefault(require("react"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
var TabletablePager = function TabletablePager(_ref) {
  var displayPages = _ref.displayPages,
    _ref$maxPage = _ref.maxPage,
    maxPage = _ref$maxPage === void 0 ? 1 : _ref$maxPage,
    _ref$currentPage = _ref.currentPage,
    currentPage = _ref$currentPage === void 0 ? 1 : _ref$currentPage,
    onPageChange = _ref.onPageChange;
  var pageChange = function pageChange(e) {
    e.preventDefault();
    var el = e.currentTarget.parentElement;
    if (el) {
      var page = parseInt(el.getAttribute('data-value') || '');
      if (!isNaN(page)) onPageChange(page);
    }
  };
  var previousPageChange = function previousPageChange(e) {
    e.preventDefault();
    if (currentPage > 1) {
      onPageChange(currentPage - 1);
    }
  };
  var nextPageChange = function nextPageChange(e) {
    e.preventDefault();
    if (currentPage < maxPage) {
      onPageChange(currentPage + 1);
    }
  };
  var firstPageChange = function firstPageChange(e) {
    e.preventDefault();
    onPageChange(1);
  };
  var lastPageChange = function lastPageChange(e) {
    e.preventDefault();
    onPageChange(maxPage);
  };
  var options = [];
  var startIndex = Math.max(currentPage - Math.floor(displayPages / 2), 1);
  var endIndex = Math.min(startIndex + (displayPages - 1), maxPage);
  if (maxPage >= displayPages && endIndex - startIndex <= displayPages) {
    startIndex = endIndex - (displayPages - 1);
  }
  for (var i = startIndex; i <= endIndex; i++) {
    var thisButtonClasses = (0, _classnames["default"])('page-item', {
      'active': currentPage === i
    });
    options.push(/*#__PURE__*/_react["default"].createElement("li", {
      key: "option-".concat(i),
      className: thisButtonClasses,
      "aria-current": currentPage === i ? 'page' : false,
      "data-value": i
    }, /*#__PURE__*/_react["default"].createElement("a", {
      href: "#",
      onClick: pageChange,
      className: "page-link"
    }, i)));
  }
  var backButtonClasses = (0, _classnames["default"])('page-item', {
    'disabled': currentPage === 1 || endIndex === 0
  });
  var forwardButtonClasses = (0, _classnames["default"])('page-item', {
    'disabled': currentPage === maxPage || endIndex === 0
  });
  return /*#__PURE__*/_react["default"].createElement("nav", {
    "aria-label": "Table navigation"
  }, /*#__PURE__*/_react["default"].createElement("ul", {
    className: "pagination pagination-sm justify-content-center mb-0"
  }, /*#__PURE__*/_react["default"].createElement("li", {
    className: backButtonClasses
  }, /*#__PURE__*/_react["default"].createElement("a", {
    href: "#",
    onClick: firstPageChange,
    className: "page-link",
    "aria-label": "First"
  }, /*#__PURE__*/_react["default"].createElement(_reactFontawesome.FontAwesomeIcon, {
    icon: ['far', 'step-backward'],
    fixedWidth: true,
    "aria-hidden": "true"
  }))), /*#__PURE__*/_react["default"].createElement("li", {
    className: backButtonClasses
  }, /*#__PURE__*/_react["default"].createElement("a", {
    href: "#",
    onClick: previousPageChange,
    className: "page-link",
    "aria-label": "Previous"
  }, /*#__PURE__*/_react["default"].createElement(_reactFontawesome.FontAwesomeIcon, {
    icon: ['far', 'chevron-left'],
    fixedWidth: true,
    "aria-hidden": "true"
  }))), options, /*#__PURE__*/_react["default"].createElement("li", {
    className: forwardButtonClasses
  }, /*#__PURE__*/_react["default"].createElement("a", {
    href: "#",
    onClick: nextPageChange,
    className: "page-link",
    "aria-label": "Next"
  }, /*#__PURE__*/_react["default"].createElement(_reactFontawesome.FontAwesomeIcon, {
    icon: ['far', 'chevron-right'],
    fixedWidth: true,
    "aria-hidden": "true"
  }))), /*#__PURE__*/_react["default"].createElement("li", {
    className: forwardButtonClasses
  }, /*#__PURE__*/_react["default"].createElement("a", {
    href: "#",
    onClick: lastPageChange,
    className: "page-link",
    "aria-label": "Last"
  }, /*#__PURE__*/_react["default"].createElement(_reactFontawesome.FontAwesomeIcon, {
    icon: ['far', 'step-forward'],
    fixedWidth: true,
    "aria-hidden": "true"
  })))));
};
var _default = exports["default"] = TabletablePager;