Show "copied" text when clicking the copy button

4 files changed, 35 insertions, 7 deletions

diff --git a/packages/gitbook-core/src/shapes/index.js b/packages/gitbook-core/src/shapes/index.js
index b019756..2faddbc 100644
--- a/packages/gitbook-core/src/shapes/index.js
+++ b/packages/gitbook-core/src/shapes/index.js
@@ -4,7 +4,7 @@ const ImmutablePropTypes = require('react-immutable-proptypes');
 module.exports = {
     ...ImmutablePropTypes,
     dispatch:       React.PropTypes.func,
-    i18n:           require('./i18n'),
+    I18n:           require('./i18n'),
     Context:        require('./Context'),
     Page:           require('./Page'),
     File:           require('./File'),
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' }));
diff --git a/packages/gitbook-plugin-search/src/components/Input.js b/packages/gitbook-plugin-search/src/components/Input.js
index 8bee215..457deff 100644
--- a/packages/gitbook-plugin-search/src/components/Input.js
+++ b/packages/gitbook-plugin-search/src/components/Input.js
@@ -6,7 +6,7 @@ const search = require('../actions/search');
 const SearchInput = React.createClass({
     propTypes: {
         query:    React.PropTypes.string,
-        i18n:     GitBook.Shapes.i18n,
+        i18n:     GitBook.Shapes.I18n,
         dispatch: GitBook.Shapes.dispatch
     },
 
diff --git a/packages/gitbook-plugin-search/src/components/Results.js b/packages/gitbook-plugin-search/src/components/Results.js
index 85e6133..d9ecc45 100644
--- a/packages/gitbook-plugin-search/src/components/Results.js
+++ b/packages/gitbook-plugin-search/src/components/Results.js
@@ -22,7 +22,7 @@ const Result = React.createClass({
 
 const SearchResults = React.createClass({
     propTypes: {
-        i18n:     GitBook.Shapes.i18n,
+        i18n:     GitBook.Shapes.I18n,
         results:  GitBook.Shapes.list,
         query:    React.PropTypes.string,
         children: React.PropTypes.node