Show "copied" text when clicking the copy button

1 files changed, 32 insertions, 4 deletions

diff --git a/packages/gitbook-plugin-copy-code/src/index.js b/packages/gitbook-plugin-copy-code/src/index.js
index cfbe1b1..4f90078 100644
--- a/packages/gitbook-plugin-copy-code/src/index.js
+++ b/packages/gitbook-plugin-copy-code/src/index.js
@@ -2,6 +2,8 @@ const copy = require('copy-to-clipboard');
 const GitBook = require('gitbook-core');
 const { React } = GitBook;
 
+const COPIED_TIMEOUT = 1000;
+
 /**
  * Get children as text
  * @param {React.Children} children
@@ -18,9 +20,16 @@ function getChildrenToText(children) {
     }).join('');
 }
 
-const CodeBlockWithCopy = React.createClass({
+let CodeBlockWithCopy = React.createClass({
     propTypes: {
-        children: React.PropTypes.node
+        children: React.PropTypes.node,
+        i18n: GitBook.Shapes.I18n
+    },
+
+    getInitialState() {
+        return {
+            copied: false
+        };
     },
 
     onClick(event) {
@@ -31,22 +40,41 @@ const CodeBlockWithCopy = React.createClass({
 
         const text = getChildrenToText(children);
         copy(text);
+
+        this.setState({ copied: true }, () => {
+            this.timeout = setTimeout(() => {
+                this.setState({
+                    copied: false
+                });
+            }, COPIED_TIMEOUT);
+        });
+    },
+
+    componentWillUnmount() {
+        if (this.timeout) {
+            clearTimeout(this.timeout);
+        }
     },
 
     render() {
-        const { children } = this.props;
+        const { children, i18n } = this.props;
+        const { copied } = this.state;
 
         return (
             <div className="CodeBlockWithCopy-Container">
                 <GitBook.ImportCSS href="gitbook/copy-code/button.css" />
 
                 {children}
-                <span className="CodeBlockWithCopy-Button" onClick={this.onClick}>Copy</span>
+                <span className="CodeBlockWithCopy-Button" onClick={this.onClick}>
+                    {copied ? i18n.t('COPIED') : i18n.t('COPY')}
+                </span>
             </div>
         );
     }
 });
 
+CodeBlockWithCopy = GitBook.connect(CodeBlockWithCopy);
+
 module.exports = GitBook.createPlugin({
     activate: (dispatch, getState, { Components }) => {
         dispatch(Components.registerComponent(CodeBlockWithCopy, { role: 'html:pre' }));