Convert CopyButton component to JSX (#7513)

Co-Authored-By: Mark Stacey <markjstacey@gmail.com>

ui/app/components/ui/copyButton.js

@@ -1,66 +1,66 @@
-const Component = require('react').Component
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const copyToClipboard = require('copy-to-clipboard')
-const connect = require('react-redux').connect
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
 
+const copyToClipboard = require('copy-to-clipboard')
 const Tooltip = require('./tooltip')
 
-CopyButton.contextTypes = {
-  t: PropTypes.func,
-}
-
-module.exports = connect()(CopyButton)
-
-
-inherits(CopyButton, Component)
-function CopyButton () {
-  Component.call(this)
-}
+class CopyButton extends Component {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
 
-// 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 || {}
+  static defaultProps = {
+    title: null,
+  }
 
-  const value = props.value
-  const copied = state.copied
+  static propTypes = {
+    value: PropTypes.string.isRequired,
+    title: PropTypes.string,
+  }
 
-  const message = copied ? this.context.t('copiedButton') : props.title || this.context.t('copyButton')
+  state = {}
 
-  return h('.copy-button', {
-    style: {
-      display: 'flex',
-      alignItems: 'center',
-    },
-  }, [
+  debounceRestore = () => {
+    this.setState({ copied: true })
+    clearTimeout(this.timeout)
+    this.timeout = setTimeout(() => {
+      this.setState({ copied: false })
+    }, 850)
+  }
 
-    h(Tooltip, {
-      title: message,
-    }, [
-      h('i.fa.fa-clipboard.cursor-pointer.color-orange', {
-        style: {
-          margin: '5px',
-        },
-        onClick: (event) => {
-          event.preventDefault()
-          event.stopPropagation()
-          copyToClipboard(value)
-          this.debounceRestore()
-        },
-      }),
-    ]),
+  render () {
+    const state = this.state
+    const props = this.props
+    const value = props.value
+    const copied = state.copied
+    const message = copied ? this.context.t('copiedButton') : props.title || this.context.t('copyButton')
 
-  ])
+    return (
+      <div
+        className="copy-button"
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+        }}
+      >
+        <Tooltip title={message}>
+          <i
+            className="fa fa-clipboard cursor-pointer color-orange"
+            style={{
+              margin: '5px',
+            }}
+            onClick={(event) => {
+              event.preventDefault()
+              event.stopPropagation()
+              copyToClipboard(value)
+              this.debounceRestore()
+            }}
+          />
+        </Tooltip>
+      </div>
+    )
+  }
 }
 
-CopyButton.prototype.debounceRestore = function () {
-  this.setState({ copied: true })
-  clearTimeout(this.timeout)
-  this.timeout = setTimeout(() => {
-    this.setState({ copied: false })
-  }, 850)
-}
+module.exports = connect()(CopyButton)