@krowdy-ui/views/esm/Pagination/Pagination.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 { withStyles } from '@krowdy-ui/styles';
import { KeyboardArrowLeft as ArrowLeftIcon, KeyboardArrowRight as ArrowRightIcon } from '@material-ui/icons';
import { Box, Typography, InputBase, Select, MenuItem, Input, IconButton } from '@krowdy-ui/core';
import clsx from 'clsx';
export var styles = function styles(theme) {
  return {
    boxStyle: {
      alignItems: 'center',
      display: 'flex'
    },
    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 Pagination = function Pagination(props) {
  var classes = props.classes,
      _props$onChangeSelect = props.onChangeSelect,
      onChangeSelect = _props$onChangeSelect === void 0 ? function () {} : _props$onChangeSelect,
      _props$valueSelect = props.valueSelect,
      valueSelect = _props$valueSelect === void 0 ? 10 : _props$valueSelect,
      _props$onChangePage = props.onChangePage,
      onChangePage = _props$onChangePage === void 0 ? function () {} : _props$onChangePage,
      _props$page = props.page,
      page = _props$page === void 0 ? 1 : _props$page,
      _props$limits = props.limits,
      limits = _props$limits === void 0 ? [10, 50, 100] : _props$limits,
      _props$totalPages = props.totalPages,
      totalPages = _props$totalPages === void 0 ? 1 : _props$totalPages;

  var _useState = useState(valueSelect),
      _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);
    onChangeSelect(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 /*#__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
  }, limits.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
  }))));
};

process.env.NODE_ENV !== "production" ? Pagination.propTypes = {
  limits: PropTypes.array,
  onChangePage: PropTypes.func,
  onChangeSelect: PropTypes.func,
  page: PropTypes.number,
  totalPages: PropTypes.number,
  valueSelect: PropTypes.number
} : void 0;
Pagination.muiName = 'Pagination';
export default withStyles(styles, {
  name: 'KrowdyPagination'
})(Pagination);