react-mui-pagination/build/index.js

React Material UI Pagination

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));

var _FirstPage = _interopRequireDefault(require("@material-ui/icons/FirstPage"));

var _KeyboardArrowLeft = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowLeft"));

var _KeyboardArrowRight = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowRight"));

var _LastPage = _interopRequireDefault(require("@material-ui/icons/LastPage"));

var _styles = require("@material-ui/core/styles");

var _Fab = _interopRequireDefault(require("@material-ui/core/Fab"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

var useStyles = (0, _styles.makeStyles)(function (theme) {
  return {
    fab: {
      margin: theme.spacing(1),
      boxShadow: theme.shadows[0]
    }
  };
});

var Pagination = function Pagination(_ref) {
  var _extends2;

  var total = _ref.total,
      _ref$page = _ref.page,
      page = _ref$page === void 0 ? 1 : _ref$page,
      _ref$perPage = _ref.perPage,
      perPage = _ref$perPage === void 0 ? 10 : _ref$perPage,
      _ref$numOfLinks = _ref.numOfLinks,
      numOfLinks = _ref$numOfLinks === void 0 ? 5 : _ref$numOfLinks,
      _ref$hidePrevNext = _ref.hidePrevNext,
      hidePrevNext = _ref$hidePrevNext === void 0 ? false : _ref$hidePrevNext,
      _ref$hideFirstLast = _ref.hideFirstLast,
      hideFirstLast = _ref$hideFirstLast === void 0 ? false : _ref$hideFirstLast,
      _ref$linksShadow = _ref.linksShadow,
      linksShadow = _ref$linksShadow === void 0 ? 0 : _ref$linksShadow,
      _ref$linksColor = _ref.linksColor,
      linksColor = _ref$linksColor === void 0 ? 'default' : _ref$linksColor,
      _ref$activeLinkColor = _ref.activeLinkColor,
      activeLinkColor = _ref$activeLinkColor === void 0 ? 'primary' : _ref$activeLinkColor,
      _ref$LinksComponent = _ref.LinksComponent,
      LinksComponent = _ref$LinksComponent === void 0 ? _Fab["default"] : _ref$LinksComponent,
      _ref$linksProps = _ref.linksProps,
      linksProps = _ref$linksProps === void 0 ? {} : _ref$linksProps,
      _ref$activeProps = _ref.activeProps,
      activeProps = _ref$activeProps === void 0 ? {} : _ref$activeProps,
      _ref$prevNextShadow = _ref.prevNextShadow,
      prevNextShadow = _ref$prevNextShadow === void 0 ? 0 : _ref$prevNextShadow,
      _ref$prevNextColor = _ref.prevNextColor,
      prevNextColor = _ref$prevNextColor === void 0 ? 'default' : _ref$prevNextColor,
      _ref$PrevNextComponen = _ref.PrevNextComponent,
      PrevNextComponent = _ref$PrevNextComponen === void 0 ? _IconButton["default"] : _ref$PrevNextComponen,
      _ref$prevNextProps = _ref.prevNextProps,
      prevNextProps = _ref$prevNextProps === void 0 ? {} : _ref$prevNextProps,
      _ref$nextProps = _ref.nextProps,
      nextProps = _ref$nextProps === void 0 ? {} : _ref$nextProps,
      _ref$prevProps = _ref.prevProps,
      prevProps = _ref$prevProps === void 0 ? {} : _ref$prevProps,
      _ref$prevContent = _ref.prevContent,
      prevContent = _ref$prevContent === void 0 ? '' : _ref$prevContent,
      _ref$nextContent = _ref.nextContent,
      nextContent = _ref$nextContent === void 0 ? '' : _ref$nextContent,
      _ref$firstLastShadow = _ref.firstLastShadow,
      firstLastShadow = _ref$firstLastShadow === void 0 ? 0 : _ref$firstLastShadow,
      _ref$firstLastColor = _ref.firstLastColor,
      firstLastColor = _ref$firstLastColor === void 0 ? 'default' : _ref$firstLastColor,
      _ref$FirstLastCompone = _ref.FirstLastComponent,
      FirstLastComponent = _ref$FirstLastCompone === void 0 ? _IconButton["default"] : _ref$FirstLastCompone,
      _ref$firstLastProps = _ref.firstLastProps,
      firstLastProps = _ref$firstLastProps === void 0 ? {} : _ref$firstLastProps,
      _ref$firstProps = _ref.firstProps,
      firstProps = _ref$firstProps === void 0 ? {} : _ref$firstProps,
      _ref$lastProps = _ref.lastProps,
      lastProps = _ref$lastProps === void 0 ? {} : _ref$lastProps,
      _ref$firstContent = _ref.firstContent,
      firstContent = _ref$firstContent === void 0 ? '' : _ref$firstContent,
      _ref$lastContent = _ref.lastContent,
      lastContent = _ref$lastContent === void 0 ? '' : _ref$lastContent,
      _ref$setPage = _ref.setPage,
      setPage = _ref$setPage === void 0 ? function () {} : _ref$setPage;
  var theme = (0, _styles.useTheme)();
  var classes = useStyles();
  var firstPage = 1;
  var lastPage = Math.ceil(total / perPage);
  var firstVisiblePage = Math.max(page - Math.floor((numOfLinks - 1) / 2), firstPage);
  var lastVisiblePage = Math.min(firstVisiblePage - 1 + numOfLinks, lastPage);
  firstVisiblePage = Math.max(lastVisiblePage + 1 - numOfLinks, firstPage);
  page = numOfLinks ? Math.max(Math.min(lastVisiblePage, page), firstVisiblePage) : Math.max(Math.min(lastPage, page), firstPage);
  return _react["default"].createElement("div", null, hideFirstLast ? '' : _react["default"].createElement(FirstLastComponent // className={classes.fab}
  , _extends({
    onClick: function onClick(e) {
      return setPage(e, firstPage);
    },
    disabled: page === 1,
    "aria-label": "First Page",
    style: {
      boxShadow: theme.shadows[firstLastShadow]
    },
    color: firstLastColor
  }, firstLastProps, firstProps), firstContent ? firstContent : theme.direction === 'rtl' ? _react["default"].createElement(_LastPage["default"], null) : _react["default"].createElement(_FirstPage["default"], null)), hidePrevNext ? '' : _react["default"].createElement(PrevNextComponent, _extends({
    onClick: function onClick(e) {
      return setPage(e, page - 1);
    },
    disabled: page === 1,
    "aria-label": "Previous Page",
    style: {
      boxShadow: theme.shadows[prevNextShadow]
    },
    color: prevNextColor
  }, prevNextProps, prevProps), prevContent ? prevContent : theme.direction === 'rtl' ? _react["default"].createElement(_KeyboardArrowRight["default"], null) : _react["default"].createElement(_KeyboardArrowLeft["default"], null)), Array(lastVisiblePage - firstVisiblePage + 1).fill().map(function (v, i) {
    return _react["default"].createElement(LinksComponent, _extends({
      onClick: function onClick(e) {
        return setPage(e, i + firstVisiblePage);
      },
      key: i,
      className: classes.fab,
      size: "small",
      style: {
        boxShadow: theme.shadows[linksShadow]
      },
      color: page === i + firstVisiblePage ? activeLinkColor : linksColor
    }, linksProps, page === i + firstVisiblePage ? activeProps : {}), i + firstVisiblePage);
  }), hidePrevNext ? '' : _react["default"].createElement(PrevNextComponent, _extends((_extends2 = {
    onClick: function onClick(e) {
      return setPage(e, page - 1);
    },
    disabled: page === lastPage,
    "aria-label": "Previous Page"
  }, _defineProperty(_extends2, "onClick", function onClick(e) {
    return setPage(e, page + 1);
  }), _defineProperty(_extends2, "style", {
    boxShadow: theme.shadows[prevNextShadow]
  }), _defineProperty(_extends2, "color", prevNextColor), _extends2), prevNextProps, nextProps), nextContent ? nextContent : theme.direction === 'rtl' ? _react["default"].createElement(_KeyboardArrowLeft["default"], null) : _react["default"].createElement(_KeyboardArrowRight["default"], null)), hideFirstLast ? '' : _react["default"].createElement(FirstLastComponent, _extends({
    selected: true,
    onClick: function onClick(e) {
      return setPage(e, lastPage);
    },
    disabled: page === lastPage,
    "aria-label": "Last Page",
    className: classes.fab,
    title: lastPage,
    style: {
      boxShadow: theme.shadows[firstLastShadow]
    }
  }, firstLastProps, {
    color: firstLastColor
  }, lastProps), lastContent ? lastContent : theme.direction === 'rtl' ? _react["default"].createElement(_FirstPage["default"], null) : _react["default"].createElement(_LastPage["default"], null)));
};

var _default = Pagination;
exports["default"] = _default;