@6thquake/react-material/es/Table/TreeTable/Pagination.js

React components that implement Google's Material Design.

import _extends from "@babel/runtime/helpers/extends";
import React from 'react';
import PropTypes from 'prop-types';
import withStyles from '../../styles/withStyles';
import TablePagination from '../../TablePagination';
import IconButton from '../../IconButton';
import FirstPageIcon from '@material-ui/icons/FirstPage';
import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
import LastPageIcon from '@material-ui/icons/LastPage';

const actionsStyles = theme => ({
  root: {
    flexShrink: 0,
    color: theme.palette.text.secondary,
    marginLeft: theme.spacing(2.5)
  }
});
/**
 * @ignore - internal component.
 */


var _ref = React.createElement(LastPageIcon, null);

var _ref2 = React.createElement(FirstPageIcon, null);

var _ref3 = React.createElement(KeyboardArrowRight, null);

var _ref4 = React.createElement(KeyboardArrowLeft, null);

var _ref5 = React.createElement(KeyboardArrowLeft, null);

var _ref6 = React.createElement(KeyboardArrowRight, null);

var _ref7 = React.createElement(FirstPageIcon, null);

var _ref8 = React.createElement(LastPageIcon, null);

class TablePaginationActions extends React.Component {
  constructor(...args) {
    super(...args);

    this.handleFirstPageButtonClick = event => {
      this.props.onChangePage(event, 0);
    };

    this.handleBackButtonClick = event => {
      this.props.onChangePage(event, this.props.page - 1);
    };

    this.handleNextButtonClick = event => {
      this.props.onChangePage(event, this.props.page + 1);
    };

    this.handleLastPageButtonClick = event => {
      this.props.onChangePage(event, Math.max(0, Math.ceil(this.props.count / this.props.rowsPerPage) - 1));
    };
  }

  render() {
    const {
      classes,
      count,
      page,
      rowsPerPage,
      theme
    } = this.props;
    return React.createElement("div", {
      className: classes.root
    }, React.createElement(IconButton, {
      onClick: this.handleFirstPageButtonClick,
      disabled: page === 0,
      "aria-label": "First Page"
    }, theme.direction === 'rtl' ? _ref : _ref2), React.createElement(IconButton, {
      onClick: this.handleBackButtonClick,
      disabled: page === 0,
      "aria-label": "Previous Page"
    }, theme.direction === 'rtl' ? _ref3 : _ref4), React.createElement(IconButton, {
      onClick: this.handleNextButtonClick,
      disabled: page >= Math.ceil(count / rowsPerPage) - 1,
      "aria-label": "Next Page"
    }, theme.direction === 'rtl' ? _ref5 : _ref6), React.createElement(IconButton, {
      onClick: this.handleLastPageButtonClick,
      disabled: page >= Math.ceil(count / rowsPerPage) - 1,
      "aria-label": "Last Page"
    }, theme.direction === 'rtl' ? _ref7 : _ref8));
  }

}

process.env.NODE_ENV !== "production" ? TablePaginationActions.propTypes = {
  classes: PropTypes.object.isRequired,
  count: PropTypes.number.isRequired,
  onChangePage: PropTypes.func.isRequired,
  page: PropTypes.number.isRequired,
  rowsPerPage: PropTypes.number.isRequired,
  theme: PropTypes.object.isRequired
} : void 0;
const TablePaginationActionsWrapped = withStyles(actionsStyles, {
  withTheme: true
})(TablePaginationActions);

const style = theme => ({
  root: {
    width: '100%'
  }
});

class Pagination extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    const {
      count,
      rowsPerPage,
      threshold,
      classes
    } = this.props;
    const pageLength = Math.ceil(count / rowsPerPage);
    const C = pageLength > (threshold || 5) ? TablePaginationActionsWrapped : null;
    const customProps = {};

    if (C) {
      customProps.ActionsComponent = C;
    }

    return React.createElement(TablePagination, _extends({
      classes: {
        root: classes.root
      }
    }, customProps, this.props));
  }

}

export default withStyles(style)(Pagination);