Completely updated React, fixed #11, (hopefully)

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

@@ -1,19 +1,20 @@
-// @flow
 // @inheritedComponent ButtonBase
 
 import React from 'react';
-import type { ElementType, Node } 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: Object) => ({
+export const styles = theme => ({
   root: {
     ...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,
@@ -33,12 +34,6 @@ export const styles = (theme: Object) => ({
       },
     },
   },
-  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',
@@ -46,29 +41,19 @@ export const styles = (theme: Object) => ({
     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',
@@ -90,7 +75,7 @@ export const styles = (theme: Object) => ({
     },
     '&$disabled': {
       boxShadow: theme.shadows[0],
-      backgroundColor: theme.palette.text.divider,
+      backgroundColor: theme.palette.action.disabledBackground,
     },
     '&:hover': {
       backgroundColor: theme.palette.grey.A100,
@@ -99,40 +84,33 @@ export const styles = (theme: Object) => ({
         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,
   },
@@ -141,120 +119,81 @@ export const styles = (theme: Object) => ({
     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%',
+  },
 });
 
-export type Color = 'default' | 'inherit' | 'primary' | 'accent' | 'contrast';
-
-type ProvidedProps = {
-  classes: Object,
-  color: Color,
-  dense: boolean,
-  disabled: boolean,
-  fab: boolean,
-  disableFocusRipple: boolean,
-  raised: boolean,
-  disableRipple: boolean,
-  type: string,
-};
-
-export type Props = {
-  /**
-   * The content of the button.
-   */
-  children: Node,
-  /**
-   * Useful to extend the style applied to components.
-   */
-  classes?: Object,
-  /**
-   * @ignore
-   */
-  className?: string,
-  /**
-   * The color of the component. It's using the theme palette when that makes sense.
-   */
-  color?: Color,
-  /**
-   * 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?: ElementType,
-  /**
-   * Uses a smaller minWidth, ideal for things like card actions.
-   */
-  dense?: boolean,
-  /**
-   * If `true`, the button will be disabled.
-   */
-  disabled?: boolean,
-  /**
-   * If `true`, the  keyboard focus ripple will be disabled.
-   * `disableRipple` must also be true.
-   */
-  disableFocusRipple?: boolean,
-  /**
-   * If `true`, the ripple effect will be disabled.
-   */
-  disableRipple?: boolean,
-  /**
-   * If `true`, will use floating action button styling.
-   */
-  fab?: boolean,
-  /**
-   * The URL to link to when the button is clicked.
-   * If defined, an `a` element will be used as the root node.
-   */
-  href?: string,
-  /**
-   * If `true`, the button will use raised styling.
-   */
-  raised?: boolean,
-  /**
-   * @ignore
-   */
-  type?: string,
-};
-
-function Button(props: ProvidedProps & Props) {
+function Button(props) {
   const {
-    children,
+    children: childrenProp,
     classes,
     className: classNameProp,
     color,
-    dense,
     disabled,
     disableFocusRipple,
-    fab,
-    raised,
+    fullWidth,
+    mini,
+    size,
+    variant,
     ...other
   } = props;
 
+  const fab = variant === 'fab';
+  const raised = variant === 'raised';
   const flat = !raised && !fab;
   const className = classNames(
+    classes.root,
     {
-      [classes.root]: true,
       [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.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 (
     <ButtonBase
       className={className}
@@ -268,15 +207,80 @@ function Button(props: ProvidedProps & Props) {
   );
 }
 
+Button.propTypes = {
+  /**
+   * 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,
+  fullWidth: false,
+  mini: false,
+  size: 'medium',
   type: 'button',
+  variant: 'flat',
 };
 
 export default withStyles(styles, { name: 'MuiButton' })(Button);