Fix Copy to Clipboard Snackbar

js/src/ui/CopyToClipboard/copyToClipboard.js

@@ -15,19 +15,25 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
 import { IconButton } from 'material-ui';
-import Snackbar from 'material-ui/Snackbar';
 import Clipboard from 'react-copy-to-clipboard';
 import CopyIcon from 'material-ui/svg-icons/content/content-copy';
 import Theme from '../Theme';
-import { darkBlack } from 'material-ui/styles/colors';
+
+import { showSnackbar } from '../../redux/providers/snackbarActions';
+
 const { textColor, disabledTextColor } = Theme.flatButton;
 
 import styles from './copyToClipboard.css';
 
-export default class CopyToClipboard extends Component {
+class CopyToClipboard extends Component {
   static propTypes = {
+    showSnackbar: PropTypes.func.isRequired,
     data: PropTypes.string.isRequired,
+
     onCopy: PropTypes.func,
     size: PropTypes.number, // in px
     cooldown: PropTypes.number // in ms
@@ -42,11 +48,12 @@ export default class CopyToClipboard extends Component {
 
   state = {
     copied: false,
-    timeout: null
+    timeoutId: null
   };
 
   componentWillUnmount () {
     const { timeoutId } = this.state;
+
     if (timeoutId) {
       window.clearTimeout(timeoutId);
     }
@@ -59,14 +66,6 @@ export default class CopyToClipboard extends Component {
     return (
       <Clipboard onCopy={ this.onCopy } text={ data }>
         <div className={ styles.wrapper }>
-          <Snackbar
-            open={ copied }
-            message={
-              <div>copied <code className={ styles.data }>{ data }</code> to clipboard</div>
-            }
-            autoHideDuration={ 2000 }
-            bodyStyle={ { backgroundColor: darkBlack } }
-          />
           <IconButton
             disableTouchRipple
             style={ { width: size, height: size, padding: '0' } }
@@ -80,14 +79,28 @@ export default class CopyToClipboard extends Component {
   }
 
   onCopy = () => {
-    const { cooldown, onCopy } = this.props;
+    const { data, onCopy, cooldown, showSnackbar } = this.props;
+    const message = (<div>copied <code className={ styles.data }>{ data }</code> to clipboard</div>);
 
     this.setState({
       copied: true,
-      timeout: setTimeout(() => {
-        this.setState({ copied: false, timeout: null });
+      timeoutId: setTimeout(() => {
+        this.setState({ copied: false, timeoutId: null });
       }, cooldown)
     });
+
+    showSnackbar(message, cooldown);
     onCopy();
   }
 }
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({
+    showSnackbar
+  }, dispatch);
+}
+
+export default connect(
+  null,
+  mapDispatchToProps
+)(CopyToClipboard);