Form/Input: use CopyToClipboard

js/src/ui/Form/Input/input.css

@@ -24,8 +24,4 @@
 
 .copy {
   margin-right: 0.5em;
-
-  svg {
-    transition: all .5s ease-in-out;
-  }
 }

js/src/ui/Form/Input/input.js

@@ -15,11 +15,9 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
+import { TextField } from 'material-ui';
 
-import CopyToClipboard from 'react-copy-to-clipboard';
-import CopyIcon from 'material-ui/svg-icons/content/content-copy';
-import { TextField, IconButton } from 'material-ui';
-import { lightWhite, fullWhite } from 'material-ui/styles/colors';
+import CopyToClipboard from '../../CopyToClipboard';
 
 import styles from './input.css';
 
@@ -77,9 +75,7 @@ export default class Input extends Component {
   }
 
   state = {
-    value: this.props.value || '',
-    timeoutId: null,
-    copied: false
+    value: this.props.value || ''
   }
 
   componentWillReceiveProps (newProps) {
@@ -88,14 +84,6 @@ export default class Input extends Component {
     }
   }
 
-  componentWillUnmount () {
-    const { timeoutId } = this.state;
-
-    if (timeoutId) {
-      window.clearTimeout(timeoutId);
-    }
-  }
-
   render () {
     const { value } = this.state;
     const { children, className, hideUnderline, disabled, error, label, hint, multiLine, rows, type } = this.props;
@@ -151,7 +139,7 @@ export default class Input extends Component {
 
   renderCopyButton () {
     const { allowCopy, hideUnderline, label, hint, floatCopy } = this.props;
-    const { copied, value } = this.state;
+    const { value } = this.state;
 
     if (!allowCopy) {
       return null;
@@ -165,8 +153,6 @@ export default class Input extends Component {
       ? allowCopy
       : value;
 
-    const scale = copied ? 'scale(1.15)' : 'scale(1)';
-
     if (hideUnderline && !label) {
       style.marginBottom = 2;
     } else if (label && !hint) {
@@ -184,49 +170,11 @@ export default class Input extends Component {
 
     return (
       <div className={ styles.copy } style={ style }>
-        <CopyToClipboard
-          onCopy={ this.handleCopy }
-          text={ text } >
-          <IconButton
-            tooltip={ `${copied ? 'Copied' : 'Copy'} to clipboard` }
-            tooltipPosition='bottom-right'
-            style={ {
-              width: 16,
-              height: 16,
-              padding: 0
-            } }
-            iconStyle={ {
-              width: 16,
-              height: 16,
-              transform: scale
-            } }
-            tooltipStyles={ {
-              top: 16
-            } }
-          >
-            <CopyIcon
-              color={ copied ? lightWhite : fullWhite }
-            />
-          </IconButton>
-        </CopyToClipboard>
+        <CopyToClipboard data={ text } />
       </div>
     );
   }
 
-  handleCopy = () => {
-    if (this.state.timeoutId) {
-      window.clearTimeout(this.state.timeoutId);
-    }
-
-    this.setState({ copied: true }, () => {
-      const timeoutId = window.setTimeout(() => {
-        this.setState({ copied: false });
-      }, 500);
-
-      this.setState({ timeoutId });
-    });
-  }
-
   onChange = (event, value) => {
     this.setValue(value);