-
-
Notifications
You must be signed in to change notification settings - Fork 31.7k
/
CircularIntegration.tsx
99 lines (93 loc) · 2.45 KB
/
CircularIntegration.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
import React from 'react';
import clsx from 'clsx';
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
import CircularProgress from '@material-ui/core/CircularProgress';
import { green } from '@material-ui/core/colors';
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) =>
createStyles({
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,
},
}),
);
export default function CircularIntegration() {
const classes = useStyles();
const [loading, setLoading] = React.useState(false);
const [success, setSuccess] = React.useState(false);
const timer = React.useRef<number>();
const buttonClassname = clsx({
[classes.buttonSuccess]: success,
});
React.useEffect(() => {
return () => {
clearTimeout(timer.current);
};
}, []);
const handleButtonClick = () => {
if (!loading) {
setSuccess(false);
setLoading(true);
timer.current = window.setTimeout(() => {
setSuccess(true);
setLoading(false);
}, 2000);
}
};
return (
<div className={classes.root}>
<div className={classes.wrapper}>
<Fab
aria-label="save"
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>
);
}