Completely updated React, fixed #11, (hopefully)

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

@@ -1,17 +1,15 @@
-// @flow weak
 // @inheritedComponent ButtonBase
 
 import React from 'react';
-import type { Node } from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
 import ButtonBase from '../ButtonBase';
-import { capitalizeFirstLetter } from '../utils/helpers';
-import Icon from '../Icon';
-import '../SvgIcon'; // Ensure CSS specificity
+import { capitalize } from '../utils/helpers';
 import { isMuiElement } from '../utils/reactHelpers';
+import '../SvgIcon'; // Ensure CSS specificity
 
-export const styles = (theme: Object) => ({
+export const styles = theme => ({
   root: {
     textAlign: 'center',
     flex: '0 0 auto',
@@ -25,18 +23,15 @@ export const styles = (theme: Object) => ({
       duration: theme.transitions.duration.shortest,
     }),
   },
-  colorAccent: {
-    color: theme.palette.secondary.A200,
-  },
-  colorContrast: {
-    color: theme.palette.getContrastText(theme.palette.primary[500]),
-  },
-  colorPrimary: {
-    color: theme.palette.primary[500],
-  },
   colorInherit: {
     color: 'inherit',
   },
+  colorPrimary: {
+    color: theme.palette.primary.main,
+  },
+  colorSecondary: {
+    color: theme.palette.secondary.main,
+  },
   disabled: {
     color: theme.palette.action.disabled,
   },
@@ -46,98 +41,69 @@ export const styles = (theme: Object) => ({
     alignItems: 'inherit',
     justifyContent: 'inherit',
   },
-  icon: {
-    width: '1em',
-    height: '1em',
-  },
-  keyboardFocused: {
-    backgroundColor: theme.palette.text.divider,
-  },
 });
 
-type ProvidedProps = {
-  classes: Object,
-};
-
-export type Props = {
-  /**
-   * Use that property to pass a ref callback to the native button component.
-   */
-  buttonRef?: Function,
-  /**
-   * The icon element.
-   * If a string is provided, it will be used as an icon font ligature.
-   */
-  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?: 'default' | 'inherit' | 'primary' | 'contrast' | 'accent',
-  /**
-   * If `true`, the button will be disabled.
-   */
-  disabled?: boolean,
-  /**
-   * If `true`, the ripple will be disabled.
-   */
-  disableRipple?: boolean,
-  /**
-   * Use that property to pass a ref callback to the root component.
-   */
-  rootRef?: Function,
-};
-
 /**
  * Refer to the [Icons](/style/icons) section of the documentation
  * regarding the available icon options.
  */
-function IconButton(props: ProvidedProps & Props) {
-  const { buttonRef, children, classes, className, color, disabled, rootRef, ...other } = props;
+function IconButton(props) {
+  const { children, classes, className, color, disabled, ...other } = props;
 
   return (
     <ButtonBase
       className={classNames(
         classes.root,
         {
-          [classes[`color${capitalizeFirstLetter(color)}`]]: color !== 'default',
+          [classes[`color${capitalize(color)}`]]: color !== 'default',
           [classes.disabled]: disabled,
         },
         className,
       )}
       centerRipple
-      keyboardFocusedClassName={classes.keyboardFocused}
+      focusRipple
       disabled={disabled}
       {...other}
-      rootRef={buttonRef}
-      ref={rootRef}
     >
       <span className={classes.label}>
-        {typeof children === 'string' ? (
-          <Icon className={classes.icon}>{children}</Icon>
-        ) : (
-          React.Children.map(children, child => {
-            if (isMuiElement(child, ['Icon', 'SvgIcon'])) {
-              return React.cloneElement(child, {
-                className: classNames(classes.icon, child.props.className),
-              });
-            }
-
-            return child;
-          })
-        )}
+        {React.Children.map(children, child => {
+          if (isMuiElement(child, ['Icon', 'SvgIcon'])) {
+            return React.cloneElement(child, { fontSize: true });
+          }
+          return child;
+        })}
       </span>
     </ButtonBase>
   );
 }
 
+IconButton.propTypes = {
+  /**
+   * The icon element.
+   */
+  children: PropTypes.node,
+  /**
+   * 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']),
+  /**
+   * If `true`, the button will be disabled.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, the ripple will be disabled.
+   */
+  disableRipple: PropTypes.bool,
+};
+
 IconButton.defaultProps = {
   color: 'default',
   disabled: false,