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); |