@krowdy-ui/core/esm/TablePagination/TablePagination.js

React components that implement Google's Material Design.

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import MuiTablePagination from '@material-ui/core/TablePagination';
import ArrowLeftIcon from '@material-ui/icons/KeyboardArrowLeft';
import ArrowRightIcon from '@material-ui/icons/KeyboardArrowRight';
import Box from '../Box';
import InputBase from '../InputBase';
import Select from '../Select';
import MenuItem from '../MenuItem';
import Input from '../Input';
import IconButton from '../IconButton';
import Typography from '../Typography';
import withStyles from '../styles/withStyles';
export var styles = function styles(theme) {
  return {
    boxStyle: {
      alignItems: 'center',
      display: 'flex',
      justifyContent: 'flex-end',
      padding: theme.spacing(1)
    },
    color: {
      color: theme.palette.grey[700]
    },
    icon: {
      height: 18,
      width: 18
    },
    input: {
      fontSize: 12,
      textAlign: 'center'
    },
    inputSel: {
      fontSize: 12,
      padding: theme.spacing(0.625, 1),
      textAlign: 'center'
    },
    inputSelect: {
      padding: theme.spacing(0.625, 0.8)
    },
    label: {
      marginRight: theme.spacing(1.5)
    },
    rootLeftIcon: {
      marginLeft: theme.spacing(2.5),
      marginRight: theme.spacing(1.25),
      padding: theme.spacing(0)
    },
    rootMenuItem: {
      color: theme.palette.grey[700],
      fontSize: 12
    },
    rootRightIcon: {
      marginLeft: theme.spacing(1.5),
      padding: theme.spacing(0)
    },
    rootTextfield: {
      border: " 1px solid ".concat(theme.palette.grey[400]),
      borderRadius: 4,
      boxSizing: 'border-box',
      color: theme.palette.grey[700],
      fontSize: 12,
      width: 25
    },
    select: {
      '&$selectMenu': {
        paddingLeft: theme.spacing(0),
        paddingRight: theme.spacing(2)
      },
      '&:focus': {
        borderRadius: 4
      },
      border: "1px solid ".concat(theme.palette.grey[400]),
      borderRadius: 4,
      boxSizing: 'border-box',
      width: 47
    },
    selectIcon: {
      '& svg': {
        height: 18,
        width: 18
      },
      alignItems: 'center',
      display: 'flex',
      justifyContent: 'center'
    },
    selectMenu: {
      fontSize: 12,
      lineHeight: '14px',
      textAlign: 'center'
    },
    slash: {
      padding: theme.spacing(0, 0.75)
    }
  };
};

var _ref = /*#__PURE__*/React.createElement(InputBase, null);

