Completely updated React, fixed #11, (hopefully)

goTorrentWebUI/node_modules/material-ui/Progress/CircularProgress.d.ts

@@ -1,30 +1,26 @@
 import * as React from 'react';
 import { StandardProps } from '..';
 
-export interface CircularProgressProps extends StandardProps<
-  React.HTMLAttributes<HTMLDivElement>,
-  CircularProgressClassKey
-> {
-  color?: 'primary' | 'accent' | 'inherit';
+export interface CircularProgressProps
+  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, CircularProgressClassKey> {
+  color?: 'primary' | 'secondary' | 'inherit';
   max?: number;
   min?: number;
-  mode?: 'determinate' | 'indeterminate';
-  size?: number;
-  value?: number;
+  size?: number | string;
   thickness?: number;
+  value?: number;
+  variant?: 'determinate' | 'indeterminate' | 'static';
 }
 
 export type CircularProgressClassKey =
   | 'root'
-  | 'primaryColor'
-  | 'accentColor'
+  | 'colorPrimary'
+  | 'colorSecondary'
   | 'svg'
-  | 'indeterminateSvg'
+  | 'svgIndeterminate'
   | 'circle'
-  | 'indeterminateCircle'
-  | 'determinateCircle'
-  ;
+  | 'circleIndeterminate';
 
 declare const CircularProgress: React.ComponentType<CircularProgressProps>;
 
-export default CircularProgress
+export default CircularProgress;

goTorrentWebUI/node_modules/material-ui/Progress/CircularProgress.js

@@ -5,24 +5,26 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.styles = undefined;
 
-var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
-
-var _defineProperty3 = _interopRequireDefault(_defineProperty2);
-
 var _extends2 = require('babel-runtime/helpers/extends');
 
 var _extends3 = _interopRequireDefault(_extends2);
 
+var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
+
+var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+
 var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
 
 var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
 
-var _ref;
-
 var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _classnames = require('classnames');
 
 var _classnames2 = _interopRequireDefault(_classnames);
@@ -31,6 +33,8 @@ var _withStyles = require('../styles/withStyles');
 
 var _withStyles2 = _interopRequireDefault(_withStyles);
 
+var _helpers = require('../utils/helpers');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var SIZE = 50;
@@ -40,23 +44,32 @@ function getRelativeValue(value, min, max) {
   return (clampedValue - min) / (max - min);
 }
 
+function easeOut(t) {
+  t = getRelativeValue(t, 0, 1);
+  // https://gist.github.com/gre/1650294
+  t = (t -= 1) * t * t + 1;
+  return t;
+}
+
+function easeIn(t) {
+  return t * t;
+}
+
 var styles = exports.styles = function styles(theme) {
   return {
     root: {
       display: 'inline-block'
     },
-    primaryColor: {
-      color: theme.palette.primary[500]
+    colorPrimary: {
+      color: theme.palette.primary.main
     },
-    accentColor: {
-      color: theme.palette.secondary.A200
+    colorSecondary: {
+      color: theme.palette.secondary.main
     },
+    svg: {},
     svgIndeterminate: {
       animation: 'mui-progress-circular-rotate 1.4s linear infinite'
     },
-    svgDeterminate: {
-      transform: 'rotate(-90deg)'
-    },
     circle: {
       stroke: 'currentColor',
       strokeLinecap: 'round'
@@ -64,8 +77,8 @@ var styles = exports.styles = function styles(theme) {
     circleIndeterminate: {
       animation: 'mui-progress-circular-dash 1.4s ease-in-out infinite',
       // Some default value that looks fine waiting for the animation to kicks in.
-      strokeDasharray: '80,200',
-      strokeDashoffset: 0
+      strokeDasharray: '80px, 200px',
+      strokeDashoffset: '0px' // Add the unit to fix a Edge 16 and below bug.
     },
     '@keyframes mui-progress-circular-rotate': {
       '100%': {
@@ -74,126 +87,78 @@ var styles = exports.styles = function styles(theme) {
     },
     '@keyframes mui-progress-circular-dash': {
       '0%': {
-        strokeDasharray: '1,200',
-        strokeDashoffset: 0
+        strokeDasharray: '1px, 200px',
+        strokeDashoffset: '0px'
       },
       '50%': {
-        strokeDasharray: '100,200',
-        strokeDashoffset: -15
+        strokeDasharray: '100px, 200px',
+        strokeDashoffset: '-15px'
       },
       '100%': {
-        strokeDasharray: '100,200',
-        strokeDashoffset: -120
+        strokeDasharray: '100px, 200px',
+        strokeDashoffset: '-120px'
       }
     }
   };
 };
 
-var babelPluginFlowReactPropTypes_proptype_Color = require('prop-types').oneOf(['primary', 'accent', 'inherit']);
-
-var babelPluginFlowReactPropTypes_proptype_Mode = require('prop-types').oneOf(['determinate', 'indeterminate']);
-
-var babelPluginFlowReactPropTypes_proptype_Props = {
-  /**
-   * Useful to extend the style applied to components.
-   */
-  classes: require('prop-types').object,
-
-  /**
-   * @ignore
-   */
-  className: require('prop-types').string,
-
-  /**
-   * The color of the component. It's using the theme palette when that makes sense.
-   */
-  color: require('prop-types').oneOf(['primary', 'accent', 'inherit']),
-
-  /**
-   * The max value of progress in determinate mode.
-   */
-  max: require('prop-types').number,
-
-  /**
-   * The min value of progress in determinate mode.
-   */
-  min: require('prop-types').number,
-
-  /**
-   * The mode of show your progress. Indeterminate
-   * for when there is no value for progress.
-   * Determinate for controlled progress value.
-   */
-  mode: require('prop-types').oneOf(['determinate', 'indeterminate']),
-
-  /**
-   * The size of the circle.
-   */
-  size: require('prop-types').number,
-
-  /**
-   * @ignore
-   */
-  style: require('prop-types').object,
-
-  /**
-   * The thickness of the circle.
-   */
-  thickness: require('prop-types').number,
-
-  /**
-   * The value of progress in determinate mode.
-   */
-  value: require('prop-types').number
-};
-
-
+/**
+ * ## 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 CircularProgress(props) {
-  var _classNames;
+  var _classNames2;
 
   var classes = props.classes,
       className = props.className,
       color = props.color,
+      max = props.max,
+      min = props.min,
       size = props.size,
       style = props.style,
       thickness = props.thickness,
-      mode = props.mode,
       value = props.value,
-      min = props.min,
-      max = props.max,
-      other = (0, _objectWithoutProperties3.default)(props, ['classes', 'className', 'color', 'size', 'style', 'thickness', 'mode', 'value', 'min', 'max']);
+      variant = props.variant,
+      other = (0, _objectWithoutProperties3.default)(props, ['classes', 'className', 'color', 'max', 'min', 'size', 'style', 'thickness', 'value', 'variant']);
 
 
-  var rootProps = {};
-
   var circleStyle = {};
-  if (mode === 'determinate') {
+  var rootStyle = {};
+  var rootProps = {};
+
+  if (variant === 'determinate' || variant === 'static') {
     var relVal = getRelativeValue(value, min, max) * 100;
     var circumference = 2 * Math.PI * (SIZE / 2 - 5);
+    circleStyle.strokeDasharray = circumference.toFixed(3);
+    rootProps['aria-valuenow'] = Math.round(relVal);
 
-    circleStyle.strokeDashoffset = Math.round((100 - relVal) / 100 * circumference * 1000) / 1000 + 'px';
-    circleStyle.strokeDasharray = Math.round(circumference * 1000) / 1000;
-
-    rootProps['aria-valuenow'] = value;
-    rootProps['aria-valuemin'] = min;
-    rootProps['aria-valuemax'] = max;
+    if (variant === 'static') {
+      circleStyle.strokeDashoffset = ((100 - relVal) / 100 * circumference).toFixed(3) + 'px';
+      rootStyle.transform = 'rotate(-90deg)';
+    } else {
+      circleStyle.strokeDashoffset = (easeIn((100 - relVal) / 100) * circumference).toFixed(3) + 'px';
+      rootStyle.transform = 'rotate(' + (easeOut(relVal / 70) * 270).toFixed(3) + 'deg)';
+    }
   }
 
   return _react2.default.createElement(
     'div',
     (0, _extends3.default)({
-      className: (0, _classnames2.default)(classes.root, color !== 'inherit' && classes[color + 'Color'], className),
-      style: (0, _extends3.default)({ width: size, height: size }, style),
+      className: (0, _classnames2.default)(classes.root, (0, _defineProperty3.default)({}, classes['color' + (0, _helpers.capitalize)(color)], color !== 'inherit'), className),
+      style: (0, _extends3.default)({ width: size, height: size }, rootStyle, style),
       role: 'progressbar'
     }, rootProps, other),
     _react2.default.createElement(
       'svg',
       {
-        className: (0, _classnames2.default)((_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.svgIndeterminate, mode === 'indeterminate'), (0, _defineProperty3.default)(_classNames, classes.svgDeterminate, mode === 'determinate'), _classNames)),
+        className: (0, _classnames2.default)(classes.svg, (_classNames2 = {}, (0, _defineProperty3.default)(_classNames2, classes.svgIndeterminate, variant === 'indeterminate'), (0, _defineProperty3.default)(_classNames2, classes.svgStatic, variant === 'static'), _classNames2)),
         viewBox: '0 0 ' + SIZE + ' ' + SIZE
       },
       _react2.default.createElement('circle', {
-        className: (0, _classnames2.default)(classes.circle, (0, _defineProperty3.default)({}, classes.circleIndeterminate, mode === 'indeterminate')),
+        className: (0, _classnames2.default)(classes.circle, (0, _defineProperty3.default)({}, classes.circleIndeterminate, variant === 'indeterminate')),
         style: circleStyle,
         cx: SIZE / 2,
         cy: SIZE / 2,
@@ -205,23 +170,59 @@ function CircularProgress(props) {
   );
 }
 
-CircularProgress.propTypes = process.env.NODE_ENV !== "production" ? (_ref = {
-  classes: require('prop-types').object.isRequired,
-  color: require('prop-types').oneOf(['primary', 'accent', 'inherit']).isRequired,
-  size: require('prop-types').number.isRequired,
-  mode: require('prop-types').oneOf(['determinate', 'indeterminate']).isRequired,
-  value: require('prop-types').number.isRequired,
-  min: require('prop-types').number.isRequired,
-  max: require('prop-types').number.isRequired
-}, (0, _defineProperty3.default)(_ref, 'classes', require('prop-types').object), (0, _defineProperty3.default)(_ref, 'className', require('prop-types').string), (0, _defineProperty3.default)(_ref, 'color', require('prop-types').oneOf(['primary', 'accent', 'inherit'])), (0, _defineProperty3.default)(_ref, 'max', require('prop-types').number), (0, _defineProperty3.default)(_ref, 'min', require('prop-types').number), (0, _defineProperty3.default)(_ref, 'mode', require('prop-types').oneOf(['determinate', 'indeterminate'])), (0, _defineProperty3.default)(_ref, 'size', require('prop-types').number), (0, _defineProperty3.default)(_ref, 'style', require('prop-types').object), (0, _defineProperty3.default)(_ref, 'thickness', require('prop-types').number), (0, _defineProperty3.default)(_ref, 'value', require('prop-types').number), _ref) : {};
+CircularProgress.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: _propTypes2.default.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: _propTypes2.default.string,
+  /**
+   * The color of the component. It supports those theme colors that make sense for this component.
+   */
+  color: _propTypes2.default.oneOf(['primary', 'secondary', 'inherit']),
+  /**
+   * The max value of progress in determinate variant.
+   */
+  max: _propTypes2.default.number,
+  /**
+   * The min value of progress in determinate variant.
+   */
+  min: _propTypes2.default.number,
+  /**
+   * The size of the circle.
+   */
+  size: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
+  /**
+   * @ignore
+   */
+  style: _propTypes2.default.object,
+  /**
+   * The thickness of the circle.
+   */
+  thickness: _propTypes2.default.number,
+  /**
+   * The value of the progress indicator for the determinate and static variants.
+   * Value between 0 and 100.
+   */
+  value: _propTypes2.default.number,
+  /**
+   * The variant of progress indicator. Use indeterminate
+   * when there is no progress value.
+   */
+  variant: _propTypes2.default.oneOf(['determinate', 'indeterminate', 'static'])
+} : {};
+
 CircularProgress.defaultProps = {
   color: 'primary',
+  max: 100,
+  min: 0,
   size: 40,
   thickness: 3.6,
-  mode: 'indeterminate',
   value: 0,
-  min: 0,
-  max: 100
+  variant: 'indeterminate'
 };
 
-exports.default = (0, _withStyles2.default)(styles, { name: 'MuiCircularProgress' })(CircularProgress);
+exports.default = (0, _withStyles2.default)(styles, { name: 'MuiCircularProgress', flip: false })(CircularProgress);

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

@@ -1,8 +1,8 @@
-// @flow
-
 import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
+import { capitalize } from '../utils/helpers';
 
 const SIZE = 50;
 
@@ -11,22 +11,31 @@ function getRelativeValue(value, min, max) {
   return (clampedValue - min) / (max - min);
 }
 
-export const styles = (theme: Object) => ({
+function easeOut(t) {
+  t = getRelativeValue(t, 0, 1);
+  // https://gist.github.com/gre/1650294
+  t = (t -= 1) * t * t + 1;
+  return t;
+}
+
+function easeIn(t) {
+  return t * t;
+}
+
+export const styles = theme => ({
   root: {
     display: 'inline-block',
   },
-  primaryColor: {
-    color: theme.palette.primary[500],
+  colorPrimary: {
+    color: theme.palette.primary.main,
   },
-  accentColor: {
-    color: theme.palette.secondary.A200,
+  colorSecondary: {
+    color: theme.palette.secondary.main,
   },
+  svg: {},
   svgIndeterminate: {
     animation: 'mui-progress-circular-rotate 1.4s linear infinite',
   },
-  svgDeterminate: {
-    transform: 'rotate(-90deg)',
-  },
   circle: {
     stroke: 'currentColor',
     strokeLinecap: 'round',
@@ -34,8 +43,8 @@ export const styles = (theme: Object) => ({
   circleIndeterminate: {
     animation: 'mui-progress-circular-dash 1.4s ease-in-out infinite',
     // Some default value that looks fine waiting for the animation to kicks in.
-    strokeDasharray: '80,200',
-    strokeDashoffset: 0,
+    strokeDasharray: '80px, 200px',
+    strokeDashoffset: '0px', // Add the unit to fix a Edge 16 and below bug.
   },
   '@keyframes mui-progress-circular-rotate': {
     '100%': {
@@ -44,131 +53,87 @@ export const styles = (theme: Object) => ({
   },
   '@keyframes mui-progress-circular-dash': {
     '0%': {
-      strokeDasharray: '1,200',
-      strokeDashoffset: 0,
+      strokeDasharray: '1px, 200px',
+      strokeDashoffset: '0px',
     },
     '50%': {
-      strokeDasharray: '100,200',
-      strokeDashoffset: -15,
+      strokeDasharray: '100px, 200px',
+      strokeDashoffset: '-15px',
     },
     '100%': {
-      strokeDasharray: '100,200',
-      strokeDashoffset: -120,
+      strokeDasharray: '100px, 200px',
+      strokeDashoffset: '-120px',
     },
   },
 });
 
-export type Color = 'primary' | 'accent' | 'inherit';
-export type Mode = 'determinate' | 'indeterminate';
-
-type ProvidedProps = {
-  classes: Object,
-  color: Color,
-  size: number,
-  mode: Mode,
-  value: number,
-  min: number,
-  max: number,
-};
-
-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?: Color,
-  /**
-   * The max value of progress in determinate mode.
-   */
-  max?: number,
-  /**
-   * The min value of progress in determinate mode.
-   */
-  min?: number,
-  /**
-   * The mode of show your progress. Indeterminate
-   * for when there is no value for progress.
-   * Determinate for controlled progress value.
-   */
-  mode?: Mode,
-  /**
-   * The size of the circle.
-   */
-  size?: number,
-  /**
-   * @ignore
-   */
-  style?: Object,
-  /**
-   * The thickness of the circle.
-   */
-  thickness?: number,
-  /**
-   * The value of progress in determinate mode.
-   */
-  value?: number,
-};
-
-function CircularProgress(props: ProvidedProps & 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 CircularProgress(props) {
   const {
     classes,
     className,
     color,
+    max,
+    min,
     size,
     style,
     thickness,
-    mode,
     value,
-    min,
-    max,
+    variant,
     ...other
   } = props;
 
+  const circleStyle = {};
+  const rootStyle = {};
   const rootProps = {};
 
-  const circleStyle = {};
-  if (mode === 'determinate') {
+  if (variant === 'determinate' || variant === 'static') {
     const relVal = getRelativeValue(value, min, max) * 100;
     const circumference = 2 * Math.PI * (SIZE / 2 - 5);
+    circleStyle.strokeDasharray = circumference.toFixed(3);
+    rootProps['aria-valuenow'] = Math.round(relVal);
 
-    circleStyle.strokeDashoffset = `${Math.round((100 - relVal) / 100 * circumference * 1000) /
-      1000}px`;
-    circleStyle.strokeDasharray = Math.round(circumference * 1000) / 1000;
-
-    rootProps['aria-valuenow'] = value;
-    rootProps['aria-valuemin'] = min;
-    rootProps['aria-valuemax'] = max;
+    if (variant === 'static') {
+      circleStyle.strokeDashoffset = `${((100 - relVal) / 100 * circumference).toFixed(3)}px`;
+      rootStyle.transform = 'rotate(-90deg)';
+    } else {
+      circleStyle.strokeDashoffset = `${(easeIn((100 - relVal) / 100) * circumference).toFixed(
+        3,
+      )}px`;
+      rootStyle.transform = `rotate(${(easeOut(relVal / 70) * 270).toFixed(3)}deg)`;
+    }
   }
 
   return (
     <div
       className={classNames(
         classes.root,
-        color !== 'inherit' && classes[`${color}Color`],
+        {
+          [classes[`color${capitalize(color)}`]]: color !== 'inherit',
+        },
         className,
       )}
-      style={{ width: size, height: size, ...style }}
+      style={{ width: size, height: size, ...rootStyle, ...style }}
       role="progressbar"
       {...rootProps}
       {...other}
     >
       <svg
-        className={classNames({
-          [classes.svgIndeterminate]: mode === 'indeterminate',
-          [classes.svgDeterminate]: mode === 'determinate',
+        className={classNames(classes.svg, {
+          [classes.svgIndeterminate]: variant === 'indeterminate',
+          [classes.svgStatic]: variant === 'static',
         })}
         viewBox={`0 0 ${SIZE} ${SIZE}`}
       >
         <circle
           className={classNames(classes.circle, {
-            [classes.circleIndeterminate]: mode === 'indeterminate',
+            [classes.circleIndeterminate]: variant === 'indeterminate',
           })}
           style={circleStyle}
           cx={SIZE / 2}
@@ -182,14 +147,59 @@ function CircularProgress(props: ProvidedProps & Props) {
   );
 }
 
-CircularProgress.defaultProps = {
-  color: 'primary',
-  size: 40,
-  thickness: 3.6,
-  mode: 'indeterminate',
-  value: 0,
-  min: 0,
-  max: 100,
+CircularProgress.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', 'inherit']),
+  /**
+   * The max value of progress in determinate variant.
+   */
+  max: PropTypes.number,
+  /**
+   * The min value of progress in determinate variant.
+   */
+  min: PropTypes.number,
+  /**
+   * The size of the circle.
+   */
+  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * @ignore
+   */
+  style: PropTypes.object,
+  /**
+   * The thickness of the circle.
+   */
+  thickness: PropTypes.number,
+  /**
+   * The value of the progress indicator for the determinate and static variants.
+   * Value between 0 and 100.
+   */
+  value: PropTypes.number,
+  /**
+   * The variant of progress indicator. Use indeterminate
+   * when there is no progress value.
+   */
+  variant: PropTypes.oneOf(['determinate', 'indeterminate', 'static']),
 };
 
-export default withStyles(styles, { name: 'MuiCircularProgress' })(CircularProgress);
+CircularProgress.defaultProps = {
+  color: 'primary',
+  max: 100,
+  min: 0,
+  size: 40,
+  thickness: 3.6,
+  value: 0,
+  variant: 'indeterminate',
+};
+
+export default withStyles(styles, { name: 'MuiCircularProgress', flip: false })(CircularProgress);

goTorrentWebUI/node_modules/material-ui/Progress/LinearProgress.d.ts

@@ -1,14 +1,12 @@
 import * as React from 'react';
 import { StandardProps } from '..';
 
-export interface LinearProgressProps extends StandardProps<
-  React.HTMLAttributes<HTMLDivElement>,
-  LinearProgressClassKey
-> {
-  color?: 'primary' | 'accent';
-  mode?: 'determinate' | 'indeterminate' | 'buffer' | 'query';
+export interface LinearProgressProps
+  extends StandardProps<React.HTMLAttributes<HTMLDivElement>, LinearProgressClassKey> {
+  color?: 'primary' | 'secondary';
   value?: number;
   valueBuffer?: number;
+  variant?: 'determinate' | 'indeterminate' | 'buffer' | 'query';
 }
 
 export type LinearProgressClassKey =
@@ -16,9 +14,9 @@ export type LinearProgressClassKey =
   | 'primaryColor'
   | 'primaryColorBar'
   | 'primaryDashed'
-  | 'accentColor'
-  | 'accentColorBar'
-  | 'accentDashed'
+  | 'secondaryColor'
+  | 'secondaryColorBar'
+  | 'secondaryDashed'
   | 'bar'
   | 'dashed'
   | 'bufferBar2'
@@ -27,10 +25,7 @@ export type LinearProgressClassKey =
   | 'indeterminateBar1'
   | 'indeterminateBar2'
   | 'determinateBar1'
-  | 'bufferBar1'
-  | 'bufferBar2Primary'
-  | 'bufferBar2Accent'
-  ;
+  | 'bufferBar1';
 
 declare const LinearProgress: React.ComponentType<LinearProgressProps>;
 

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

@@ -17,12 +17,14 @@ var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProp
 
 var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
 
-var _ref;
-
 var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _classnames = require('classnames');
 
 var _classnames2 = _interopRequireDefault(_classnames);
@@ -35,6 +37,8 @@ var _withStyles = require('../styles/withStyles');
 
 var _withStyles2 = _interopRequireDefault(_withStyles);
 
+var _colorManipulator = require('../styles/colorManipulator');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var TRANSITION_DURATION = 4; // 400ms
@@ -47,24 +51,24 @@ var styles = exports.styles = function styles(theme) {
       height: 5
     },
     primaryColor: {
-      backgroundColor: theme.palette.primary[100]
+      backgroundColor: (0, _colorManipulator.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(' + (0, _colorManipulator.lighten)(theme.palette.primary.light, 0.6) + ' 0%, ' + (0, _colorManipulator.lighten)(theme.palette.primary.light, 0.6) + ' 16%, transparent 42%)',
       backgroundSize: '10px 10px',
       backgroundPosition: '0px -23px'
     },
-    accentColor: {
-      backgroundColor: theme.palette.secondary.A100
+    secondaryColor: {
+      backgroundColor: (0, _colorManipulator.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(' + (0, _colorManipulator.lighten)(theme.palette.secondary.light, 0.4) + ' 0%, ' + (0, _colorManipulator.lighten)(theme.palette.secondary.light, 0.6) + ' 16%, transparent 42%)',
       backgroundSize: '10px 10px',
       backgroundPosition: '0px -23px'
     },
@@ -112,14 +116,6 @@ var styles = exports.styles = function styles(theme) {
       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
@@ -173,93 +169,91 @@ var styles = exports.styles = function styles(theme) {
   };
 };
 
-var babelPluginFlowReactPropTypes_proptype_Props = {
-  /**
-   * Useful to extend the style applied to components.
-   */
-  classes: require('prop-types').object,
-
-  /**
-   * @ignore
-   */
-  className: require('prop-types').string,
-
-  /**
-   * The color of the component. It's using the theme palette when that makes sense.
-   */
-  color: require('prop-types').oneOf(['primary', 'accent']),
-
-  /**
-   * The mode of show your progress, indeterminate
-   * for when there is no value for progress.
-   */
-  mode: require('prop-types').oneOf(['determinate', 'indeterminate', 'buffer', 'query']),
-
-  /**
-   * The value of progress, only works in determinate and buffer mode.
-   * Value between 0 and 100.
-   */
-  value: require('prop-types').number,
-
-  /**
-   * The value of buffer, only works in buffer mode.
-   * Value between 0 and 100.
-   */
-  valueBuffer: require('prop-types').number
-};
-
-
+/**
+ * ## 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) {
   var _classNames, _classNames2, _classNames3, _classNames4;
 
   var classes = props.classes,
       className = props.className,
       color = props.color,
-      mode = props.mode,
       value = props.value,
       valueBuffer = props.valueBuffer,
-      other = (0, _objectWithoutProperties3.default)(props, ['classes', 'className', 'color', 'mode', 'value', 'valueBuffer']);
+      variant = props.variant,
+      other = (0, _objectWithoutProperties3.default)(props, ['classes', 'className', 'color', 'value', 'valueBuffer', 'variant']);
 
 
-  var dashedClass = (0, _classnames2.default)(classes.dashed, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.primaryDashed, color === 'primary'), (0, _defineProperty3.default)(_classNames, classes.accentDashed, color === 'accent'), _classNames));
+  var dashedClass = (0, _classnames2.default)(classes.dashed, (_classNames = {}, (0, _defineProperty3.default)(_classNames, classes.primaryDashed, color === 'primary'), (0, _defineProperty3.default)(_classNames, classes.secondaryDashed, color === 'secondary'), _classNames));
 
-  var rootClassName = (0, _classnames2.default)(classes.root, (_classNames2 = {}, (0, _defineProperty3.default)(_classNames2, classes.primaryColor, color === 'primary'), (0, _defineProperty3.default)(_classNames2, classes.accentColor, color === 'accent'), (0, _defineProperty3.default)(_classNames2, classes.rootBuffer, mode === 'buffer'), (0, _defineProperty3.default)(_classNames2, classes.rootQuery, mode === 'query'), _classNames2), className);
-  var primaryClassName = (0, _classnames2.default)(classes.bar, (_classNames3 = {}, (0, _defineProperty3.default)(_classNames3, classes.primaryColorBar, color === 'primary'), (0, _defineProperty3.default)(_classNames3, classes.accentColorBar, color === 'accent'), (0, _defineProperty3.default)(_classNames3, classes.indeterminateBar1, mode === 'indeterminate' || mode === 'query'), (0, _defineProperty3.default)(_classNames3, classes.determinateBar1, mode === 'determinate'), (0, _defineProperty3.default)(_classNames3, classes.bufferBar1, mode === 'buffer'), _classNames3));
-  var secondaryClassName = (0, _classnames2.default)(classes.bar, (_classNames4 = {}, (0, _defineProperty3.default)(_classNames4, classes.bufferBar2, mode === 'buffer'), (0, _defineProperty3.default)(_classNames4, classes.primaryColorBar, color === 'primary' && mode !== 'buffer'), (0, _defineProperty3.default)(_classNames4, classes.primaryColor, color === 'primary' && mode === 'buffer'), (0, _defineProperty3.default)(_classNames4, classes.accentColorBar, color === 'accent' && mode !== 'buffer'), (0, _defineProperty3.default)(_classNames4, classes.accentColor, color === 'accent' && mode === 'buffer'), (0, _defineProperty3.default)(_classNames4, classes.indeterminateBar2, mode === 'indeterminate' || mode === 'query'), _classNames4));
+  var rootClassName = (0, _classnames2.default)(classes.root, (_classNames2 = {}, (0, _defineProperty3.default)(_classNames2, classes.primaryColor, color === 'primary'), (0, _defineProperty3.default)(_classNames2, classes.secondaryColor, color === 'secondary'), (0, _defineProperty3.default)(_classNames2, classes.rootBuffer, variant === 'buffer'), (0, _defineProperty3.default)(_classNames2, classes.rootQuery, variant === 'query'), _classNames2), className);
+  var primaryClassName = (0, _classnames2.default)(classes.bar, (_classNames3 = {}, (0, _defineProperty3.default)(_classNames3, classes.primaryColorBar, color === 'primary'), (0, _defineProperty3.default)(_classNames3, classes.secondaryColorBar, color === 'secondary'), (0, _defineProperty3.default)(_classNames3, classes.indeterminateBar1, variant === 'indeterminate' || variant === 'query'), (0, _defineProperty3.default)(_classNames3, classes.determinateBar1, variant === 'determinate'), (0, _defineProperty3.default)(_classNames3, classes.bufferBar1, variant === 'buffer'), _classNames3));
+  var secondaryClassName = (0, _classnames2.default)(classes.bar, (_classNames4 = {}, (0, _defineProperty3.default)(_classNames4, classes.bufferBar2, variant === 'buffer'), (0, _defineProperty3.default)(_classNames4, classes.primaryColorBar, color === 'primary' && variant !== 'buffer'), (0, _defineProperty3.default)(_classNames4, classes.primaryColor, color === 'primary' && variant === 'buffer'), (0, _defineProperty3.default)(_classNames4, classes.secondaryColorBar, color === 'secondary' && variant !== 'buffer'), (0, _defineProperty3.default)(_classNames4, classes.secondaryColor, color === 'secondary' && variant === 'buffer'), (0, _defineProperty3.default)(_classNames4, classes.indeterminateBar2, variant === 'indeterminate' || variant === 'query'), _classNames4));
   var inlineStyles = { primary: {}, secondary: {} };
   var rootProps = {};
 
-  if (mode === 'determinate') {
+  if (variant === 'determinate' || variant === 'buffer') {
     if (value !== undefined) {
       inlineStyles.primary.transform = 'scaleX(' + value / 100 + ')';
       rootProps['aria-valuenow'] = Math.round(value);
     } else {
-      process.env.NODE_ENV !== "production" ? (0, _warning2.default)(false, 'Material-UI: you need to provide a value property ' + 'when LinearProgress is in determinate mode.') : void 0;
+      process.env.NODE_ENV !== "production" ? (0, _warning2.default)(false, 'Material-UI: you need to provide a value property ' + 'when using the determinate or buffer variant of LinearProgress .') : void 0;
     }
-  } 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 {
-      process.env.NODE_ENV !== "production" ? (0, _warning2.default)(false, 'Material-UI: you need to provide a value property when LinearProgress is in buffer mode.') : void 0;
+      process.env.NODE_ENV !== "production" ? (0, _warning2.default)(false, 'Material-UI: you need to provide a valueBuffer property ' + 'when using the buffer variant of LinearProgress.') : void 0;
     }
   }
 
   return _react2.default.createElement(
     'div',
-    (0, _extends3.default)({ className: rootClassName }, rootProps, other),
-    mode === 'buffer' ? _react2.default.createElement('div', { className: dashedClass }) : null,
+    (0, _extends3.default)({ className: rootClassName, role: 'progressbar' }, rootProps, other),
+    variant === 'buffer' ? _react2.default.createElement('div', { className: dashedClass }) : null,
     _react2.default.createElement('div', { className: primaryClassName, style: inlineStyles.primary }),
-    mode === 'determinate' ? null : _react2.default.createElement('div', { className: secondaryClassName, style: inlineStyles.secondary })
+    variant === 'determinate' ? null : _react2.default.createElement('div', { className: secondaryClassName, style: inlineStyles.secondary })
   );
 }
 
-LinearProgress.propTypes = process.env.NODE_ENV !== "production" ? (_ref = {
-  classes: require('prop-types').object.isRequired
-}, (0, _defineProperty3.default)(_ref, 'classes', require('prop-types').object), (0, _defineProperty3.default)(_ref, 'className', require('prop-types').string), (0, _defineProperty3.default)(_ref, 'color', require('prop-types').oneOf(['primary', 'accent'])), (0, _defineProperty3.default)(_ref, 'mode', require('prop-types').oneOf(['determinate', 'indeterminate', 'buffer', 'query'])), (0, _defineProperty3.default)(_ref, 'value', require('prop-types').number), (0, _defineProperty3.default)(_ref, 'valueBuffer', require('prop-types').number), _ref) : {};
+LinearProgress.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * Useful to extend the style applied to components.
+   */
+  classes: _propTypes2.default.object.isRequired,
+  /**
+   * @ignore
+   */
+  className: _propTypes2.default.string,
+  /**
+   * The color of the component. It supports those theme colors that make sense for this component.
+   */
+  color: _propTypes2.default.oneOf(['primary', 'secondary']),
+  /**
+   * The value of the progress indicator for the determinate and buffer variants.
+   * Value between 0 and 100.
+   */
+  value: _propTypes2.default.number,
+  /**
+   * The value for the buffer variant.
+   * Value between 0 and 100.
+   */
+  valueBuffer: _propTypes2.default.number,
+  /**
+   * The variant of progress indicator. Use indeterminate or query
+   * when there is no progress value.
+   */
+  variant: _propTypes2.default.oneOf(['determinate', 'indeterminate', 'buffer', 'query'])
+} : {};
+
 LinearProgress.defaultProps = {
   color: 'primary',
-  mode: 'indeterminate'
+  variant: 'indeterminate'
 };
 
 exports.default = (0, _withStyles2.default)(styles, { name: 'MuiLinearProgress' })(LinearProgress);

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);

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

@@ -1,3 +1,2 @@
-// @flow
 export { default as CircularProgress } from './CircularProgress';
 export { default as LinearProgress } from './LinearProgress';