172 lines
		
	
	
		
			5.3 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			172 lines
		
	
	
		
			5.3 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 | 
						|
 | 
						|
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 | 
						|
 | 
						|
// @inheritedComponent TableCell
 | 
						|
 | 
						|
import React from 'react';
 | 
						|
 | 
						|
import withStyles from '../styles/withStyles';
 | 
						|
import IconButton from '../IconButton';
 | 
						|
import Input from '../Input';
 | 
						|
import { MenuItem } from '../Menu';
 | 
						|
import Select from '../Select';
 | 
						|
import TableCell from './TableCell';
 | 
						|
import Toolbar from '../Toolbar';
 | 
						|
import Typography from '../Typography';
 | 
						|
import KeyboardArrowLeft from '../svg-icons/KeyboardArrowLeft';
 | 
						|
import KeyboardArrowRight from '../svg-icons/KeyboardArrowRight';
 | 
						|
 | 
						|
export const styles = theme => ({
 | 
						|
  root: {
 | 
						|
    // Increase the specificity to override TableCell.
 | 
						|
    '&:last-child': {
 | 
						|
      padding: 0
 | 
						|
    }
 | 
						|
  },
 | 
						|
  toolbar: {
 | 
						|
    height: 56,
 | 
						|
    minHeight: 56,
 | 
						|
    paddingRight: 2
 | 
						|
  },
 | 
						|
  spacer: {
 | 
						|
    flex: '1 1 100%'
 | 
						|
  },
 | 
						|
  caption: {
 | 
						|
    flexShrink: 0
 | 
						|
  },
 | 
						|
  input: {
 | 
						|
    fontSize: 'inherit'
 | 
						|
  },
 | 
						|
  selectRoot: {
 | 
						|
    marginRight: theme.spacing.unit * 4
 | 
						|
  },
 | 
						|
  select: {
 | 
						|
    marginLeft: theme.spacing.unit,
 | 
						|
    width: 34,
 | 
						|
    textAlign: 'right',
 | 
						|
    paddingRight: 22,
 | 
						|
    color: theme.palette.text.secondary,
 | 
						|
    height: 32,
 | 
						|
    lineHeight: '32px'
 | 
						|
  },
 | 
						|
  actions: {
 | 
						|
    flexShrink: 0,
 | 
						|
    color: theme.palette.text.secondary,
 | 
						|
    marginLeft: theme.spacing.unit * 2.5
 | 
						|
  }
 | 
						|
});
 | 
						|
 | 
						|
/**
 | 
						|
 * A `TableRow` based component for placing inside `TableFooter` for pagination.
 | 
						|
 */
 | 
						|
