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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { withStyles } from '@material-ui/core/styles';
import CheckIcon from '@material-ui/icons/Check';
import SaveIcon from '@material-ui/icons/Save';
import { green } from '@material-ui/core/colors';
import { CircularProgress, Button, Fab } from '@material-ui/core';
const styles = 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,
},
});
class CircularIntegration extends React.Component {
state = {
loading: false,
success: false,
};
componentWillUnmount() {
clearTimeout(this.timer);
}
handleButtonClick = () => {
if (!this.state.loading) {
this.setState(
{
success: false,
loading: true,
},
() => {
this.timer = setTimeout(() => {
this.setState({
loading: false,
success: true,
});
}, 2000);
},
);
}
};
timer = undefined;
render() {
const { loading, success } = this.state;
const { classes } = this.props;
const buttonClassname = classNames({
[classes.buttonSuccess]: success,
});
return (
<div className={classes.root}>
<div className={classes.wrapper}>
<Fab
color="primary"
className={buttonClassname}
onClick={this.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={this.handleButtonClick}
>
Accept terms
</Button>
{loading && <CircularProgress size={24} className={classes.buttonProgress} />}
</div>
</div>
);
}
}
CircularIntegration.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(CircularIntegration);
|
