From 022b05c8a8e40ad42d0d2d1b9c37195317187828 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sat, 7 Oct 2017 12:21:38 +0200
Subject: [PATCH] [Circular] Add interactive integration in the docs (#8586)

---
 docs/src/pages/demos/progress/CircularFab.js  |  85 --------------
 .../demos/progress/CircularIntegration.js     | 111 ++++++++++++++++++
 docs/src/pages/demos/progress/progress.md     |   2 +-
 pages/demos/progress.js                       |   6 +-
 4 files changed, 115 insertions(+), 89 deletions(-)
 delete mode 100644 docs/src/pages/demos/progress/CircularFab.js
 create mode 100644 docs/src/pages/demos/progress/CircularIntegration.js

diff --git a/docs/src/pages/demos/progress/CircularFab.js b/docs/src/pages/demos/progress/CircularFab.js
deleted file mode 100644
index 8daf632916f3d6..00000000000000
--- a/docs/src/pages/demos/progress/CircularFab.js
+++ /dev/null
@@ -1,85 +0,0 @@
-/* eslint-disable flowtype/require-valid-file-annotation */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-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 = {
-  wrapper: {
-    position: 'relative',
-  },
-  successButton: {
-    backgroundColor: green[500],
-    '&:hover': {
-      backgroundColor: green[700],
-    },
-  },
-  progress: {
-    color: green[500],
-    position: 'absolute',
-    top: -2,
-    left: -2,
-  },
-};
-
-class CircularFab 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,
-            });
-          }, 2e3);
-        },
-      );
-    }
-  };
-
-  timer = undefined;
-
-  render() {
-    const { loading, success } = this.state;
-    const { classes } = this.props;
-    let buttonClass = '';
-
-    if (success) {
-      buttonClass = classes.successButton;
-    }
-
-    return (
-      <div className={classes.wrapper}>
-        <Button fab color="primary" className={buttonClass} onClick={this.handleButtonClick}>
-          {success ? <CheckIcon /> : <SaveIcon />}
-        </Button>
-        {loading && <CircularProgress size={60} className={classes.progress} />}
-      </div>
-    );
-  }
-}
-
-CircularFab.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(CircularFab);
diff --git a/docs/src/pages/demos/progress/CircularIntegration.js b/docs/src/pages/demos/progress/CircularIntegration.js
new file mode 100644
index 00000000000000..1e65df1c8490d1
--- /dev/null
+++ b/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);
diff --git a/docs/src/pages/demos/progress/progress.md b/docs/src/pages/demos/progress/progress.md
index add4be2ba8cd75..214b626c5ed61f 100644
--- a/docs/src/pages/demos/progress/progress.md
+++ b/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
 
diff --git a/pages/demos/progress.js b/pages/demos/progress.js
index 8fb8507bd8a45a..d1cafd7a77178b 100644
--- a/pages/demos/progress.js
+++ b/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': {