customizable-datatable/dist/components/pagination.js

customizable/resuable material-UI datatable component

"use strict";

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

require("core-js/modules/web.dom-collections.iterator.js");

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

var _ChevronLeft = _interopRequireDefault(require("@material-ui/icons/ChevronLeft"));

var _ChevronRight = _interopRequireDefault(require("@material-ui/icons/ChevronRight"));

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

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

var _Menu = _interopRequireDefault(require("@material-ui/core/Menu"));

var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));

var _ArrowDropDown = _interopRequireDefault(require("@material-ui/icons/ArrowDropDown"));

require("../CSS/css.css");

var _propTypes = _interopRequireDefault(require("prop-types"));

var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));

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

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

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; }

const propTypes = {
  items: _propTypes.default.array.isRequired,
  onChangePage: _propTypes.default.func.isRequired,
  initialPage: _propTypes.default.number,
  pageSize: _propTypes.default.number
};
const defaultProps = {
  initialPage: 1,
  pageSize: 10
};

class pagination extends _react.Component {
  constructor(props) {
    super(props);

    _defineProperty(this, "handleClick", event => {
      this.setState({
        anchorEl: event.currentTarget
      });
    });

    _defineProperty(this, "handleClose", () => {
      this.setState({
        anchorEl: null
      });
    });

    _defineProperty(this, "handelChangeValue", e => {
      this.setState({
        selectValue: Number(e.target.innerText),
        anchorEl: null,
        pageSize: Number(e.target.innerText)
      }, () => this.setPage());
    });

    this.state = {
      anchorEl: "",
      pager: {},
      selectValue: 10,
      pageSize: this.props.pageSize
    };
  }

  componentWillMount() {
    // set page if items array isn't empty
    if (this.props.items && this.props.items.length) {
      this.setPage(this.props.initialPage);
    }
  }

  componentDidUpdate(prevProps, prevState) {
    // reset page if items array has changed
    if (this.props.items !== prevProps.items) {
      this.setPage(this.props.initialPage);
    }
  }

  setPage(page) {
    var {
      items
    } = this.props;
    var {
      pageSize
    } = this.state;
    var pager = this.state.pager;

    if (page < 1 || page > pager.totalPages) {
      return;
    }

    pager = this.getPager(items.length, page, pageSize);
    var pageOfItems = items.slice(pager.startIndex, pager.endIndex + 1);
    this.setState({
      pager: pager
    });
    this.props.onChangePage(pageOfItems);
  }

  getPager(totalItems, currentPage, pageSize) {
    currentPage = currentPage || 1;
    pageSize = pageSize || pageSize;
    var totalPages = Math.ceil(totalItems / pageSize);
    var startPage, endPage;

    if (totalPages <= pageSize) {
      startPage = 1;
      endPage = totalPages;
    } else {
      if (currentPage <= pageSize) {
        startPage = 1;
        endPage = pageSize;
      } else if (currentPage + 4 >= totalPages) {
        startPage = totalPages - 9;
        endPage = totalPages;
      } else {
        startPage = currentPage - 5;
        endPage = currentPage + 4;
      }
    }

    var startIndex = (currentPage - 1) * pageSize;
    var endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);
    var pages = [...Array(endPage + 1 - startPage).keys()].map(i => startPage + i);
    return {
      totalItems: totalItems,
      currentPage: currentPage,
      pageSize: pageSize,
      totalPages: totalPages,
      startPage: startPage,
      endPage: endPage,
      startIndex: startIndex,
      endIndex: endIndex,
      pages: pages
    };
  }

  render() {
    var pager = this.state.pager;
    const {
      items,
      rowsPerPageOptions
    } = this.props;
    return /*#__PURE__*/_react.default.createElement("div", {
      className: "d-flex justify-content-between"
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "d-flex"
    }, /*#__PURE__*/_react.default.createElement("div", null, "Rows per page:"), /*#__PURE__*/_react.default.createElement("div", {
      className: "d-flex"
    }, /*#__PURE__*/_react.default.createElement("div", {
      className: "pagination-ico-left"
    }, this.state.pageSize), /*#__PURE__*/_react.default.createElement(_ArrowDropDown.default, {
      onClick: this.handleClick
    }), /*#__PURE__*/_react.default.createElement(_Menu.default, {
      id: "simple-menu",
      anchorEl: this.state.anchorEl,
      keepMounted: true,
      open: Boolean(this.state.anchorEl),
      onClose: this.handleClose
    }, " ", rowsPerPageOptions.map(data => /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
      onClick: e => this.handelChangeValue(e)
    }, data))))), /*#__PURE__*/_react.default.createElement("div", {
      className: "d-flex"
    }, " ", /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
      title: "First"
    }, /*#__PURE__*/_react.default.createElement(_FirstPage.default, {
      className: "pagination-icon-second",
      color: pager.currentPage === 1 ? "disabled" : "",
      onClick: () => this.setPage(1)
    })), /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
      title: "Previous"
    }, /*#__PURE__*/_react.default.createElement(_ChevronLeft.default, {
      className: "pagination-icon",
      onClick: () => this.setPage(pager.currentPage - 1),
      color: pager.currentPage === 1 ? "disabled" : ""
    })), /*#__PURE__*/_react.default.createElement("div", {
      className: "pagination-text"
    }, "Page ", pager.currentPage, " - ", this.state.pageSize, " of ", items.length), /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
      title: "Next"
    }, /*#__PURE__*/_react.default.createElement(_ChevronRight.default, {
      className: "pagination-icon pagination-ico-left",
      onClick: () => this.setPage(pager.currentPage + 1),
      color: pager.currentPage === pager.totalPages ? "disabled" : ""
    })), /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
      title: "Last"
    }, /*#__PURE__*/_react.default.createElement(_LastPage.default, {
      className: "pagination-icon-second",
      onClick: () => this.setPage(pager.totalPages),
      color: pager.currentPage === pager.totalPages ? "disabled" : ""
    }))));
  }

}

pagination.propTypes = propTypes;
pagination.defaultProps = defaultProps;
var _default = pagination;
exports.default = _default;