Completely updated React, fixed #11, (hopefully)

goTorrentWebUI/node_modules/material-ui/Progress/LinearProgress.js.flow

@@ -1,39 +1,43 @@
-// @flow
-
 import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import warning from 'warning';
 import withStyles from '../styles/withStyles';
+import { lighten } from '../styles/colorManipulator';
 
 const TRANSITION_DURATION = 4; // 400ms
 
-export const styles = (theme: Object) => ({
+export const styles = theme => ({
   root: {
     position: 'relative',
     overflow: 'hidden',
     height: 5,
   },
   primaryColor: {
-    backgroundColor: theme.palette.primary[100],
+    backgroundColor: lighten(theme.palette.primary.light, 0.6),
   },
   primaryColorBar: {
-    backgroundColor: theme.palette.primary[500],
+    backgroundColor: theme.palette.primary.main,
   },
   primaryDashed: {
-    background: `radial-gradient(${theme.palette.primary[100]} 0%, ${theme.palette
-      .primary[100]} 16%, transparent 42%)`,
+    background: `radial-gradient(${lighten(theme.palette.primary.light, 0.6)} 0%, ${lighten(
+      theme.palette.primary.light,
+      0.6,
+    )} 16%, transparent 42%)`,
     backgroundSize: '10px 10px',
     backgroundPosition: '0px -23px',
   },
-  accentColor: {
-    backgroundColor: theme.palette.secondary.A100,
+  secondaryColor: {
+    backgroundColor: lighten(theme.palette.secondary.light, 0.4),
   },
-  accentColorBar: {
-    backgroundColor: theme.palette.secondary.A400,
+  secondaryColorBar: {
+    backgroundColor: theme.palette.secondary.main,
   },
-  accentDashed: {
-    background: `radial-gradient(${theme.palette.secondary.A100} 0%, ${theme.palette.secondary
-      .A100} 16%, transparent 42%)`,
+  secondaryDashed: {
+    background: `radial-gradient(${lighten(theme.palette.secondary.light, 0.4)} 0%, ${lighten(
+      theme.palette.secondary.light,
+      0.6,
+    )} 16%, transparent 42%)`,
     backgroundSize: '10px 10px',
     backgroundPosition: '0px -23px',
   },
@@ -81,14 +85,6 @@ export const styles = (theme: Object) => ({
     zIndex: 1,
     transition: `transform .${TRANSITION_DURATION}s linear`,
   },
-  bufferBar2Primary: {
-    transition: `transform .${TRANSITION_DURATION}s linear`,
-    backgroundColor: theme.palette.primary[100],
-  },
-  bufferBar2Accent: {
-    transition: `transform .${TRANSITION_DURATION}s linear`,
-    backgroundColor: theme.palette.secondary.A100,
-  },
   // Legends:
   // || represents the viewport
   // -  represents a light background
@@ -141,77 +137,50 @@ export const styles = (theme: Object) => ({
   },
 });
 
-type ProvidedProps = {
-  classes: Object,
-};
-
-export type Props = {
-  /**
-   * 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?: 'primary' | 'accent',
-  /**
-   * The mode of show your progress, indeterminate
-   * for when there is no value for progress.
-   */
-  mode?: 'determinate' | 'indeterminate' | 'buffer' | 'query',
-  /**
-   * The value of progress, only works in determinate and buffer mode.
-   * Value between 0 and 100.
-   */
-  value?: number,
-  /**
-   * The value of buffer, only works in buffer mode.
-   * Value between 0 and 100.
-   */
-  valueBuffer?: number,
-};
-
-function LinearProgress(props: ProvidedProps & Props) {
-  const { classes, className, color, mode, value, valueBuffer, ...other } = props;
+/**
+ * ## ARIA
+ *
+ * If the progress bar is describing the loading progress of a particular region of a page,
+ * you should use `aria-describedby` to point to the progress bar, and set the `aria-busy`
+ * attribute to `true` on that region until it has finished loading.
+ */
+function LinearProgress(props) {
+  const { classes, className, color, value, valueBuffer, variant, ...other } = props;
 
   const dashedClass = classNames(classes.dashed, {
     [classes.primaryDashed]: color === 'primary',
-    [classes.accentDashed]: color === 'accent',
+    [classes.secondaryDashed]: color === 'secondary',
   });
 
   const rootClassName = classNames(
     classes.root,
     {
       [classes.primaryColor]: color === 'primary',
-      [classes.accentColor]: color === 'accent',
-      [classes.rootBuffer]: mode === 'buffer',
-      [classes.rootQuery]: mode === 'query',
+      [classes.secondaryColor]: color === 'secondary',
+      [classes.rootBuffer]: variant === 'buffer',
+      [classes.rootQuery]: variant === 'query',
     },
     className,
   );
   const primaryClassName = classNames(classes.bar, {
     [classes.primaryColorBar]: color === 'primary',
-    [classes.accentColorBar]: color === 'accent',
-    [classes.indeterminateBar1]: mode === 'indeterminate' || mode === 'query',
-    [classes.determinateBar1]: mode === 'determinate',
-    [classes.bufferBar1]: mode === 'buffer',
+    [classes.secondaryColorBar]: color === 'secondary',
+    [classes.indeterminateBar1]: variant === 'indeterminate' || variant === 'query',
+    [classes.determinateBar1]: variant === 'determinate',
+    [classes.bufferBar1]: variant === 'buffer',
   });
   const secondaryClassName = classNames(classes.bar, {
-    [classes.bufferBar2]: mode === 'buffer',
-    [classes.primaryColorBar]: color === 'primary' && mode !== 'buffer',
-    [classes.primaryColor]: color === 'primary' && mode === 'buffer',
-    [classes.accentColorBar]: color === 'accent' && mode !== 'buffer',
-    [classes.accentColor]: color === 'accent' && mode === 'buffer',
-    [classes.indeterminateBar2]: mode === 'indeterminate' || mode === 'query',
+    [classes.bufferBar2]: variant === 'buffer',
+    [classes.primaryColorBar]: color === 'primary' && variant !== 'buffer',
+    [classes.primaryColor]: color === 'primary' && variant === 'buffer',
+    [classes.secondaryColorBar]: color === 'secondary' && variant !== 'buffer',
+    [classes.secondaryColor]: color === 'secondary' && variant === 'buffer',
+    [classes.indeterminateBar2]: variant === 'indeterminate' || variant === 'query',
   });
   const inlineStyles = { primary: {}, secondary: {} };
   const rootProps = {};
 
-  if (mode === 'determinate') {
+  if (variant === 'determinate' || variant === 'buffer') {
     if (value !== undefined) {
       inlineStyles.primary.transform = `scaleX(${value / 100})`;
       rootProps['aria-valuenow'] = Math.round(value);
@@ -219,35 +188,66 @@ function LinearProgress(props: ProvidedProps & Props) {
       warning(
         false,
         'Material-UI: you need to provide a value property ' +
-          'when LinearProgress is in determinate mode.',
+          'when using the determinate or buffer variant of LinearProgress .',
       );
     }
-  } else if (mode === 'buffer') {
-    if (value !== undefined) {
-      inlineStyles.primary.transform = `scaleX(${value / 100})`;
+  }
+  if (variant === 'buffer') {
+    if (valueBuffer !== undefined) {
       inlineStyles.secondary.transform = `scaleX(${(valueBuffer || 0) / 100})`;
     } else {
       warning(
         false,
-        'Material-UI: you need to provide a value property when LinearProgress is in buffer mode.',
+        'Material-UI: you need to provide a valueBuffer property ' +
+          'when using the buffer variant of LinearProgress.',
       );
     }
   }
 
   return (
-    <div className={rootClassName} {...rootProps} {...other}>
-      {mode === 'buffer' ? <div className={dashedClass} /> : null}
+    <div className={rootClassName} role="progressbar" {...rootProps} {...other}>
+      {variant === 'buffer' ? <div className={dashedClass} /> : null}
       <div className={primaryClassName} style={inlineStyles.primary} />
-      {mode === 'determinate' ? null : (
+      {variant === 'determinate' ? null : (
         <div className={secondaryClassName} style={inlineStyles.secondary} />
       )}
     </div>
   );
 }
 
+LinearProgress.propTypes = {
+  /**
+   * 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(['primary', 'secondary']),
+  /**
+   * The value of the progress indicator for the determinate and buffer variants.
+   * Value between 0 and 100.
+   */
+  value: PropTypes.number,
+  /**
+   * The value for the buffer variant.
+   * Value between 0 and 100.
+   */
+  valueBuffer: PropTypes.number,
+  /**
+   * The variant of progress indicator. Use indeterminate or query
+   * when there is no progress value.
+   */
+  variant: PropTypes.oneOf(['determinate', 'indeterminate', 'buffer', 'query']),
+};
+
 LinearProgress.defaultProps = {
   color: 'primary',
-  mode: 'indeterminate',
+  variant: 'indeterminate',
 };
 
 export default withStyles(styles, { name: 'MuiLinearProgress' })(LinearProgress);