Refactor copy component

old-ui/app/account-detail.js

@@ -14,7 +14,7 @@ const EditableLabel = require('./components/editable-label')
 const TabBar = require('./components/tab-bar')
 const TokenList = require('./components/token-list')
 const AccountDropdowns = require('./components/account-dropdowns').AccountDropdowns
-const CopyButton = require('./components/copyButton')
+const CopyButton = require('./components/copy/copy-button')
 const ToastComponent = require('./components/toast')
 import { getMetaMaskAccounts } from '../../ui/app/selectors'
 

old-ui/app/account-qr.js

@@ -4,7 +4,7 @@ const h = require('react-hyperscript')
 const {qrcode: qrCode} = require('qrcode-npm')
 const {connect} = require('react-redux')
 const {isHexPrefixed} = require('ethereumjs-util')
-const CopyButton = require('./components/copyButton')
+const CopyButton = require('./components/copy/copy-button')
 
 class AccountQrScreen extends PureComponent {
   static defaultProps = {

old-ui/app/accounts/import/contract.js

@@ -4,7 +4,7 @@ import { connect } from 'react-redux'
 import actions from '../../../../ui/app/actions'
 import Web3 from 'web3'
 import log from 'loglevel'
-import CopyButton from '../../components/copyButton'
+import CopyButton from '../../components/copy/copy-button'
 import ErrorComponent from '../../components/error'
 import { getFullABI } from './helpers'
 

old-ui/app/add-suggested-token.js

@@ -5,7 +5,7 @@ const connect = require('react-redux').connect
 const actions = require('../../ui/app/actions')
 const Tooltip = require('./components/tooltip.js')
 const ethUtil = require('ethereumjs-util')
-const Copyable = require('./components/copyable')
+const Copyable = require('./components/copy/copyable')
 const addressSummary = require('./util').addressSummary
 
 

old-ui/app/components/account-export.js

@@ -5,7 +5,7 @@ const exportAsFile = require('../util').exportAsFile
 const actions = require('../../../ui/app/actions')
 const ethUtil = require('ethereumjs-util')
 const connect = require('react-redux').connect
-const CopyButton = require('./copyButton')
+const CopyButton = require('./copy/copy-button')
 
 module.exports = connect(mapStateToProps)(ExportAccountView)
 

old-ui/app/components/copy/copy-button.js

@@ -0,0 +1,42 @@
+import React from 'react'
+import classNames from 'classnames'
+import CopyComponent from './copy-component'
+
+class CopyButton extends CopyComponent {
+
+  // As parameters, accepts:
+  // "value", which is the value to copy (mandatory)
+  // "title", which is the text to show on hover (optional, defaults to 'Copy')
+  render () {
+    const { value, display, title, style, isWhite, tooltipPosition } = this.props
+    const { copied } = this.state
+
+    const message = copied ? 'Copied' : title || ' Copy '
+    const defaultCopyStyles = ['clipboard', 'cursor-pointer']
+    const originalStyle = {
+      display: display || 'flex',
+      alignItems: 'center',
+    }
+    const fullStyle = Object.assign(originalStyle, style)
+
+    const tooltipChild = (
+      <i
+        style={{
+          marginLeft: '5px',
+        }}
+        className={classNames(defaultCopyStyles, {white: isWhite})}
+        onClick={(event) => this.onClick(event, value)}
+      />
+    )
+
+    return (
+      <div className="copy-button"
+        style={fullStyle}
+      >
+        {this.renderTooltip(message, tooltipPosition, tooltipChild)}
+      </div>
+    )
+  }
+}
+
+module.exports = CopyButton

old-ui/app/components/copy/copy-component.js

@@ -0,0 +1,51 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import copyToClipboard from 'copy-to-clipboard'
+import Tooltip from '../tooltip'
+
+class CopyComponent extends Component {
+  constructor (props) {
+    super(props)
+    this.timerID = null
+    this.state = {
+      copied: false,
+    }
+  }
+
+  static propTypes = {
+    style: PropTypes.object,
+    tooltipPosition: PropTypes.oneOf(['left', 'right', 'top', 'bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight']),
+  }
+
+  onClick (event, value) {
+    event.preventDefault()
+    event.stopPropagation()
+    copyToClipboard(value)
+    this.debounceRestore()
+  }
+
+  componentWillUnmount () {
+    clearTimeout(this.timerID)
+  }
+
+  renderTooltip (message, position, children) {
+    return (
+      <Tooltip
+        title={message}
+        position={position}
+      >
+      {children}
+      </Tooltip>
+    )
+  }
+
+  debounceRestore () {
+    this.setState({ copied: true })
+    clearTimeout(this.timerID)
+    this.timerID = setTimeout(() => {
+      this.setState({ copied: false })
+    }, 850)
+  }
+}
+
+module.exports = CopyComponent

old-ui/app/components/copy/copyable.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import CopyComponent from './copy-component'
+
+class Copyable extends CopyComponent {
+
+  render () {
+    const { value, children } = this.props
+    const { copied } = this.state
+
+    const message = copied ? 'Copied!' : 'Copy'
+    const position = 'bottom'
+    const tooltipChild = (
+      <span
+        style={{
+          cursor: 'pointer',
+        }}
+        onClick={(event) => this.onClick(event, value)}
+      >{children}
+      </span>
+    )
+
+    return (
+      this.renderTooltip(message, position, tooltipChild)
+    )
+  }
+
+}
+
+module.exports = Copyable

old-ui/app/components/copyButton.js

@@ -1,65 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const classNames = require('classnames')
-const inherits = require('util').inherits
-const copyToClipboard = require('copy-to-clipboard')
-
-const Tooltip = require('./tooltip')
-
-module.exports = CopyButton
-
-inherits(CopyButton, Component)
-function CopyButton () {
-  Component.call(this)
-}
-
-// As parameters, accepts:
-// "value", which is the value to copy (mandatory)
-// "title", which is the text to show on hover (optional, defaults to 'Copy')
-CopyButton.prototype.render = function () {
-  const props = this.props
-  const state = this.state || {}
-
-  const value = props.value
-  const display = props.display
-  const copied = state.copied
-
-  const message = copied ? 'Copied' : props.title || ' Copy '
-  const defaultCopyStyles = ['clipboard', 'cursor-pointer']
-  const originalStyle = {
-    display: display || 'flex',
-    alignItems: 'center',
-  }
-  const style = Object.assign(originalStyle, this.props.style)
-
-  return h('.copy-button', {
-    style,
-  }, [
-    h(Tooltip, {
-      title: message,
-      position: this.props.tooltipPosition,
-    }, [
-      h('i', {
-        style: {
-          marginLeft: '5px',
-        },
-        className: classNames(defaultCopyStyles, {white: props.isWhite}),
-        onClick: (event) => {
-          event.preventDefault()
-          event.stopPropagation()
-          copyToClipboard(value)
-          this.debounceRestore()
-        },
-      }),
-    ]),
-
-  ])
-}
-
-CopyButton.prototype.debounceRestore = function () {
-  this.setState({ copied: true })
-  clearTimeout(this.timeout)
-  this.timeout = setTimeout(() => {
-    this.setState({ copied: false })
-  }, 850)
-}

old-ui/app/components/copyable.js

@@ -1,46 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-
-const Tooltip = require('./tooltip')
-const copyToClipboard = require('copy-to-clipboard')
-
-module.exports = Copyable
-
-inherits(Copyable, Component)
-function Copyable () {
-  Component.call(this)
-  this.state = {
-    copied: false,
-  }
-}
-
-Copyable.prototype.render = function () {
-  const props = this.props
-  const state = this.state
-  const { value, children } = props
-  const { copied } = state
-
-  return h(Tooltip, {
-    title: copied ? 'Copied!' : 'Copy',
-    position: 'bottom',
-  }, h('span', {
-    style: {
-      cursor: 'pointer',
-    },
-    onClick: (event) => {
-      event.preventDefault()
-      event.stopPropagation()
-      copyToClipboard(value)
-      this.debounceRestore()
-    },
-  }, children))
-}
-
-Copyable.prototype.debounceRestore = function () {
-  this.setState({ copied: true })
-  clearTimeout(this.timeout)
-  this.timeout = setTimeout(() => {
-    this.setState({ copied: false })
-  }, 850)
-}

old-ui/app/components/pending-tx.js

@@ -10,7 +10,7 @@ const BN = ethUtil.BN
 const hexToBn = require('../../../app/scripts/lib/hex-to-bn')
 const util = require('../util')
 const MiniAccountPanel = require('./mini-account-panel')
-const Copyable = require('./copyable')
+const Copyable = require('./copy/copyable')
 const EthBalance = require('./eth-balance')
 const TokenBalance = require('./token-balance')
 const addressSummary = util.addressSummary

old-ui/app/components/send/send-contract.js

@@ -11,7 +11,7 @@ import actions from '../../../../ui/app/actions'
 import abiEncoder from 'web3-eth-abi'
 import Web3 from 'web3'
 import copyToClipboard from 'copy-to-clipboard'
-import CopyButton from '../copyButton'
+import CopyButton from '../copy/copy-button'
 
 class SendTransactionField extends Component {
 	constructor (props) {

old-ui/app/components/shift-list-item.js

@@ -7,7 +7,7 @@ const ethNetProps = require('eth-net-props')
 const actions = require('../../../ui/app/actions')
 const addressSummary = require('../util').addressSummary
 
-const CopyButton = require('./copyButton')
+const CopyButton = require('./copy/copy-button')
 const EthBalance = require('./eth-balance')
 const Tooltip = require('./tooltip')
 

old-ui/app/components/transaction-list-item.js

@@ -5,7 +5,7 @@ const connect = require('react-redux').connect
 
 const EthBalance = require('./eth-balance')
 const addressSummary = require('../util').addressSummary
-const CopyButton = require('./copyButton')
+const CopyButton = require('./copy/copy-button')
 const vreme = new (require('vreme'))()
 const Tooltip = require('./tooltip')
 const numberToBN = require('number-to-bn')