var TablePagination = function TablePagination(props) {
  var _props$totalPages = props.totalPages,
      totalPages = _props$totalPages === void 0 ? 0 : _props$totalPages,
      _props$totalItems = props.totalItems,
      totalItems = _props$totalItems === void 0 ? 0 : _props$totalItems,
      classes = props.classes,
      _onChangePage = props.onChangePage,
      onChangeRowsPerPage = props.onChangeRowsPerPage,
      rowsPerPage = props.rowsPerPage,
      rowsPerPageOptions = props.rowsPerPageOptions,
      labelRowsPerPage = props.labelRowsPerPage,
      page = props.page;

  var _useState = useState(rowsPerPage),
      _useState2 = _slicedToArray(_useState, 2),
      currentPerPage = _useState2[0],
      setCurrentPerPage = _useState2[1];

  var _useState3 = useState(page),
      _useState4 = _slicedToArray(_useState3, 2),
      currentPage = _useState4[0],
      setCurrentPage = _useState4[1];

  useEffect(function () {
    setCurrentPage(page);
  }, [page]);

  var onChangeSelectState = function onChangeSelectState(ev) {
    var page = ev.target.value;
    setCurrentPerPage(page);
    onChangeRowsPerPage(page);
  };

  var _handleClickLeft = function _handleClickLeft() {
    currentPage > 1 && setCurrentPage(function (prevState) {
      var page = parseInt(prevState) - 1;

      _onChangePage(page);

      return page;
    });
  };

  var _handleClickRight = function _handleClickRight() {
    currentPage < totalPages && setCurrentPage(function (prevState) {
      var page = parseInt(prevState) + 1;

      _onChangePage(page);

      return page;
    });
  };

  var _handleChange = function _handleChange(ev) {
    var value = ev.target.value;
    if (/^[0-9]*$/g.test(value)) setCurrentPage(function (prevState) {
      return value > totalPages ? prevState : value;
    });
    if (ev.keyCode === 13) _onChangePage(parseInt(value));
  };

  return totalPages ? /*#__PURE__*/React.createElement(Box, {
    className: classes.boxStyle
  }, /*#__PURE__*/React.createElement(Typography, {
    className: classes.label
  }, "Mostrar"), /*#__PURE__*/React.createElement(Select, {
    classes: {
      icon: classes.selectIcon,
      root: classes.select,
      selectMenu: classes.selectMenu
    },
    input: _ref,
    onChange: onChangeSelectState,
    value: currentPerPage
  }, rowsPerPageOptions.map(function (limit, index) {
    return /*#__PURE__*/React.createElement(MenuItem, {
      classes: {
        root: classes.rootMenuItem,
        selected: classes.selectedMenuItem
      },
      key: index,
      value: limit
    }, limit);
  })), /*#__PURE__*/React.createElement(Box, {
    className: classes.boxStyle
  }, /*#__PURE__*/React.createElement(IconButton, {
    className: classes.rootLeftIcon,
    disabled: parseInt(currentPage) === 1,
    onClick: _handleClickLeft,
    size: "small"
  }, /*#__PURE__*/React.createElement(ArrowLeftIcon, {
    className: classes.icon
  })), /*#__PURE__*/React.createElement(Input, {
    classes: {
      input: clsx(classes.input, classes.color),
      root: classes.rootTextfield
    },
    disableUnderline: true,
    onChange: _handleChange,
    onKeyDown: _handleChange,
    value: currentPage
  }), /*#__PURE__*/React.createElement(Typography, {
    className: classes.slash
  }, "/"), /*#__PURE__*/React.createElement(Typography, null, totalPages > 0 ? totalPages : 1), /*#__PURE__*/React.createElement(IconButton, {
    className: classes.rootRightIcon,
    disabled: parseInt(currentPage) === parseInt(totalPages),
    onClick: _handleClickRight,
    size: "small"
  }, /*#__PURE__*/React.createElement(ArrowRightIcon, {
    className: classes.icon
  })))) : /*#__PURE__*/React.createElement(MuiTablePagination, {
    component: "div",
    count: totalItems,
    labelRowsPerPage: labelRowsPerPage,
    onChangePage: function onChangePage(ev, value) {
      return _onChangePage(parseInt(value + 1));
    },
    onChangeRowsPerPage: function onChangeRowsPerPage(ev) {
      return onChangeSelectState(ev);
    },
    page: parseInt(page - 1),
    rowsPerPage: currentPerPage,
    rowsPerPageOptions: rowsPerPageOptions
  });
};

process.env.NODE_ENV !== "production" ? TablePagination.propTypes = {
  SelectProps: PropTypes.object,
  backIconButtonProps: PropTypes.object,
  classes: PropTypes.object.isRequired,
  count: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  labelRowsPerPage: PropTypes.string,
  nextIconButtonProps: PropTypes.object,
  onChangePage: PropTypes.func,
  onChangeRowsPerPage: PropTypes.func,
  page: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  rowsPerPage: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  rowsPerPageOptions: PropTypes.array.isRequired,
  totalItems: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  totalPages: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
} : void 0;
export default withStyles(styles, {
  name: 'TablePagination'
})(TablePagination);