Skip to content

Commit 37962a2

Browse files
sperry94eps1lon
sperry94
authored and
eps1lon
committed
[docs] Add most Progress TypeScript demos (#15104)
* [docs] add progress typescript demos * changes from running prettier * adding back timer cleanup * making cleanup dependent on timer variable * removing DelayingAppearance conversion * do not need to specify type, indicative from start val … * updating js file to match tsx file
1 parent 837c8b8 commit 37962a2

12 files changed

+457
-2
lines changed

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

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React from 'react';
2+
import { makeStyles, Theme } from '@material-ui/core/styles';
3+
import CircularProgress from '@material-ui/core/CircularProgress';
4+
5+
const useStyles = makeStyles((theme: Theme) => ({
6+
progress: {
7+
margin: theme.spacing(2),
8+
},
9+
}));
10+
11+
function CircularDeterminate() {
12+
const classes = useStyles();
13+
const [progress, setProgress] = React.useState(0);
14+
15+
React.useEffect(() => {
16+
function tick() {
17+
// reset when reaching 100%
18+
setProgress(oldProgress => (oldProgress >= 100 ? 0 : oldProgress + 1));
19+
}
20+
21+
const timer = setInterval(tick, 20);
22+
return () => {
23+
clearInterval(timer);
24+
};
25+
}, []);
26+
27+
return (
28+
<div>
29+
<CircularProgress className={classes.progress} variant="determinate" value={progress} />
30+
<CircularProgress
31+
className={classes.progress}
32+
variant="determinate"
33+
value={progress}
34+
color="secondary"
35+
/>
36+
</div>
37+
);
38+
}
39+
40+
export default CircularDeterminate;

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles';
4+
import CircularProgress from '@material-ui/core/CircularProgress';
5+
6+
const styles = (theme: Theme) =>
7+
createStyles({
8+
progress: {
9+
margin: theme.spacing(2),
10+
},
11+
});
12+
13+
export type Props = WithStyles<typeof styles>;
14+
15+
function CircularIndeterminate(props: Props) {
16+
const { classes } = props;
17+
return (
18+
<div>
19+
<CircularProgress className={classes.progress} />
20+
<CircularProgress className={classes.progress} color="secondary" />
21+
</div>
22+
);
23+
}
24+
25+
CircularIndeterminate.propTypes = {
26+
classes: PropTypes.object.isRequired,
27+
} as any;
28+
29+
export default withStyles(styles)(CircularIndeterminate);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ function CircularIntegration() {
4444
const classes = useStyles();
4545
const [loading, setLoading] = React.useState(false);
4646
const [success, setSuccess] = React.useState(false);
47-
const timer = React.useRef(null);
47+
const timer = React.useRef(undefined);
4848

4949
const buttonClassname = clsx({
5050
[classes.buttonSuccess]: success,

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

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import React from 'react';
2+
import clsx from 'clsx';
3+
import { makeStyles, Theme } from '@material-ui/core/styles';
4+
import CircularProgress from '@material-ui/core/CircularProgress';
5+
import green from '@material-ui/core/colors/green';
6+
import Button from '@material-ui/core/Button';
7+
import Fab from '@material-ui/core/Fab';
8+
import CheckIcon from '@material-ui/icons/Check';
9+
import SaveIcon from '@material-ui/icons/Save';
10+
11+
const useStyles = makeStyles((theme: Theme) => ({
12+
root: {
13+
display: 'flex',
14+
alignItems: 'center',
15+
},
16+
wrapper: {
17+
margin: theme.spacing(1),
18+
position: 'relative',
19+
},
20+
buttonSuccess: {
21+
backgroundColor: green[500],
22+
'&:hover': {
23+
backgroundColor: green[700],
24+
},
25+
},
26+
fabProgress: {
27+
color: green[500],
28+
position: 'absolute',
29+
top: -6,
30+
left: -6,
31+
zIndex: 1,
32+
},
33+
buttonProgress: {
34+
color: green[500],
35+
position: 'absolute',
36+
top: '50%',
37+
left: '50%',
38+
marginTop: -12,
39+
marginLeft: -12,
40+
},
41+
}));
42+
43+
function CircularIntegration() {
44+
const classes = useStyles();
45+
const [loading, setLoading] = React.useState(false);
46+
const [success, setSuccess] = React.useState(false);
47+
const timer = React.useRef<number | undefined>(undefined);
48+
49+
const buttonClassname = clsx({
50+
[classes.buttonSuccess]: success,
51+
});
52+
53+
React.useEffect(() => {
54+
return () => {
55+
clearTimeout(timer.current);
56+
};
57+
}, []);
58+
59+
function handleButtonClick() {
60+
if (!loading) {
61+
setSuccess(false);
62+
setLoading(true);
63+
timer.current = setTimeout(() => {
64+
setSuccess(true);
65+
setLoading(false);
66+
}, 2000);
67+
}
68+
}
69+
70+
return (
71+
<div className={classes.root}>
72+
<div className={classes.wrapper}>
73+
<Fab color="primary" className={buttonClassname} onClick={handleButtonClick}>
74+
{success ? <CheckIcon /> : <SaveIcon />}
75+
</Fab>
76+
{loading && <CircularProgress size={68} className={classes.fabProgress} />}
77+
</div>
78+
<div className={classes.wrapper}>
79+
<Button
80+
variant="contained"
81+
color="primary"
82+
className={buttonClassname}
83+
disabled={loading}
84+
onClick={handleButtonClick}
85+
>
86+
Accept terms
87+
</Button>
88+
{loading && <CircularProgress size={24} className={classes.buttonProgress} />}
89+
</div>
90+
</div>
91+
);
92+
}
93+
94+
export default CircularIntegration;

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

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from 'react';
2+
import { makeStyles, Theme } from '@material-ui/core/styles';
3+
import CircularProgress from '@material-ui/core/CircularProgress';
4+
5+
const useStyles = makeStyles((theme: Theme) => ({
6+
progress: {
7+
margin: theme.spacing(2),
8+
},
9+
}));
10+
11+
function CircularStatic() {
12+
const classes = useStyles();
13+
const [completed, setCompleted] = React.useState(0);
14+
15+
React.useEffect(() => {
16+
function progress() {
17+
setCompleted(prevCompleted => (prevCompleted >= 100 ? 0 : prevCompleted + 10));
18+
}
19+
20+
const timer = setInterval(progress, 1000);
21+
return () => {
22+
clearInterval(timer);
23+
};
24+
}, []);
25+
26+
return (
27+
<div>
28+
<CircularProgress className={classes.progress} variant="static" value={5} />
29+
<CircularProgress className={classes.progress} variant="static" value={25} />
30+
<CircularProgress className={classes.progress} variant="static" value={50} />
31+
<CircularProgress className={classes.progress} variant="static" value={75} />
32+
<CircularProgress className={classes.progress} variant="static" value={100} />
33+
<CircularProgress className={classes.progress} variant="static" value={completed} />
34+
</div>
35+
);
36+
}
37+
38+
export default CircularStatic;

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React from 'react';
2+
import CircularProgress from '@material-ui/core/CircularProgress';
3+
4+
function CircularUnderLoad() {
5+
return <CircularProgress disableShrink />;
6+
}
7+
8+
export default CircularUnderLoad;

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

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles';
4+
import { lighten } from '@material-ui/core/styles/colorManipulator';
5+
import CircularProgress from '@material-ui/core/CircularProgress';
6+
import Paper from '@material-ui/core/Paper';
7+
import LinearProgress from '@material-ui/core/LinearProgress';
8+
9+
const styles = (theme: Theme) =>
10+
createStyles({
11+
root: {
12+
flexGrow: 1,
13+
},
14+
progress: {
15+
margin: theme.spacing(2),
16+
color: '#00695c',
17+
},
18+
linearColorPrimary: {
19+
backgroundColor: '#b2dfdb',
20+
},
21+
linearBarColorPrimary: {
22+
backgroundColor: '#00695c',
23+
},
24+
linearProgressDeterminate: {
25+
margin: `${theme.spacing(1)}px auto 0`,
26+
height: 10,
27+
backgroundColor: lighten('#ff6c5c', 0.5),
28+
},
29+
linearProgressDeterminateBar: {
30+
borderRadius: 20,
31+
backgroundColor: '#ff6c5c',
32+
},
33+
// Reproduce the Facebook spinners.
34+
facebook: {
35+
margin: theme.spacing(2),
36+
position: 'relative',
37+
},
38+
facebook1: {
39+
color: '#eef3fd',
40+
},
41+
facebook2: {
42+
color: '#6798e5',
43+
animationDuration: '550ms',
44+
position: 'absolute',
45+
left: 0,
46+
},
47+
});
48+
49+
export type Props = WithStyles<typeof styles>;
50+
51+
function CustomizedProgress(props: Props) {
52+
const { classes } = props;
53+
54+
return (
55+
<Paper className={classes.root}>
56+
<CircularProgress className={classes.progress} size={30} thickness={5} />
57+
<LinearProgress
58+
classes={{
59+
colorPrimary: classes.linearColorPrimary,
60+
barColorPrimary: classes.linearBarColorPrimary,
61+
}}
62+
/>
63+
<LinearProgress
64+
variant="determinate"
65+
color="secondary"
66+
value={50}
67+
classes={{
68+
root: classes.linearProgressDeterminate,
69+
bar: classes.linearProgressDeterminateBar,
70+
}}
71+
/>
72+
<div className={classes.facebook}>
73+
<CircularProgress
74+
variant="determinate"
75+
value={100}
76+
className={classes.facebook1}
77+
size={24}
78+
thickness={4}
79+
/>
80+
<CircularProgress
81+
variant="indeterminate"
82+
disableShrink
83+
className={classes.facebook2}
84+
size={24}
85+
thickness={4}
86+
/>
87+
</div>
88+
</Paper>
89+
);
90+
}
91+
92+
CustomizedProgress.propTypes = {
93+
classes: PropTypes.object.isRequired,
94+
} as any;
95+
96+
export default withStyles(styles)(CustomizedProgress);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ function LinearBuffer() {
1313
const [completed, setCompleted] = React.useState(0);
1414
const [buffer, setBuffer] = React.useState(10);
1515

16-
const progress = React.useRef();
16+
const progress = React.useRef(() => {});
1717
React.useEffect(() => {
1818
progress.current = () => {
1919
if (completed > 100) {

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

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import React from 'react';
2+
import { makeStyles } from '@material-ui/core/styles';
3+
import LinearProgress from '@material-ui/core/LinearProgress';
4+
5+
const useStyles = makeStyles({
6+
root: {
7+
flexGrow: 1,
8+
},
9+
});
10+
11+
function LinearBuffer() {
12+
const classes = useStyles();
13+
const [completed, setCompleted] = React.useState(0);
14+
const [buffer, setBuffer] = React.useState(10);
15+
16+
const progress = React.useRef(() => {});
17+
React.useEffect(() => {
18+
progress.current = () => {
19+
if (completed > 100) {
20+
setCompleted(0);
21+
setBuffer(10);
22+
} else {
23+
const diff = Math.random() * 10;
24+
const diff2 = Math.random() * 10;
25+
setCompleted(completed + diff);
26+
setBuffer(completed + diff + diff2);
27+
}
28+
};
29+
});
30+
31+
React.useEffect(() => {
32+
function tick() {
33+
progress.current();
34+
}
35+
const timer = setInterval(tick, 500);
36+
37+
return () => {
38+
clearInterval(timer);
39+
};
40+
}, []);
41+
42+
return (
43+
<div className={classes.root}>
44+
<LinearProgress variant="buffer" value={completed} valueBuffer={buffer} />
45+
<br />
46+
<LinearProgress color="secondary" variant="buffer" value={completed} valueBuffer={buffer} />
47+
</div>
48+
);
49+
}
50+
51+
export default LinearBuffer;

0 commit comments

Comments
 (0)