Refs by ReactDOMNode

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import {Button} from 'coral-ui';
+import t from 'coral-framework/services/i18n';
+import {withCopyToClipboard} from 'coral-framework/hocs';
+
+class ButtonCopyToClipboard extends React.Component {
+
+  constructor() {
+    super();
+
+    this.state = {
+      emailCopied: false
+    };
+  }
+
+  showCopied() {
+    this.setState({
+      emailCopied: true
+    }, () => {
+      setTimeout(() => this.setState({
+        emailCopied: false
+      }), 3000);
+    });
+  }
+
+  render () {
+    return (
+      <Button {...this.props}>
+        {this.state.emailCopied ? t('common.copied') : t('common.copy')}
+      </Button>
+    );
+  }
+}
+
+export default withCopyToClipboard(ButtonCopyToClipboard);

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

@@ -207,6 +207,7 @@ export default class Moderation extends Component {
           shortcutsNoteVisible={moderation.shortcutsNoteVisible}
           open={moderation.modalOpen}
           onClose={this.onClose}/>
+
         {moderation.userDetailId && (
           <UserDetail
             id={moderation.userDetailId}
@@ -218,6 +219,7 @@ export default class Moderation extends Component {
             acceptComment={props.acceptComment}
             rejectComment={props.rejectComment} />
         )}
+
         <StorySearch
           moderation={this.props.moderation}
           closeSearch={this.closeSearch}

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

@@ -2,20 +2,12 @@ import React, {PropTypes} from 'react';
 import Comment from './Comment';
 import styles from './UserDetail.css';
 import {Button, Drawer} from 'coral-ui';
-import t from 'coral-framework/services/i18n';
 import {Slot} from 'coral-framework/components';
-import {withCopyToClipboard} from 'coral-framework/hocs';
+import ButtonCopyToClipboard from './ButtonCopyToClipboard';
 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,
@@ -97,20 +89,13 @@ 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} />}
+          <ButtonCopyToClipboard className={styles.copyButton} text={profile} />
         </div>
 
         <Slot

client/coral-framework/hocs/withCopyToClipboard.js

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

client/coral-ui/components/Button.js

@@ -2,20 +2,23 @@ import React from 'react';
 import styles from './Button.css';
 import Icon from './Icon';
 
-const Button = ({cStyle = 'local', children, className, raised = false, full = false, icon = '', ...props}) => (
-  <button
-    className={`
-      ${styles.button}
-      ${styles[`type--${cStyle}`]}
-      ${className}
-      ${full ? styles.full : ''}
-      ${raised ? styles.raised : ''}
-    `}
-    {...props}
-  >
-    {icon && <Icon name={icon} className={styles.icon} />}
-    {children}
-  </button>
-);
-
-export default Button;
+export default class Button extends React.Component {
+  render() {
+    const {cStyle = 'local', children, className, raised = false, full = false, icon = '', ...props} = this.props;
+    return (
+      <button
+        className={`
+          ${styles.button}
+          ${styles[`type--${cStyle}`]}
+          ${className}
+          ${full ? styles.full : ''}
+          ${raised ? styles.raised : ''}
+        `}
+        {...props}
+      >
+        {icon && <Icon name={icon} className={styles.icon} />}
+        {children}
+      </button>
+    );
+  }
+}