Merge pull request #694 from coralproject/copy

withCopyToClipboard & ButtonCopyToClipboard

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

@@ -0,0 +1,16 @@
+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 {
+  render () {
+    return (
+      <Button {...this.props} >
+        {t('common.copy')}
+      </Button>
+    );
+  }
+}
+
+export default withCopyToClipboard(ButtonCopyToClipboard);

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

@@ -192,6 +192,7 @@ export default class Moderation extends Component {
           shortcutsNoteVisible={moderation.shortcutsNoteVisible}
           open={moderation.modalOpen}
           onClose={this.onClose}/>
+
         {moderation.userDetailId && (
           <UserDetail
             id={moderation.userDetailId}
@@ -203,6 +204,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.css

@@ -35,9 +35,8 @@
   border: none;
   background-color: transparent;
   font-size: 16px;
-  position: absolute;
-  width: 90%;
   outline: none;
+  width: calc(100% - 90px);
 }
 
 .commentStatuses {

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

@@ -1,19 +1,13 @@
 import React, {PropTypes} from 'react';
-import {Button, Drawer, Copy} from 'coral-ui';
-import styles from './UserDetail.css';
-import Slot from 'coral-framework/components/Slot';
 import Comment from './Comment';
+import styles from './UserDetail.css';
+import {Button, Drawer} from 'coral-ui';
+import {Slot} from 'coral-framework/components';
+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,
@@ -50,16 +44,6 @@ 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: {
@@ -98,13 +82,11 @@ export default class UserDetail extends React.Component {
     return (
       <Drawer handleClickOutside={hideUserDetail}>
         <h3>{user.username}</h3>
-        {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>
+        <div>
+          {profile && <input className={styles.profileEmail} readOnly type="text" ref={(ref) => this.profile = ref} value={profile} />}
+          <ButtonCopyToClipboard className={styles.copyButton} copyText={profile} />
+        </div>
 
         <Slot
           fill="userProfile"

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,29 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Clipboard from 'clipboard';
+
+export default (WrappedComponent) => {
+  class WithCopyToClipboard extends React.Component {
+    componentDidMount() {
+      const clipboard = new Clipboard(ReactDOM.findDOMNode(this));
+
+      clipboard.on('success', (e) => {
+        e.clearSelection();
+      });
+    }
+
+    render() {
+      const {copyTarget = '', copyText = '', className = '', ...rest} = this.props;
+
+      return <WrappedComponent
+        className={className}
+        data-clipboard-action="copy"
+        data-clipboard-text={copyText}
+        data-clipboard-target={copyTarget}
+        {...rest}
+      />;
+    }
+  }
+
+  return WithCopyToClipboard;
+};

client/coral-ui/components/Button.css

@@ -53,6 +53,16 @@
     color: #212121;
 }
 
+.type--local:hover {
+    background: #d6d5d5;
+    color: #212121;
+}
+
+.type--local:active {
+    background: #cccccc;
+    color: #212121;
+}
+
 .type--facebook {
     background-color: #4267b2;
     border-color: #4267b2;

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>
+    );
+  }
+}

client/coral-ui/components/Copy.js

@@ -1,38 +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 = ''} = 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,4 +24,3 @@ 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';

locales/en.yml

@@ -33,6 +33,8 @@ en:
   comment_post_banned_word: "Your comment contains one or more words that are not permitted, so it will not be published. If you think this message is incorrect, please contact our moderation team."
   comment_post_notif: "Your comment has been posted."
   comment_post_notif_premod: "Thank you for posting. Our moderation team will review your comment shortly."
+  common:
+    copy: 'Copy'
   community:
     account_creation_date: "Account Creation Date"
     active: Active

locales/es.yml

@@ -33,6 +33,8 @@ es:
   comment_post_banned_word: "Tu comentario contiene una o más palabras que no están permitidas en nuestro espacio, por lo que no será publicado. Si crees que es un error, por favor contacta a nuestro equipo de moderación."
   comment_post_notif: "Tu comentario ha sido publicado."
   comment_post_notif_premod: "Gracias por el comentario. Nuestro equipo de moderación va a revisarlo muy pronto."
+  common:
+    copy: 'Copiar'
   community:
     account_creation_date: "Fecha de creación de la cuenta"
     active: Activa