withCopyToClipboard

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

@@ -3,7 +3,8 @@ import Comment from './Comment';
 import styles from './UserDetail.css';
 import {Button, Drawer} from 'coral-ui';
 import t from 'coral-framework/services/i18n';
-import {Slot, Copy} from 'coral-framework/components';
+import {Slot} from 'coral-framework/components';
+import {withCopyToClipboard} from 'coral-framework/hocs';
 import {actionsMap} from '../helpers/moderationQueueActionsMap';
 
 export default class UserDetail extends React.Component {
@@ -96,18 +97,20 @@ export default class UserDetail extends React.Component {
       rejectedPercent = 0;
     }
 
+    const CopyToClipboard = withCopyToClipboard({ text: profile })(
+      <button className={styles.copyButton}>
+        {this.state.emailCopied ? t('common.copied') : t('common.copy')}
+      </button>
+    );
+
+    console.log(CopyToClipboard)
+
     return (
       <Drawer handleClickOutside={hideUserDetail}>
         <h3>{user.username}</h3>
 
         <div>
           {profile && <input className={styles.profileEmail} readOnly type="text" ref={(ref) => this.profile = ref} value={profile} />}
-
-          <Copy onCopy={() => this.showCopied()} text={profile}>
-            <Button className={styles.copyButton}>
-              {this.state.emailCopied ? t('common.copied') : t('common.copy')}
-            </Button>
-          </Copy>
         </div>
 
         <Slot

client/coral-framework/components/Copy.js

@@ -1,39 +0,0 @@
-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 = '', className = ''} = this.props;
-
-    return (
-     <span
-       className={className}
-       ref={this.refCopyButton}
-       data-clipboard-action="copy"
-       data-clipboard-text={text}
-       data-clipboard-target={target}
-     >
-     {children}
-     </span>
-    );
-  }
-}

client/coral-framework/components/index.js

@@ -1,2 +1 @@
 export {default as Slot} from './Slot';
-export {default as Copy} from './Copy';

client/coral-framework/hocs/index.js

@@ -1,4 +1,4 @@
 export {default as withFragments} from './withFragments';
 export {default as withMutation} from './withMutation';
 export {default as withQuery} from './withQuery';
-
+export {default as withCopyToClipboard} from './withCopyToClipboard';

client/coral-framework/hocs/withCopyToClipboard.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import Clipboard from 'clipboard';
+
+export default (config) => (WrappedComponent) => {
+  console.log(config, WrappedComponent)
+
+  class withCopyToClipboard extends React.Component {
+
+    componentDidMount() {
+      const node = ReactDOM.findDOMNode(WrappedComponent);
+      const clipboard = new Clipboard(node);
+
+      clipboard.on('success', (e) => {
+        this.props.onCopy();
+        e.clearSelection();
+      });
+    }
+
+    render() {
+      const {target = '', text = ''} = config;
+
+      return <WrappedComponent
+        className={className}
+        data-clipboard-action="copy"
+        data-clipboard-text={text}
+        data-clipboard-target={target}
+        {...this.props}
+      />;
+    }
+  }
+
+  return withCopyToClipboard;
+};