Completely updated React, fixed #11, (hopefully)

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

@@ -1,20 +1,17 @@
-// @flow
 // @inheritedComponent TableCell
 
 import React from 'react';
-import type { ElementType, Node } 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: Object) => ({
+export const styles = theme => ({
   root: {
     // Increase the specificity to override TableCell.
     '&:last-child': {
@@ -34,18 +31,19 @@ export const styles = (theme: Object) => ({
   },
   input: {
     fontSize: 'inherit',
+    flexShrink: 0,
   },
   selectRoot: {
     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,
@@ -54,149 +52,78 @@ export const styles = (theme: Object) => ({
   },
 });
 
-export type LabelDisplayedRowsArgs = {
-  from: number,
-  to: number,
-  count: number,
-  page: number,
-};
-
-type ProvidedProps = {
-  classes: Object,
-  component: ElementType,
-  labelRowsPerPage: string,
-  labelDisplayedRows: (paginationInfo: LabelDisplayedRowsArgs) => string,
-  rowsPerPageOptions: number[],
-  theme: Object,
-};
-
-export type Props = {
-  /**
-   * Useful to extend the style applied to components.
-   */
-  classes?: Object,
-  /**
-   * The component used for the root node.
-   * Either a string to use a DOM element or a component.
-   */
-  component?: ElementType,
-  /**
-   * @ignore
-   */
-  colSpan?: number,
-  /**
-   * The total number of rows.
-   */
-  count: number,
-  /**
-   * Useful to customize the displayed rows label.
-   */
-  labelDisplayedRows?: (paginationInfo: LabelDisplayedRowsArgs) => Node,
-  /**
-   * Useful to customize the rows per page label. Invoked with a `{ from, to, count, page }`
-   * object.
-   */
-  labelRowsPerPage?: Node,
-  /**
-   * Callback fired when the page is changed. Invoked with two arguments: the event and the
-   * page to show.
-   */
-  onChangePage: (event: SyntheticInputEvent<> | null, page: number) => void,
-  /**
-   * Callback fired when the number of rows per page is changed. Invoked with two arguments: the
-   * event.
-   */
-  onChangeRowsPerPage: (event: SyntheticInputEvent<>) => void,
-  /**
-   * The zero-based index of the current page.
-   */
-  page: number,
-  /**
-   * The number of rows per page.
-   */
-  rowsPerPage: number,
-  /**
-   * Customizes the options of the rows per page select field.
-   */
-  rowsPerPageOptions?: number[],
-  /**
-   * @ignore
-   */
-  theme?: Object,
-};
-
 /**
- * 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<ProvidedProps & Props> {
-  static defaultProps = {
-    component: TableCell,
-    labelRowsPerPage: 'Rows per page:',
-    labelDisplayedRows: ({ from, to, count }) => `${from}-${to} of ${count}`,
-    rowsPerPageOptions: [5, 10, 25],
-  };
-
-  componentWillReceiveProps({ count, onChangePage, rowsPerPage }) {
+class TablePagination extends React.Component {
+  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);
     }
   }
 
-  handleBackButtonClick = event => {
-    this.props.onChangePage(event, this.props.page - 1);
-  };
-
-  handleNextButtonClick = event => {
-    this.props.onChangePage(event, this.props.page + 1);
-  };
-
   render() {
     const {
+      Actions,
+      backIconButtonProps,
       classes,
-      component: Component,
       colSpan: colSpanProp,
+      component: Component,
       count,
       labelDisplayedRows,
       labelRowsPerPage,
+      nextIconButtonProps,
       onChangePage,
       onChangeRowsPerPage,
       page,
       rowsPerPage,
       rowsPerPageOptions,
-      theme,
       ...other
     } = this.props;
 
     let colSpan;
 
     if (Component === TableCell || Component === 'td') {
-      colSpan = colSpanProp || 9001; // col-span over everything
+      colSpan = colSpanProp || 1000; // col-span over everything
     }
 
     return (
       <Component className={classes.root} colSpan={colSpan} {...other}>
         <Toolbar className={classes.toolbar}>
           <div className={classes.spacer} />
-          <Typography type="caption" className={classes.caption}>
-            {labelRowsPerPage}
-          </Typography>
-          <Select
-            classes={{ root: classes.selectRoot, select: classes.select }}
-            InputClasses={{
-              root: classes.input,
-            }}
-            input={<Input disableUnderline />}
-            value={rowsPerPage}
-            onChange={onChangeRowsPerPage}
-          >
-            {rowsPerPageOptions.map(rowsPerPageOption => (
-              <MenuItem key={rowsPerPageOption} value={rowsPerPageOption}>
-                {rowsPerPageOption}
-              </MenuItem>
-            ))}
-          </Select>
-          <Typography type="caption" className={classes.caption}>
+          {rowsPerPageOptions.length > 1 && (
+            <Typography variant="caption" className={classes.caption}>
+              {labelRowsPerPage}
+            </Typography>
+          )}
+          {rowsPerPageOptions.length > 1 && (
+            <Select
+              classes={{
+                root: classes.selectRoot,
+                select: classes.select,
+                icon: classes.selectIcon,
+              }}
+              input={
+                <Input
+                  classes={{
+                    root: classes.input,
+                  }}
+                  disableUnderline
+                />
+              }
+              value={rowsPerPage}
+              onChange={onChangeRowsPerPage}
+            >
+              {rowsPerPageOptions.map(rowsPerPageOption => (
+                <MenuItem key={rowsPerPageOption} value={rowsPerPageOption}>
+                  {rowsPerPageOption}
+                </MenuItem>
+              ))}
+            </Select>
+          )}
+          <Typography variant="caption" className={classes.caption}>
             {labelDisplayedRows({
               from: count === 0 ? 0 : page * rowsPerPage + 1,
               to: Math.min(count, (page + 1) * rowsPerPage),
@@ -204,21 +131,94 @@ class TablePagination extends React.Component<ProvidedProps & Props> {
               page,
             })}
           </Typography>
-          <div className={classes.actions}>
-            <IconButton onClick={this.handleBackButtonClick} disabled={page === 0}>
-              {theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
-            </IconButton>
-            <IconButton
-              onClick={this.handleNextButtonClick}
-              disabled={page >= Math.ceil(count / rowsPerPage) - 1}
-            >
-              {theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
-            </IconButton>
-          </div>
+          <Actions
+            backIconButtonProps={backIconButtonProps}
+            count={count}
+            nextIconButtonProps={nextIconButtonProps}
+            onChangePage={onChangePage}
+            page={page}
+            rowsPerPage={rowsPerPage}
+          />
         </Toolbar>
       </Component>
     );
   }
 }
 
-export default withStyles(styles, { withTheme: true, name: 'MuiTablePagination' })(TablePagination);
+TablePagination.propTypes = {
+  /**
+   * 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,
+  labelDisplayedRows: ({ from, to, count }) => `${from}-${to} of ${count}`,
+  labelRowsPerPage: 'Rows per page:',
+  rowsPerPageOptions: [5, 10, 25],
+};
+
+export default withStyles(styles, { name: 'MuiTablePagination' })(TablePagination);