All files / src/components/DatatableFooter DatatableFooter.js

100% Statements 15/15
100% Branches 8/8
100% Functions 11/11
100% Lines 15/15

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121                                                      14x   14x             1x           70x                       1x           90x                         2x                   2x                   4x               4x 13x 5x 1x       4x 14x                      
import React, { Component } from "react";
import { connect } from "react-redux";
import { Select, MenuItem, IconButton } from "@material-ui/core";
import {
  NavigateNext as NavigateNextIcon,
  NavigateBefore as NavigateBeforeIcon
} from "@material-ui/icons";
import {
  paginationPropType,
  widthNumberPropType,
  rowsPerPagePropType,
  setPagePagePropType,
  setRowsPerPagePropType
} from "../../proptypes";
import {
  setPage as setPageAction,
  setRowsPerPage as setRowsPerPageAction
} from "../../redux/actions/datatableActions";
 
class DatatableFooter extends Component {
  render() {
    const {
      width,
      rowsPerPage,
      pagination,
      setPage,
      setRowsPerPage
    } = this.props;
 
    return (
      <div className="Footer" style={{ width }}>
        <div className="Footer-Element">
          Rows :
          <Select
            className="select-rowsPerPage"
            value={pagination.rowsPerPageSelected}
            onChange={e => setRowsPerPage(e.target.value)}
            disabled={
              rowsPerPage.available.length === 1 || pagination.pageTotal === 0
            }
          >
            {rowsPerPage.available.map(val => (
              <MenuItem key={val} value={val}>
                {val}
              </MenuItem>
            ))}
          </Select>
        </div>
 
        <div className="Footer-Element">
          Page :
          <Select
            className="select-page"
            value={pagination.pageSelected}
            onChange={e => setPage(e.target.value)}
            disabled={pagination.pageTotal === 1 || pagination.pageTotal === 0}
          >
            {Array.apply(null, { length: pagination.pageTotal })
              .map(Number.call, Number)
              .map(val => (
                <MenuItem key={val} value={val + 1}>
                  {val + 1}
                </MenuItem>
              ))}
          </Select>
        </div>
 
        <div className="Footer-Element">
          <IconButton
            className="previous-page"
            disabled={
              pagination.pageSelected === 1 || pagination.pageTotal === 0
            }
            onClick={() => setPage(pagination.pageSelected - 1)}
          >
            <NavigateBeforeIcon />
          </IconButton>
          <IconButton
            className="next-page"
            disabled={
              pagination.pageSelected === pagination.pageTotal ||
              pagination.pageTotal === 0
            }
            onClick={() => setPage(pagination.pageSelected + 1)}
          >
            <NavigateNextIcon />
          </IconButton>
        </div>
      </div>
    );
  }
}
 
DatatableFooter.propTypes = {
  pagination: paginationPropType.isRequired,
  width: widthNumberPropType.isRequired,
  rowsPerPage: rowsPerPagePropType.isRequired,
  setPage: setPagePagePropType,
  setRowsPerPage: setRowsPerPagePropType
};
 
const mapDispatchToProps = dispatch => {
  return {
    setPage: pageNumber => dispatch(setPageAction(pageNumber)),
    setRowsPerPage: rowsPerPage => dispatch(setRowsPerPageAction(rowsPerPage))
  };
};
 
const mapStateToProps = state => {
  return {
    width: state.datatableReducer.dimensions.datatable.widthNumber,
    pagination: state.datatableReducer.pagination,
    rowsPerPage: state.datatableReducer.features.rowsPerPage
  };
};
 
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(DatatableFooter);