[docs] Add most Progress TypeScript demos

docs/src/pages/demos/progress/CircularDeterminate.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import CircularProgress from '@material-ui/core/CircularProgress';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  progress: {
+    margin: theme.spacing(2),
+  },
+}));
+
+function CircularDeterminate() {
+  const classes = useStyles();
+  const [progress, setProgress] = React.useState(0);
+
+  React.useEffect(() => {
+    function tick() {
+      // reset when reaching 100%
+      setProgress(oldProgress => (oldProgress >= 100 ? 0 : oldProgress + 1));
+    }
+
+    const timer = setInterval(tick, 20);
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
+
+  return (
+    <div>
+      <CircularProgress className={classes.progress} variant="determinate" value={progress} />
+      <CircularProgress
+        className={classes.progress}
+        variant="determinate"
+        value={progress}
+        color="secondary"
+      />
+    </div>
+  );
+}
+
+export default CircularDeterminate;

docs/src/pages/demos/progress/CircularIndeterminate.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles';
+import CircularProgress from '@material-ui/core/CircularProgress';
+
+const styles = (theme: Theme) =>
+  createStyles({
+    progress: {
+      margin: theme.spacing(2),
+    },
+  });
+
+export type Props = WithStyles<typeof styles>;
+
+function CircularIndeterminate(props: Props) {
+  const { classes } = props;
+  return (
+    <div>
+      <CircularProgress className={classes.progress} />
+      <CircularProgress className={classes.progress} color="secondary" />
+    </div>
+  );
+}
+
+CircularIndeterminate.propTypes = {
+  classes: PropTypes.object.isRequired,
+} as any;
+
+export default withStyles(styles)(CircularIndeterminate);

docs/src/pages/demos/progress/CircularIntegration.js

@@ -44,7 +44,7 @@ function CircularIntegration() {
   const classes = useStyles();
   const [loading, setLoading] = React.useState(false);
   const [success, setSuccess] = React.useState(false);
-  const timer = React.useRef(null);
+  const timer = React.useRef(undefined);
 
   const buttonClassname = clsx({
     [classes.buttonSuccess]: success,

docs/src/pages/demos/progress/CircularIntegration.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import clsx from 'clsx';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import green from '@material-ui/core/colors/green';
+import Button from '@material-ui/core/Button';
+import Fab from '@material-ui/core/Fab';
+import CheckIcon from '@material-ui/icons/Check';
+import SaveIcon from '@material-ui/icons/Save';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  wrapper: {
+    margin: theme.spacing(1),
+    position: 'relative',
+  },
+  buttonSuccess: {
+    backgroundColor: green[500],
+    '&:hover': {
+      backgroundColor: green[700],
+    },
+  },
+  fabProgress: {
+    color: green[500],
+    position: 'absolute',
+    top: -6,
+    left: -6,
+    zIndex: 1,
+  },
+  buttonProgress: {
+    color: green[500],
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    marginTop: -12,
+    marginLeft: -12,
+  },
+}));
+
+function CircularIntegration() {
+  const classes = useStyles();
+  const [loading, setLoading] = React.useState(false);
+  const [success, setSuccess] = React.useState(false);
+  const timer = React.useRef<number | undefined>(undefined);
+
+  const buttonClassname = clsx({
+    [classes.buttonSuccess]: success,
+  });
+
+  React.useEffect(() => {
+    return () => {
+      clearTimeout(timer.current);
+    };
+  }, []);
+
+  function handleButtonClick() {
+    if (!loading) {
+      setSuccess(false);
+      setLoading(true);
+      timer.current = setTimeout(() => {
+        setSuccess(true);
+        setLoading(false);
+      }, 2000);
+    }
+  }
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.wrapper}>
+        <Fab color="primary" className={buttonClassname} onClick={handleButtonClick}>
+          {success ? <CheckIcon /> : <SaveIcon />}
+        </Fab>
+        {loading && <CircularProgress size={68} className={classes.fabProgress} />}
+      </div>
+      <div className={classes.wrapper}>
+        <Button
+          variant="contained"
+          color="primary"
+          className={buttonClassname}
+          disabled={loading}
+          onClick={handleButtonClick}
+        >
+          Accept terms
+        </Button>
+        {loading && <CircularProgress size={24} className={classes.buttonProgress} />}
+      </div>
+    </div>
+  );
+}
+
+export default CircularIntegration;

