Completely updated React, fixed #11, (hopefully)

goTorrentWebUI/node_modules/material-ui/Tabs/Tab.js.flow

@@ -1,15 +1,13 @@
-// @flow
 // @inheritedComponent ButtonBase
 
 import React from 'react';
-import type { Element } 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 { capitalize } from '../utils/helpers';
 
-export const styles = (theme: Object) => ({
+export const styles = theme => ({
   root: {
     ...theme.typography.button,
     maxWidth: 264,
@@ -26,27 +24,27 @@ export const styles = (theme: Object) => ({
   rootLabelIcon: {
     height: 72,
   },
-  rootAccent: {
-    color: theme.palette.text.secondary,
-  },
-  rootAccentSelected: {
-    color: theme.palette.secondary.A200,
-  },
-  rootAccentDisabled: {
-    color: theme.palette.text.disabled,
+  rootInherit: {
+    color: 'inherit',
+    opacity: 0.7,
   },
   rootPrimary: {
     color: theme.palette.text.secondary,
   },
   rootPrimarySelected: {
-    color: theme.palette.primary[500],
+    color: theme.palette.primary.main,
   },
   rootPrimaryDisabled: {
     color: theme.palette.text.disabled,
   },
-  rootInherit: {
-    color: 'inherit',
-    opacity: 0.7,
+  rootSecondary: {
+    color: theme.palette.text.secondary,
+  },
+  rootSecondarySelected: {
+    color: theme.palette.secondary.main,
+  },
+  rootSecondaryDisabled: {
+    color: theme.palette.text.disabled,
   },
   rootInheritSelected: {
     opacity: 1,
@@ -82,82 +80,13 @@ export const styles = (theme: Object) => ({
     },
   },
   labelWrapped: {
-    [theme.breakpoints.down('md')]: {
+    [theme.breakpoints.down('sm')]: {
       fontSize: theme.typography.pxToRem(theme.typography.fontSize - 2),
     },
   },
 });
 
-type ProvidedProps = {
-  classes: Object,
-};
-
-export type Props = {
-  /**
-   * Useful to extend the style applied to components.
-   */
-  classes?: Object,
-  /**
-   * @ignore
-   */
-  className?: string,
-  /**
-   * If `true`, the tab will be disabled.
-   */
-  disabled?: boolean,
-  /**
-   * @ignore
-   */
-  fullWidth?: boolean,
-  /**
-   * The icon element. If a string is provided, it will be used as a font ligature.
-   */
-  icon?: string | Element<any>,
-  /**
-   * @ignore
-   * For server side rendering consideration, we let the selected tab
-   * render the indicator.
-   */
-  indicator?: string | Element<any>,
-  /**
-   * The label element.
-   */
-  label?: string | Element<any>,
-  /**
-   * @ignore
-   */
-  onChange?: (event: SyntheticEvent<>, value: any) => void,
-  /**
-   * @ignore
-   */
-  onClick?: (event: SyntheticEvent<>) => void,
-  /**
-   * @ignore
-   */
-  selected?: boolean,
-  /**
-   * @ignore
-   */
-  style?: Object,
-  /**
-   * @ignore
-   */
-  textColor?: 'accent' | 'primary' | 'inherit' | string,
-  /**
-   * You can provide your own value. Otherwise, we fallback to the child position index.
-   */
-  value?: any,
-};
-
-type State = {
-  wrappedText: boolean,
-};
-
-class Tab extends React.Component<ProvidedProps & Props, State> {
-  static defaultProps = {
-    disabled: false,
-  };
-
+class Tab extends React.Component {
   state = {
     wrappedText: false,
   };
@@ -206,7 +135,7 @@ class Tab extends React.Component<ProvidedProps & Props, State> {
       className: classNameProp,
       disabled,
       fullWidth,
-      icon: iconProp,
+      icon,
       indicator,
       label: labelProp,
       onChange,
@@ -217,17 +146,11 @@ class Tab extends React.Component<ProvidedProps & Props, State> {
       ...other
     } = this.props;
 
-    let icon;
-
-    if (iconProp !== undefined) {
-      icon = React.isValidElement(iconProp) ? iconProp : <Icon>{iconProp}</Icon>;
-    }
-
     let label;
 
     if (labelProp !== undefined) {
       label = (
-        <div className={classes.labelContainer}>
+        <span className={classes.labelContainer}>
           <span
             className={classNames(classes.label, {
               [classes.labelWrapped]: this.state.wrappedText,
@@ -238,16 +161,16 @@ class Tab extends React.Component<ProvidedProps & Props, State> {
           >
             {labelProp}
           </span>
-        </div>
+        </span>
       );
     }
 
     const className = classNames(
       classes.root,
+      classes[`root${capitalize(textColor)}`],
       {
-        [classes[`root${capitalizeFirstLetter(textColor)}`]]: true,
-        [classes[`root${capitalizeFirstLetter(textColor)}Disabled`]]: disabled,
-        [classes[`root${capitalizeFirstLetter(textColor)}Selected`]]: selected,
+        [classes[`root${capitalize(textColor)}Disabled`]]: disabled,
+        [classes[`root${capitalize(textColor)}Selected`]]: selected,
         [classes.rootLabelIcon]: icon && label,
         [classes.fullWidth]: fullWidth,
       },
@@ -256,7 +179,7 @@ class Tab extends React.Component<ProvidedProps & Props, State> {
 
     let style = {};
 
-    if (textColor !== 'accent' && textColor !== 'inherit') {
+    if (textColor !== 'secondary' && textColor !== 'inherit') {
       style.color = textColor;
     }
 
@@ -289,4 +212,69 @@ class Tab extends React.Component<ProvidedProps & Props, State> {
   }
 }
 
+Tab.propTypes = {
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * If `true`, the tab will be disabled.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  fullWidth: PropTypes.bool,
+  /**
+   * The icon element.
+   */
+  icon: PropTypes.node,
+  /**
+   * @ignore
+   * For server side rendering consideration, we let the selected tab
+   * render the indicator.
+   */
+  indicator: PropTypes.node,
+  /**
+   * The label element.
+   */
+  label: PropTypes.node,
+  /**
+   * @ignore
+   */
+  onChange: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onClick: PropTypes.func,
+  /**
+   * @ignore
+   */
+  selected: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  style: PropTypes.object,
+  /**
+   * @ignore
+   */
+  textColor: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.oneOf(['secondary', 'primary', 'inherit']),
+  ]),
+  /**
+   * You can provide your own value. Otherwise, we fallback to the child position index.
+   */
+  value: PropTypes.any,
+};
+
+Tab.defaultProps = {
+  disabled: false,
+  textColor: 'inherit',
+};
+
 export default withStyles(styles, { name: 'MuiTab' })(Tab);