Refactor copy component
This commit is contained in:
parent
c825e9e951
commit
87ead6f1a9
|
@ -14,7 +14,7 @@ const EditableLabel = require('./components/editable-label')
|
||||||
const TabBar = require('./components/tab-bar')
|
const TabBar = require('./components/tab-bar')
|
||||||
const TokenList = require('./components/token-list')
|
const TokenList = require('./components/token-list')
|
||||||
const AccountDropdowns = require('./components/account-dropdowns').AccountDropdowns
|
const AccountDropdowns = require('./components/account-dropdowns').AccountDropdowns
|
||||||
const CopyButton = require('./components/copyButton')
|
const CopyButton = require('./components/copy/copy-button')
|
||||||
const ToastComponent = require('./components/toast')
|
const ToastComponent = require('./components/toast')
|
||||||
import { getMetaMaskAccounts } from '../../ui/app/selectors'
|
import { getMetaMaskAccounts } from '../../ui/app/selectors'
|
||||||
|
|
||||||
|
|
|
@ -4,7 +4,7 @@ const h = require('react-hyperscript')
|
||||||
const {qrcode: qrCode} = require('qrcode-npm')
|
const {qrcode: qrCode} = require('qrcode-npm')
|
||||||
const {connect} = require('react-redux')
|
const {connect} = require('react-redux')
|
||||||
const {isHexPrefixed} = require('ethereumjs-util')
|
const {isHexPrefixed} = require('ethereumjs-util')
|
||||||
const CopyButton = require('./components/copyButton')
|
const CopyButton = require('./components/copy/copy-button')
|
||||||
|
|
||||||
class AccountQrScreen extends PureComponent {
|
class AccountQrScreen extends PureComponent {
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
|
|
|
@ -4,7 +4,7 @@ import { connect } from 'react-redux'
|
||||||
import actions from '../../../../ui/app/actions'
|
import actions from '../../../../ui/app/actions'
|
||||||
import Web3 from 'web3'
|
import Web3 from 'web3'
|
||||||
import log from 'loglevel'
|
import log from 'loglevel'
|
||||||
import CopyButton from '../../components/copyButton'
|
import CopyButton from '../../components/copy/copy-button'
|
||||||
import ErrorComponent from '../../components/error'
|
import ErrorComponent from '../../components/error'
|
||||||
import { getFullABI } from './helpers'
|
import { getFullABI } from './helpers'
|
||||||
|
|
||||||
|
|
|
@ -5,7 +5,7 @@ const connect = require('react-redux').connect
|
||||||
const actions = require('../../ui/app/actions')
|
const actions = require('../../ui/app/actions')
|
||||||
const Tooltip = require('./components/tooltip.js')
|
const Tooltip = require('./components/tooltip.js')
|
||||||
const ethUtil = require('ethereumjs-util')
|
const ethUtil = require('ethereumjs-util')
|
||||||
const Copyable = require('./components/copyable')
|
const Copyable = require('./components/copy/copyable')
|
||||||
const addressSummary = require('./util').addressSummary
|
const addressSummary = require('./util').addressSummary
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -5,7 +5,7 @@ const exportAsFile = require('../util').exportAsFile
|
||||||
const actions = require('../../../ui/app/actions')
|
const actions = require('../../../ui/app/actions')
|
||||||
const ethUtil = require('ethereumjs-util')
|
const ethUtil = require('ethereumjs-util')
|
||||||
const connect = require('react-redux').connect
|
const connect = require('react-redux').connect
|
||||||
const CopyButton = require('./copyButton')
|
const CopyButton = require('./copy/copy-button')
|
||||||
|
|
||||||
module.exports = connect(mapStateToProps)(ExportAccountView)
|
module.exports = connect(mapStateToProps)(ExportAccountView)
|
||||||
|
|
||||||
|
|
|
@ -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
|
|
@ -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
|
|
@ -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
|
|
@ -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)
|
|
||||||
}
|
|
|
@ -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)
|
|
||||||
}
|
|
|
@ -10,7 +10,7 @@ const BN = ethUtil.BN
|
||||||
const hexToBn = require('../../../app/scripts/lib/hex-to-bn')
|
const hexToBn = require('../../../app/scripts/lib/hex-to-bn')
|
||||||
const util = require('../util')
|
const util = require('../util')
|
||||||
const MiniAccountPanel = require('./mini-account-panel')
|
const MiniAccountPanel = require('./mini-account-panel')
|
||||||
const Copyable = require('./copyable')
|
const Copyable = require('./copy/copyable')
|
||||||
const EthBalance = require('./eth-balance')
|
const EthBalance = require('./eth-balance')
|
||||||
const TokenBalance = require('./token-balance')
|
const TokenBalance = require('./token-balance')
|
||||||
const addressSummary = util.addressSummary
|
const addressSummary = util.addressSummary
|
||||||
|
|
|
@ -11,7 +11,7 @@ import actions from '../../../../ui/app/actions'
|
||||||
import abiEncoder from 'web3-eth-abi'
|
import abiEncoder from 'web3-eth-abi'
|
||||||
import Web3 from 'web3'
|
import Web3 from 'web3'
|
||||||
import copyToClipboard from 'copy-to-clipboard'
|
import copyToClipboard from 'copy-to-clipboard'
|
||||||
import CopyButton from '../copyButton'
|
import CopyButton from '../copy/copy-button'
|
||||||
|
|
||||||
class SendTransactionField extends Component {
|
class SendTransactionField extends Component {
|
||||||
constructor (props) {
|
constructor (props) {
|
||||||
|
|
|
@ -7,7 +7,7 @@ const ethNetProps = require('eth-net-props')
|
||||||
const actions = require('../../../ui/app/actions')
|
const actions = require('../../../ui/app/actions')
|
||||||
const addressSummary = require('../util').addressSummary
|
const addressSummary = require('../util').addressSummary
|
||||||
|
|
||||||
const CopyButton = require('./copyButton')
|
const CopyButton = require('./copy/copy-button')
|
||||||
const EthBalance = require('./eth-balance')
|
const EthBalance = require('./eth-balance')
|
||||||
const Tooltip = require('./tooltip')
|
const Tooltip = require('./tooltip')
|
||||||
|
|
||||||
|
|
|
@ -5,7 +5,7 @@ const connect = require('react-redux').connect
|
||||||
|
|
||||||
const EthBalance = require('./eth-balance')
|
const EthBalance = require('./eth-balance')
|
||||||
const addressSummary = require('../util').addressSummary
|
const addressSummary = require('../util').addressSummary
|
||||||
const CopyButton = require('./copyButton')
|
const CopyButton = require('./copy/copy-button')
|
||||||
const vreme = new (require('vreme'))()
|
const vreme = new (require('vreme'))()
|
||||||
const Tooltip = require('./tooltip')
|
const Tooltip = require('./tooltip')
|
||||||
const numberToBN = require('number-to-bn')
|
const numberToBN = require('number-to-bn')
|
||||||
|
|
Loading…
Reference in New Issue