diff options
author | Dan Finlay <dan@danfinlay.com> | 2017-07-21 03:38:38 +0800 |
---|---|---|
committer | Dan Finlay <dan@danfinlay.com> | 2017-07-21 03:38:38 +0800 |
commit | 86d367957fe8ac04462f716fe0ba2bfa4e5ff3f6 (patch) | |
tree | b4a6805e5e2a4de48c880d80f4b87d1f3b560a18 /responsive-ui/app/components/copyable.js | |
parent | 199587383b022a17d56adcb56d6a99ceba71fec7 (diff) | |
download | tangerine-wallet-browser-86d367957fe8ac04462f716fe0ba2bfa4e5ff3f6.tar.gz tangerine-wallet-browser-86d367957fe8ac04462f716fe0ba2bfa4e5ff3f6.tar.zst tangerine-wallet-browser-86d367957fe8ac04462f716fe0ba2bfa4e5ff3f6.zip |
Move responsive ui into its own folder for easier merges
Diffstat (limited to 'responsive-ui/app/components/copyable.js')
-rw-r--r-- | responsive-ui/app/components/copyable.js | 46 |
1 files changed, 46 insertions, 0 deletions
diff --git a/responsive-ui/app/components/copyable.js b/responsive-ui/app/components/copyable.js new file mode 100644 index 000000000..a4f6f4bc6 --- /dev/null +++ b/responsive-ui/app/components/copyable.js @@ -0,0 +1,46 @@ +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) +} |