docs/src/pages/demos/progress/CircularStatic.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { makeStyles, Theme } from '@material-ui/core/styles';
+import CircularProgress from '@material-ui/core/CircularProgress';
+
+const useStyles = makeStyles((theme: Theme) => ({
+  progress: {
+    margin: theme.spacing(2),
+  },
+}));
+
+function CircularStatic() {
+  const classes = useStyles();
+  const [completed, setCompleted] = React.useState(0);
+
+  React.useEffect(() => {
+    function progress() {
+      setCompleted(prevCompleted => (prevCompleted >= 100 ? 0 : prevCompleted + 10));
+    }
+
+    const timer = setInterval(progress, 1000);
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
+
+  return (
+    <div>
+      <CircularProgress className={classes.progress} variant="static" value={5} />
+      <CircularProgress className={classes.progress} variant="static" value={25} />
+      <CircularProgress className={classes.progress} variant="static" value={50} />
+      <CircularProgress className={classes.progress} variant="static" value={75} />
+      <CircularProgress className={classes.progress} variant="static" value={100} />
+      <CircularProgress className={classes.progress} variant="static" value={completed} />
+    </div>
+  );
+}
+
+export default CircularStatic;

docs/src/pages/demos/progress/CircularUnderLoad.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import CircularProgress from '@material-ui/core/CircularProgress';
+
+function CircularUnderLoad() {
+  return <CircularProgress disableShrink />;
+}
+
+export default CircularUnderLoad;

docs/src/pages/demos/progress/CustomizedProgress.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles';
+import { lighten } from '@material-ui/core/styles/colorManipulator';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import Paper from '@material-ui/core/Paper';
+import LinearProgress from '@material-ui/core/LinearProgress';
+
+const styles = (theme: Theme) =>
+  createStyles({
+    root: {
+      flexGrow: 1,
+    },
+    progress: {
+      margin: theme.spacing(2),
+      color: '#00695c',
+    },
+    linearColorPrimary: {
+      backgroundColor: '#b2dfdb',
+    },
+    linearBarColorPrimary: {
+      backgroundColor: '#00695c',
+    },
+    linearProgressDeterminate: {
+      margin: `${theme.spacing(1)}px auto 0`,
+      height: 10,
+      backgroundColor: lighten('#ff6c5c', 0.5),
+    },
+    linearProgressDeterminateBar: {
+      borderRadius: 20,
+      backgroundColor: '#ff6c5c',
+    },
+    // Reproduce the Facebook spinners.
+    facebook: {
+      margin: theme.spacing(2),
+      position: 'relative',
+    },
+    facebook1: {
+      color: '#eef3fd',
+    },
+    facebook2: {
+      color: '#6798e5',
+      animationDuration: '550ms',
+      position: 'absolute',
+      left: 0,
+    },
+  });
+
+export type Props = WithStyles<typeof styles>;
+
+function CustomizedProgress(props: Props) {
+  const { classes } = props;
+
+  return (
+    <Paper className={classes.root}>
+      <CircularProgress className={classes.progress} size={30} thickness={5} />
+      <LinearProgress
+        classes={{
+          colorPrimary: classes.linearColorPrimary,
+          barColorPrimary: classes.linearBarColorPrimary,
+        }}
+      />
+      <LinearProgress
+        variant="determinate"
+        color="secondary"
+        value={50}
+        classes={{
+          root: classes.linearProgressDeterminate,
+          bar: classes.linearProgressDeterminateBar,
+        }}
+      />
+      <div className={classes.facebook}>
+        <CircularProgress
+          variant="determinate"
+          value={100}
+          className={classes.facebook1}
+          size={24}
+          thickness={4}
+        />
+        <CircularProgress
+          variant="indeterminate"
+          disableShrink
+          className={classes.facebook2}
+          size={24}
+          thickness={4}
+        />
+      </div>
+    </Paper>
+  );
+}
+
+CustomizedProgress.propTypes = {
+  classes: PropTypes.object.isRequired,
+} as any;
+
+export default withStyles(styles)(CustomizedProgress);

docs/src/pages/demos/progress/LinearBuffer.js

@@ -13,7 +13,7 @@ function LinearBuffer() {
   const [completed, setCompleted] = React.useState(0);
   const [buffer, setBuffer] = React.useState(10);
 
-  const progress = React.useRef();
+  const progress = React.useRef(() => {});
   React.useEffect(() => {
     progress.current = () => {
       if (completed > 100) {

docs/src/pages/demos/progress/LinearBuffer.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import LinearProgress from '@material-ui/core/LinearProgress';
+
+const useStyles = makeStyles({
+  root: {
+    flexGrow: 1,
+  },
+});
+
+function LinearBuffer() {
+  const classes = useStyles();
+  const [completed, setCompleted] = React.useState(0);
+  const [buffer, setBuffer] = React.useState(10);
+
+  const progress = React.useRef(() => {});
+  React.useEffect(() => {
+    progress.current = () => {
+      if (completed > 100) {
+        setCompleted(0);
+        setBuffer(10);
+      } else {
+        const diff = Math.random() * 10;
+        const diff2 = Math.random() * 10;
+        setCompleted(completed + diff);
+        setBuffer(completed + diff + diff2);
+      }
+    };
+  });
+
+  React.useEffect(() => {
+    function tick() {
+      progress.current();
+    }
+    const timer = setInterval(tick, 500);
+
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
+
+  return (
+    <div className={classes.root}>
+      <LinearProgress variant="buffer" value={completed} valueBuffer={buffer} />
+      <br />
+      <LinearProgress color="secondary" variant="buffer" value={completed} valueBuffer={buffer} />
+    </div>
+  );
+}
+
+export default LinearBuffer;