Completely updated React, fixed #11, (hopefully)

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