Completely updated React, fixed #11, (hopefully)

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

@@ -1,15 +1,14 @@
-// @flow weak
 // @inheritedComponent Paper
 
 import React from 'react';
-import type { Element } from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
 import Paper from '../Paper';
-import { capitalizeFirstLetter } from '../utils/helpers';
+import { capitalize } from '../utils/helpers';
 import { LinearProgress } from '../Progress';
 
-export const styles = (theme: Object) => ({
+export const styles = theme => ({
   root: {
     display: 'flex',
     flexDirection: 'row',
@@ -45,82 +44,36 @@ export const styles = (theme: Object) => ({
     margin: '0 2px',
   },
   dotActive: {
-    backgroundColor: theme.palette.primary[500],
+    backgroundColor: theme.palette.primary.main,
   },
   progress: {
     width: '50%',
   },
 });
 
-export type Position = 'bottom' | 'top' | 'static';
-export type Type = 'text' | 'dots' | 'progress';
-
-type ProvidedProps = {
-  activeStep: number,
-  classes: Object,
-  position: Position,
-  type: Type,
-};
-
-export type Props = {
-  /**
-   * Set the active step (zero based index).
-   * Defines which dot is highlighted when the type is 'dots'.
-   */
-  activeStep?: number,
-  /**
-   * A back button element. For instance, it can be be a `Button` or a `IconButton`.
-   */
-  backButton: Element<any>,
-  /**
-   * Useful to extend the style applied to components.
-   */
-  classes?: Object,
-  /**
-   * @ignore
-   */
-  className?: string,
-  /**
-   * A next button element. For instance, it can be be a `Button` or a `IconButton`.
-   */
-  nextButton: Element<any>,
-  /**
-   * Set the positioning type.
-   */
-  position?: Position,
-  /**
-   * The total steps.
-   */
-  steps: number,
-  /**
-   * The type of mobile stepper to use.
-   */
-  type?: Type,
-};
-
-function MobileStepper(props: ProvidedProps & Props) {
+function MobileStepper(props) {
   const {
     activeStep,
     backButton,
     classes,
     className: classNameProp,
-    position,
-    type,
     nextButton,
+    position,
     steps,
+    variant,
     ...other
   } = props;
 
   const className = classNames(
     classes.root,
-    classes[`position${capitalizeFirstLetter(position)}`],
+    classes[`position${capitalize(position)}`],
     classNameProp,
   );
 
   return (
     <Paper square elevation={0} className={className} {...other}>
       {backButton}
-      {type === 'dots' && (
+      {variant === 'dots' && (
         <div className={classes.dots}>
           {[...new Array(steps)].map((_, step) => {
             const dotClassName = classNames(
@@ -134,9 +87,9 @@ function MobileStepper(props: ProvidedProps & Props) {
           })}
         </div>
       )}
-      {type === 'progress' && (
+      {variant === 'progress' && (
         <div className={classes.progress}>
-          <LinearProgress mode="determinate" value={Math.ceil(activeStep / (steps - 1) * 100)} />
+          <LinearProgress variant="determinate" value={Math.ceil(activeStep / (steps - 1) * 100)} />
         </div>
       )}
       {nextButton}
@@ -144,10 +97,46 @@ function MobileStepper(props: ProvidedProps & Props) {
   );
 }
 
+MobileStepper.propTypes = {
+  /**
+   * Set the active step (zero based index).
+   * Defines which dot is highlighted when the variant is 'dots'.
+   */
+  activeStep: PropTypes.number,
+  /**
+   * A back button element. For instance, it can be be a `Button` or a `IconButton`.
+   */
+  backButton: PropTypes.node,
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: PropTypes.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * A next button element. For instance, it can be be a `Button` or a `IconButton`.
+   */
+  nextButton: PropTypes.node,
+  /**
+   * Set the positioning type.
+   */
+  position: PropTypes.oneOf(['bottom', 'top', 'static']),
+  /**
+   * The total steps.
+   */
+  steps: PropTypes.number.isRequired,
+  /**
+   * The type of mobile stepper to use.
+   */
+  variant: PropTypes.oneOf(['text', 'dots', 'progress']),
+};
+
 MobileStepper.defaultProps = {
   activeStep: 0,
   position: 'bottom',
-  type: 'dots',
+  variant: 'dots',
 };
 
 export default withStyles(styles, { name: 'MuiMobileStepper' })(MobileStepper);