Completely updated React, fixed #11, (hopefully)

goTorrentWebUI/node_modules/material-ui/es/Table/TablePagination.js

@@ -1,21 +1,17 @@
-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; }
-
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
 // @inheritedComponent TableCell
 
 import React from 'react';
-
+import PropTypes from 'prop-types';
 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';
+import TablePaginationActions from './TablePaginationActions';
 
 export const styles = theme => ({
   root: {
@@ -36,19 +32,20 @@ export const styles = theme => ({
     flexShrink: 0
   },
   input: {
-    fontSize: 'inherit'
+    fontSize: 'inherit',
+    flexShrink: 0
   },
   selectRoot: {
-    marginRight: theme.spacing.unit * 4
+    marginRight: theme.spacing.unit * 4,
+    marginLeft: theme.spacing.unit,
+    color: theme.palette.text.secondary
   },
   select: {
-    marginLeft: theme.spacing.unit,
-    width: 34,
-    textAlign: 'right',
-    paddingRight: 22,
-    color: theme.palette.text.secondary,
-    height: 32,
-    lineHeight: '32px'
+    paddingLeft: theme.spacing.unit,
+    paddingRight: theme.spacing.unit * 2
+  },
+  selectIcon: {
+    top: 1
   },
   actions: {
     flexShrink: 0,
@@ -58,20 +55,11 @@ export const styles = theme => ({
 });
 
 /**
- * A `TableRow` based component for placing inside `TableFooter` for pagination.
+ * A `TableCell` 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 }) {
+  componentWillReceiveProps(nextProps) {
+    const { count, onChangePage, rowsPerPage } = nextProps;
     const newLastPage = Math.max(0, Math.ceil(count / rowsPerPage) - 1);
     if (this.props.page > newLastPage) {
       onChangePage(null, newLastPage);
@@ -81,25 +69,27 @@ class TablePagination extends React.Component {
   render() {
     const _props = this.props,
           {
+      Actions,
+      backIconButtonProps,
       classes,
-      component: Component,
       colSpan: colSpanProp,
+      component: Component,
       count,
       labelDisplayedRows,
       labelRowsPerPage,
+      nextIconButtonProps,
       onChangePage,
       onChangeRowsPerPage,
       page,
       rowsPerPage,
-      rowsPerPageOptions,
-      theme
+      rowsPerPageOptions
     } = _props,
-          other = _objectWithoutProperties(_props, ['classes', 'component', 'colSpan', 'count', 'labelDisplayedRows', 'labelRowsPerPage', 'onChangePage', 'onChangeRowsPerPage', 'page', 'rowsPerPage', 'rowsPerPageOptions', 'theme']);
+          other = _objectWithoutProperties(_props, ['Actions', 'backIconButtonProps', 'classes', 'colSpan', 'component', 'count', 'labelDisplayedRows', 'labelRowsPerPage', 'nextIconButtonProps', 'onChangePage', 'onChangeRowsPerPage', 'page', 'rowsPerPage', 'rowsPerPageOptions']);
 
     let colSpan;
 
     if (Component === TableCell || Component === 'td') {
-      colSpan = colSpanProp || 9001; // col-span over everything
+      colSpan = colSpanProp || 1000; // col-span over everything
     }
 
     return React.createElement(
@@ -109,19 +99,25 @@ class TablePagination extends React.Component {
         Toolbar,
         { className: classes.toolbar },
         React.createElement('div', { className: classes.spacer }),
-        React.createElement(
+        rowsPerPageOptions.length > 1 && React.createElement(
           Typography,
-          { type: 'caption', className: classes.caption },
+          { variant: 'caption', className: classes.caption },
           labelRowsPerPage
         ),
-        React.createElement(
+        rowsPerPageOptions.length > 1 && React.createElement(
           Select,
           {
-            classes: { root: classes.selectRoot, select: classes.select },
-            InputClasses: {
-              root: classes.input
+            classes: {
+              root: classes.selectRoot,
+              select: classes.select,
+              icon: classes.selectIcon
             },
-            input: React.createElement(Input, { disableUnderline: true }),
+            input: React.createElement(Input, {
+              classes: {
+                root: classes.input
+              },
+              disableUnderline: true
+            }),
             value: rowsPerPage,
             onChange: onChangeRowsPerPage
           },
@@ -133,7 +129,7 @@ class TablePagination extends React.Component {
         ),
         React.createElement(
           Typography,
-          { type: 'caption', className: classes.caption },
+          { variant: 'caption', className: classes.caption },
           labelDisplayedRows({
             from: count === 0 ? 0 : page * rowsPerPage + 1,
             to: Math.min(count, (page + 1) * rowsPerPage),
@@ -141,32 +137,93 @@ class TablePagination extends React.Component {
             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)
-          )
-        )
+        React.createElement(Actions, {
+          backIconButtonProps: backIconButtonProps,
+          count: count,
+          nextIconButtonProps: nextIconButtonProps,
+          onChangePage: onChangePage,
+          page: page,
+          rowsPerPage: rowsPerPage
+        })
       )
     );
   }
 }
 
+TablePagination.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * The component used for displaying the actions.
+   * Either a string to use a DOM element or a component.
+   */
+  Actions: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  /**
+   * Properties applied to the back arrow `IconButton` component.
+   */
+  backIconButtonProps: PropTypes.object,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  colSpan: PropTypes.number,
+  /**
+   * The component used for the root node.
+   * Either a string to use a DOM element or a component.
+   */
+  component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  /**
+   * The total number of rows.
+   */
+  count: PropTypes.number.isRequired,
+  /**
+   * Useful to customize the displayed rows label.
+   */
+  labelDisplayedRows: PropTypes.func,
+  /**
+   * Useful to customize the rows per page label. Invoked with a `{ from, to, count, page }`
+   * object.
+   */
+  labelRowsPerPage: PropTypes.node,
+  /**
+   * Properties applied to the next arrow `IconButton` component.
+   */
+  nextIconButtonProps: PropTypes.object,
+  /**
+   * Callback fired when the page is changed.
+   *
+   * @param {object} event The event source of the callback
+   * @param {number} page The page selected
+   */
+  onChangePage: PropTypes.func.isRequired,
+  /**
+   * Callback fired when the number of rows per page is changed.
+   *
+   * @param {object} event The event source of the callback
+   */
+  onChangeRowsPerPage: PropTypes.func,
+  /**
+   * The zero-based index of the current page.
+   */
+  page: PropTypes.number.isRequired,
+  /**
+   * The number of rows per page.
+   */
+  rowsPerPage: PropTypes.number.isRequired,
+  /**
+   * Customizes the options of the rows per page select field. If less than two options are
+   * available, no select field will be displayed.
+   */
+  rowsPerPageOptions: PropTypes.array
+} : {};
+
 TablePagination.defaultProps = {
+  Actions: TablePaginationActions,
   component: TableCell,
-  labelRowsPerPage: 'Rows per page:',
   labelDisplayedRows: ({ from, to, count }) => `${from}-${to} of ${count}`,
+  labelRowsPerPage: 'Rows per page:',
   rowsPerPageOptions: [5, 10, 25]
 };
-export default withStyles(styles, { withTheme: true, name: 'MuiTablePagination' })(TablePagination);
+
+export default withStyles(styles, { name: 'MuiTablePagination' })(TablePagination);