Ádding Copy component, and UserDetail fic

client/coral-admin/src/routes/Moderation/components/UserDetail.js

@@ -1,11 +1,19 @@
 import React, {PropTypes} from 'react';
-import {Button, Drawer} from 'coral-ui';
+import {Button, Drawer, Copy} from 'coral-ui';
 import styles from './UserDetail.css';
 import Slot from 'coral-framework/components/Slot';
 import Comment from './Comment';
 import {actionsMap} from '../helpers/moderationQueueActionsMap';
 
 export default class UserDetail extends React.Component {
+
+  constructor() {
+    super();
+    this.state = {
+      emailCopied: false
+    };
+  }
+
   static propTypes = {
     id: PropTypes.string.isRequired,
     hideUserDetail: PropTypes.func.isRequired,
@@ -22,16 +30,6 @@ export default class UserDetail extends React.Component {
     bulkReject: PropTypes.func.isRequired,
   }
 
-  copyPermalink = () => {
-    this.profile.select();
-    try {
-      document.execCommand('copy');
-    } catch (e) {
-
-      /* nothing */
-    }
-  }
-
   rejectThenReload = (info) => {
     this.props.rejectComment(info).then(() => {
       this.props.data.refetch();
@@ -52,6 +50,16 @@ export default class UserDetail extends React.Component {
     this.props.changeStatus('rejected');
   }
 
+  showCopied() {
+    this.setState({
+      emailCopied: true
+    }, () => {
+      setTimeout(() => this.setState({
+        emailCopied: false
+      }), 3000);
+    });
+  }
+
   render () {
     const {
       root: {
@@ -90,8 +98,14 @@ export default class UserDetail extends React.Component {
     return (
       <Drawer handleClickOutside={hideUserDetail}>
         <h3>{user.username}</h3>
-        <Button className={styles.copyButton} onClick={this.copyPermalink}>Copy</Button>
         {profile && <input className={styles.profileEmail} readOnly type="text" ref={(ref) => this.profile = ref} value={profile} />}
+
+        <Copy onCopy={() => this.showCopied()} text={profile} className={styles.profileEmail}>
+          <Button className={styles.copyButton}>
+            {this.state.emailCopied ? 'Copied!' : 'Copy'}
+          </Button>
+        </Copy>
+
         <Slot
           fill="userProfile"
           data={this.props.data}

client/coral-ui/components/Copy.js

@@ -0,0 +1,38 @@
+import React, {Component} from 'react';
+import Clipboard from 'clipboard';
+
+export default class Copy extends Component {
+
+ constructor(props) {
+   super(props);
+   this.refCopyButton = this.refCopyButton.bind(this);
+ }
+
+ componentDidMount() {
+   const clipboard = new Clipboard(this.copyButtonEl);
+
+   clipboard.on('success', (e) => {
+     this.props.onCopy();
+     e.clearSelection();
+   });
+ }
+
+ refCopyButton(button) {
+   this.copyButtonEl = button;
+ }
+
+ render() {
+   const { children, target = '', text = '' } = this.props;
+
+   return (
+     <span
+       ref={this.refCopyButton}
+       data-clipboard-action="copy"
+       data-clipboard-text={text}
+       data-clipboard-target={target}
+     >
+     {children}
+     </span>
+   );
+ }
+}

client/coral-ui/index.js

@@ -24,3 +24,4 @@ export {default as Option} from './components/Option';
 export {default as SnackBar} from './components/SnackBar';
 export {default as TextArea} from './components/TextArea';
 export {default as Drawer} from './components/Drawer';
+export {default as Copy} from './components/Copy';