@krowdy-ui/views/es/Pagination/Pagination.js

React components that implement Google's Material Design.

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 const styles = theme => ({
  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 ${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 ${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);

const Pagination = props => {
  const {
    classes,
    onChangeSelect = () => {},
    valueSelect = 10,
    onChangePage = () => {},
    page = 1,
    limits = [10, 50, 100],
    totalPages = 1
  } = props;
  const [currentPerPage, setCurrentPerPage] = useState(valueSelect);
  const [currentPage, setCurrentPage] = useState(page);
  useEffect(() => {
    setCurrentPage(page);
  }, [page]);

  const onChangeSelectState = ev => {
    const page = ev.target.value;
    setCurrentPerPage(page);
    onChangeSelect(page);
  };

  const _handleClickLeft = () => {
    currentPage > 1 && setCurrentPage(prevState => {
      const page = parseInt(prevState) - 1;
      onChangePage(page);
      return page;
    });
  };

  const _handleClickRight = () => {
    currentPage < totalPages && setCurrentPage(prevState => {
      const page = parseInt(prevState) + 1;
      onChangePage(page);
      return page;
    });
  };

  const _handleChange = ev => {
    const {
      value
    } = ev.target;
    if (/^[0-9]*$/g.test(value)) setCurrentPage(prevState => 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((limit, index) => /*#__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);