[Circular] Add interactive integration in the docs (#8586)

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

@@ -0,0 +1,111 @@
+/* eslint-disable flowtype/require-valid-file-annotation */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { withStyles } from 'material-ui/styles';
+import { CircularProgress } from 'material-ui/Progress';
+import green from 'material-ui/colors/green';
+import Button from 'material-ui/Button';
+import CheckIcon from 'material-ui-icons/Check';
+import SaveIcon from 'material-ui-icons/Save';
+
+const styles = theme => ({
+ root: {
+ display: 'flex',
+ alignItems: 'center',
+ },
+ wrapper: {
+ margin: theme.spacing.unit,
+ position: 'relative',
+ },
+ buttonSuccess: {
+ backgroundColor: green[500],
+ '&:hover': {
+ backgroundColor: green[700],
+ },
+ },
+ fabProgress: {
+ color: green[500],
+ position: 'absolute',
+ top: -2,
+ left: -2,
+ },
+ 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}>
+ <Button fab color="primary" className={buttonClassname} onClick={this.handleButtonClick}>
+ {success ? <CheckIcon /> : <SaveIcon />}
+ </Button>
+ {loading && <CircularProgress size={60} className={classes.fabProgress} />}
+ </div>
+ <div className={classes.wrapper}>
+ <Button
+ raised
+ 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);

docs/src/pages/demos/progress/progress.md

@@ -22,7 +22,7 @@ For example, a refresh operation should display either a refresh bar or an activ
 
 ### Interactive Integration
 
-{{demo='pages/demos/progress/CircularFab.js'}}
+{{demo='pages/demos/progress/CircularIntegration.js'}}
 
 ### Determinate
 

pages/demos/progress.js

@@ -17,11 +17,11 @@ module.exports = require('fs')
  .readFileSync(require.resolve('docs/src/pages/demos/progress/CircularIndeterminate'), 'utf8')
 `,
  },
- 'pages/demos/progress/CircularFab.js': {
- js: require('docs/src/pages/demos/progress/CircularFab').default,
+ 'pages/demos/progress/CircularIntegration.js': {
+ js: require('docs/src/pages/demos/progress/CircularIntegration').default,
  raw: preval`
 module.exports = require('fs')
- .readFileSync(require.resolve('docs/src/pages/demos/progress/CircularFab'), 'utf8')
+ .readFileSync(require.resolve('docs/src/pages/demos/progress/CircularIntegration'), 'utf8')
 `,
  },
  'pages/demos/progress/CircularDeterminate.js': {