add CopyButton react component

resource/js/components/CopyButton.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import ClipboardButton from 'react-clipboard.js';
+
+export default class CopyButton extends React.Component {
+
+  showToolTip() {
+    $('#btnCopy').tooltip('show');
+    setTimeout(() => {
+      $('#btnCopy').tooltip('hide');
+    }, 1000);
+  }
+
+  render() {
+    return (
+      <ClipboardButton className={this.props.buttonClassName}
+          button-id="btnCopy" button-data-toggle="tooltip" button-title="copied!" button-data-placement="bottom" button-data-trigger="manual"
+          data-clipboard-text={this.props.text} onSuccess={this.showToolTip}>
+
+        <i className={this.props.iconClassName}></i>
+      </ClipboardButton>
+    );
+  }
+}
+
+CopyButton.propTypes = {
+  text: React.PropTypes.string.isRequired,
+  buttonClassName: React.PropTypes.string.isRequired,
+  iconClassName: React.PropTypes.string.isRequired,
+};

resource/js/components/Page/PagePath.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ClipboardButton from 'react-clipboard.js';
+import CopyButton from '../CopyButton';
 
 export default class PagePath extends React.Component {
 
@@ -69,13 +69,7 @@ export default class PagePath extends React.Component {
           <a href="/">/</a>
         </span>
         {afterElements}
-        <ClipboardButton className="btn btn-default"
-            button-id="btnCopy" button-data-toggle="tooltip" button-title="copied!" button-data-placement="bottom" button-data-trigger="manual"
-            data-clipboard-text={this.props.pagePath} onSuccess={this.showToolTip}>
-
-
-          <i className="fa fa-clone text-muted"></i>
-        </ClipboardButton>
+        <CopyButton buttonClassName="btn btn-default" text={this.props.pagePath} iconClassName="fa fa-clone text-muted" />
       </span>
     );
   }