Completely updated React, fixed #11, (hopefully)

goTorrentWebUI/node_modules/material-ui/es/Button/Button.d.ts

@@ -2,20 +2,18 @@ import * as React from 'react';
 import { StandardProps, PropTypes } from '..';
 import { ButtonBaseProps, ButtonBaseClassKey } from '../ButtonBase';
 
-export interface ButtonProps extends StandardProps<
-  ButtonBaseProps,
-  ButtonClassKey
-> {
-  color?: PropTypes.Color | 'contrast';
-  component?: React.ReactType;
-  dense?: boolean;
+export interface ButtonProps extends StandardProps<ButtonBaseProps, ButtonClassKey, 'component'> {
+  color?: PropTypes.Color;
+  component?: React.ReactType<ButtonProps>;
   disabled?: boolean;
   disableFocusRipple?: boolean;
   disableRipple?: boolean;
-  fab?: boolean;
+  fullWidth?: boolean;
   href?: string;
-  raised?: boolean;
+  mini?: boolean;
+  size?: 'small' | 'medium' | 'large';
   type?: string;
+  variant?: 'flat' | 'raised' | 'fab';
 }
 
 export type ButtonClassKey =
@@ -23,17 +21,15 @@ export type ButtonClassKey =
   | 'dense'
   | 'label'
   | 'flatPrimary'
-  | 'flatAccent'
-  | 'flatContrast'
+  | 'flatSecondary'
   | 'colorInherit'
   | 'raised'
   | 'keyboardFocused'
   | 'raisedPrimary'
-  | 'raisedAccent'
-  | 'raisedContrast'
+  | 'raisedSecondary'
   | 'fab'
-  ;
+  | 'fullWidth';
 
 declare const Button: React.ComponentType<ButtonProps>;
 
-export default Button
+export default Button;

goTorrentWebUI/node_modules/material-ui/es/Button/Button.js

@@ -1,21 +1,21 @@
-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 _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import _extends from 'babel-runtime/helpers/extends';
 // @inheritedComponent ButtonBase
 
 import React from 'react';
-
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
 import { fade } from '../styles/colorManipulator';
 import ButtonBase from '../ButtonBase';
+import { capitalize } from '../utils/helpers';
+import { isMuiElement } from '../utils/reactHelpers';
 
 export const styles = theme => ({
   root: _extends({}, theme.typography.button, {
     lineHeight: '1.4em', // Improve readability for multiline button.
     boxSizing: 'border-box',
-    minWidth: 88,
+    minWidth: theme.spacing.unit * 11,
     minHeight: 36,
     padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`,
     borderRadius: 2,
@@ -35,12 +35,6 @@ export const styles = theme => ({
       }
     }
   }),
-  dense: {
-    padding: `${theme.spacing.unit - 1}px ${theme.spacing.unit}px`,
-    minWidth: 64,
-    minHeight: 32,
-    fontSize: theme.typography.pxToRem(theme.typography.fontSize - 1)
-  },
   label: {
     width: '100%',
     display: 'inherit',
@@ -48,29 +42,19 @@ export const styles = theme => ({
     justifyContent: 'inherit'
   },
   flatPrimary: {
-    color: theme.palette.primary[500],
+    color: theme.palette.primary.main,
     '&:hover': {
-      backgroundColor: fade(theme.palette.primary[500], 0.12),
+      backgroundColor: fade(theme.palette.primary.main, 0.12),
       // Reset on mouse devices
       '@media (hover: none)': {
         backgroundColor: 'transparent'
       }
     }
   },
-  flatAccent: {
-    color: theme.palette.secondary.A200,
+  flatSecondary: {
+    color: theme.palette.secondary.main,
     '&:hover': {
-      backgroundColor: fade(theme.palette.secondary.A200, 0.12),
-      // Reset on mouse devices
-      '@media (hover: none)': {
-        backgroundColor: 'transparent'
-      }
-    }
-  },
-  flatContrast: {
-    color: theme.palette.getContrastText(theme.palette.primary[500]),
-    '&:hover': {
-      backgroundColor: fade(theme.palette.getContrastText(theme.palette.primary[500]), 0.12),
+      backgroundColor: fade(theme.palette.secondary.main, 0.12),
       // Reset on mouse devices
       '@media (hover: none)': {
         backgroundColor: 'transparent'
@@ -92,7 +76,7 @@ export const styles = theme => ({
     },
     '&$disabled': {
       boxShadow: theme.shadows[0],
-      backgroundColor: theme.palette.text.divider
+      backgroundColor: theme.palette.action.disabledBackground
     },
     '&:hover': {
       backgroundColor: theme.palette.grey.A100,
@@ -101,40 +85,33 @@ export const styles = theme => ({
         backgroundColor: theme.palette.grey[300]
       },
       '&$disabled': {
-        backgroundColor: theme.palette.text.divider,
-        // Reset on mouse devices
-        '@media (hover: none)': {
-          backgroundColor: theme.palette.grey[300]
-        }
+        backgroundColor: theme.palette.action.disabledBackground
       }
     }
   },
   keyboardFocused: {},
   raisedPrimary: {
-    color: theme.palette.getContrastText(theme.palette.primary[500]),
-    backgroundColor: theme.palette.primary[500],
+    color: theme.palette.primary.contrastText,
+    backgroundColor: theme.palette.primary.main,
     '&:hover': {
-      backgroundColor: theme.palette.primary[700],
+      backgroundColor: theme.palette.primary.dark,
       // Reset on mouse devices
       '@media (hover: none)': {
-        backgroundColor: theme.palette.primary[500]
+        backgroundColor: theme.palette.primary.main
       }
     }
   },
-  raisedAccent: {
-    color: theme.palette.getContrastText(theme.palette.secondary.A200),
-    backgroundColor: theme.palette.secondary.A200,
+  raisedSecondary: {
+    color: theme.palette.secondary.contrastText,
+    backgroundColor: theme.palette.secondary.main,
     '&:hover': {
-      backgroundColor: theme.palette.secondary.A400,
+      backgroundColor: theme.palette.secondary.dark,
       // Reset on mouse devices
       '@media (hover: none)': {
-        backgroundColor: theme.palette.secondary.A200
+        backgroundColor: theme.palette.secondary.main
       }
     }
   },
-  raisedContrast: {
-    color: theme.palette.getContrastText(theme.palette.primary[500])
-  },
   disabled: {
     color: theme.palette.action.disabled
   },
@@ -143,44 +120,77 @@ export const styles = theme => ({
     padding: 0,
     minWidth: 0,
     width: 56,
+    fontSize: 24,
     height: 56,
     boxShadow: theme.shadows[6],
     '&:active': {
       boxShadow: theme.shadows[12]
     }
+  },
+  mini: {
+    width: 40,
+    height: 40
+  },
+  sizeSmall: {
+    padding: `${theme.spacing.unit - 1}px ${theme.spacing.unit}px`,
+    minWidth: theme.spacing.unit * 8,
+    minHeight: 32,
+    fontSize: theme.typography.pxToRem(theme.typography.fontSize - 1)
+  },
+  sizeLarge: {
+    padding: `${theme.spacing.unit}px ${theme.spacing.unit * 3}px`,
+    minWidth: theme.spacing.unit * 14,
+    minHeight: 40,
+    fontSize: theme.typography.pxToRem(theme.typography.fontSize + 1)
+  },
+  fullWidth: {
+    width: '100%'
   }
 });
 
 function Button(props) {
   const {
-    children,
+    children: childrenProp,
     classes,
     className: classNameProp,
     color,
-    dense,
     disabled,
     disableFocusRipple,
-    fab,
-    raised
+    fullWidth,
+    mini,
+    size,
+    variant
   } = props,
-        other = _objectWithoutProperties(props, ['children', 'classes', 'className', 'color', 'dense', 'disabled', 'disableFocusRipple', 'fab', 'raised']);
+        other = _objectWithoutProperties(props, ['children', 'classes', 'className', 'color', 'disabled', 'disableFocusRipple', 'fullWidth', 'mini', 'size', 'variant']);
 
+  const fab = variant === 'fab';
+  const raised = variant === 'raised';
   const flat = !raised && !fab;
-  const className = classNames({
-    [classes.root]: true,
+  const className = classNames(classes.root, {
     [classes.raised]: raised || fab,
     [classes.fab]: fab,
+    [classes.mini]: fab && mini,
     [classes.colorInherit]: color === 'inherit',
     [classes.flatPrimary]: flat && color === 'primary',
-    [classes.flatAccent]: flat && color === 'accent',
-    [classes.flatContrast]: flat && color === 'contrast',
+    [classes.flatSecondary]: flat && color === 'secondary',
     [classes.raisedPrimary]: !flat && color === 'primary',
-    [classes.raisedAccent]: !flat && color === 'accent',
-    [classes.raisedContrast]: !flat && color === 'contrast',
-    [classes.dense]: dense,
-    [classes.disabled]: disabled
+    [classes.raisedSecondary]: !flat && color === 'secondary',
+    [classes[`size${capitalize(size)}`]]: size !== 'medium',
+    [classes.disabled]: disabled,
+    [classes.fullWidth]: fullWidth
   }, classNameProp);
 
+  let children = childrenProp;
+
+  if (fab) {
+    children = React.Children.map(children, child => {
+      if (isMuiElement(child, ['Icon', 'SvgIcon'])) {
+        return React.cloneElement(child, { fontSize: true });
+      }
+      return child;
+    });
+  }
+
   return React.createElement(
     ButtonBase,
     _extends({
@@ -197,15 +207,80 @@ function Button(props) {
   );
 }
 
+Button.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * The content of the button.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The color of the component. It supports those theme colors that make sense for this component.
+   */
+  color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary']),
+  /**
+   * The component used for the root node.
+   * Either a string to use a DOM element or a component.
+   * The default value is a `button`.
+   */
+  component: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  /**
+   * If `true`, the button will be disabled.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, the  keyboard focus ripple will be disabled.
+   * `disableRipple` must also be true.
+   */
+  disableFocusRipple: PropTypes.bool,
+  /**
+   * If `true`, the ripple effect will be disabled.
+   */
+  disableRipple: PropTypes.bool,
+  /**
+   * If `true`, the button will take up the full width of its container.
+   */
+  fullWidth: PropTypes.bool,
+  /**
+   * The URL to link to when the button is clicked.
+   * If defined, an `a` element will be used as the root node.
+   */
+  href: PropTypes.string,
+  /**
+   * If `true`, and `variant` is `'fab'`, will use mini floating action button styling.
+   */
+  mini: PropTypes.bool,
+  /**
+   * The size of the button.
+   * `small` is equivalent to the dense button styling.
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  /**
+   * @ignore
+   */
+  type: PropTypes.string,
+  /**
+   * The color of the component. It supports those theme colors that make sense for this component.
+   */
+  variant: PropTypes.oneOf(['flat', 'raised', 'fab'])
+} : {};
+
 Button.defaultProps = {
   color: 'default',
-  dense: false,
   disabled: false,
-  fab: false,
   disableFocusRipple: false,
-  raised: false,
   disableRipple: false,
-  type: 'button'
+  fullWidth: false,
+  mini: false,
+  size: 'medium',
+  type: 'button',
+  variant: 'flat'
 };
 
 export default withStyles(styles, { name: 'MuiButton' })(Button);