class TablePagination extends React.Component {
 | 
						|
  constructor(...args) {
 | 
						|
    var _temp;
 | 
						|
 | 
						|
    return _temp = super(...args), this.handleBackButtonClick = event => {
 | 
						|
      this.props.onChangePage(event, this.props.page - 1);
 | 
						|
    }, this.handleNextButtonClick = event => {
 | 
						|
      this.props.onChangePage(event, this.props.page + 1);
 | 
						|
    }, _temp;
 | 
						|
  }
 | 
						|
 | 
						|
  componentWillReceiveProps({ count, onChangePage, rowsPerPage }) {
 | 
						|
    const newLastPage = Math.max(0, Math.ceil(count / rowsPerPage) - 1);
 | 
						|
    if (this.props.page > newLastPage) {
 | 
						|
      onChangePage(null, newLastPage);
 | 
						|
    }
 | 
						|
  }
 | 
						|
 | 
						|
  render() {
 | 
						|
    const _props = this.props,
 | 
						|
          {
 | 
						|
      classes,
 | 
						|
      component: Component,
 | 
						|
      colSpan: colSpanProp,
 | 
						|
      count,
 | 
						|
      labelDisplayedRows,
 | 
						|
      labelRowsPerPage,
 | 
						|
      onChangePage,
 | 
						|
      onChangeRowsPerPage,
 | 
						|
      page,
 | 
						|
      rowsPerPage,
 | 
						|
      rowsPerPageOptions,
 | 
						|
      theme
 | 
						|
    } = _props,
 | 
						|
          other = _objectWithoutProperties(_props, ['classes', 'component', 'colSpan', 'count', 'labelDisplayedRows', 'labelRowsPerPage', 'onChangePage', 'onChangeRowsPerPage', 'page', 'rowsPerPage', 'rowsPerPageOptions', 'theme']);
 | 
						|
 | 
						|
    let colSpan;
 | 
						|
 | 
						|
    if (Component === TableCell || Component === 'td') {
 | 
						|
      colSpan = colSpanProp || 9001; // col-span over everything
 | 
						|
    }
 | 
						|
 | 
						|
    return React.createElement(
 | 
						|
      Component,
 | 
						|
      _extends({ className: classes.root, colSpan: colSpan }, other),
 | 
						|
      React.createElement(
 | 
						|
        Toolbar,
 | 
						|
        { className: classes.toolbar },
 | 
						|
        React.createElement('div', { className: classes.spacer }),
 | 
						|
        React.createElement(
 | 
						|
          Typography,
 | 
						|
          { type: 'caption', className: classes.caption },
 | 
						|
          labelRowsPerPage
 | 
						|
        ),
 | 
						|
        React.createElement(
 | 
						|
          Select,
 | 
						|
          {
 | 
						|
            classes: { root: classes.selectRoot, select: classes.select },
 | 
						|
            InputClasses: {
 | 
						|
              root: classes.input
 | 
						|
            },
 | 
						|
            input: React.createElement(Input, { disableUnderline: true }),
 | 
						|
            value: rowsPerPage,
 | 
						|
            onChange: onChangeRowsPerPage
 | 
						|
          },
 | 
						|
          rowsPerPageOptions.map(rowsPerPageOption => React.createElement(
 | 
						|
            MenuItem,
 | 
						|
            { key: rowsPerPageOption, value: rowsPerPageOption },
 | 
						|
            rowsPerPageOption
 | 
						|
          ))
 | 
						|
        ),
 | 
						|
        React.createElement(
 | 
						|
          Typography,
 | 
						|
          { type: 'caption', className: classes.caption },
 | 
						|
          labelDisplayedRows({
 | 
						|
            from: count === 0 ? 0 : page * rowsPerPage + 1,
 | 
						|
            to: Math.min(count, (page + 1) * rowsPerPage),
 | 
						|
            count,
 | 
						|
            page
 | 
						|
          })
 | 
						|
        ),
 | 
						|
        React.createElement(
 | 
						|
          'div',
 | 
						|
          { className: classes.actions },
 | 
						|
          React.createElement(
 | 
						|
            IconButton,
 | 
						|
            { onClick: this.handleBackButtonClick, disabled: page === 0 },
 | 
						|
            theme.direction === 'rtl' ? React.createElement(KeyboardArrowRight, null) : React.createElement(KeyboardArrowLeft, null)
 | 
						|
          ),
 | 
						|
          React.createElement(
 | 
						|
            IconButton,
 | 
						|
            {
 | 
						|
              onClick: this.handleNextButtonClick,
 | 
						|
              disabled: page >= Math.ceil(count / rowsPerPage) - 1
 | 
						|
            },
 | 
						|
            theme.direction === 'rtl' ? React.createElement(KeyboardArrowLeft, null) : React.createElement(KeyboardArrowRight, null)
 | 
						|
          )
 | 
						|
        )
 | 
						|
      )
 | 
						|
    );
 | 
						|
  }
 | 
						|
}
 | 
						|
 | 
						|
TablePagination.defaultProps = {
 | 
						|
  component: TableCell,
 | 
						|
  labelRowsPerPage: 'Rows per page:',
 | 
						|
  labelDisplayedRows: ({ from, to, count }) => `${from}-${to} of ${count}`,
 | 
						|
  rowsPerPageOptions: [5, 10, 25]
 | 
						|
};
 | 
						|
export default withStyles(styles, { withTheme: true, name: 'MuiTablePagination' })(TablePagination); |