ButtonCopyToClipboard

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

@@ -4,29 +4,10 @@ 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 {...this.props} >
+        {t('common.copy')}
       </Button>
     );
   }

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

@@ -44,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: {
@@ -95,7 +85,7 @@ export default class UserDetail extends React.Component {
 
         <div>
           {profile && <input className={styles.profileEmail} readOnly type="text" ref={(ref) => this.profile = ref} value={profile} />}
-          <ButtonCopyToClipboard className={styles.copyButton} text={profile} />
+          <ButtonCopyToClipboard className={styles.copyButton} copyText={profile} />
         </div>
 
         <Slot

client/coral-framework/hocs/withCopyToClipboard.js

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

locales/en.yml

@@ -33,7 +33,6 @@ en:
   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:
-    copied: 'Copied'
     copy: 'Copy'
   community:
     account_creation_date: "Account Creation Date"

locales/es.yml

@@ -33,7 +33,6 @@ es:
   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:
-    copied: 'Copiado'
     copy: 'Copiar'
   community:
     account_creation_date: "Fecha de creación de la cuenta"