diff options
author | Dan Finlay <dan@danfinlay.com> | 2017-06-05 13:21:37 +0800 |
---|---|---|
committer | Dan Finlay <dan@danfinlay.com> | 2017-06-05 13:22:59 +0800 |
commit | 773b36b0de5613f1f6bda1caba08ee240a14ab32 (patch) | |
tree | 14551d4a3aa3f57481da9fc1b50d938251d68f7f /ui/app/components/copyable.js | |
parent | ec097c8e3473826f29d988bb6e754345f494913e (diff) | |
download | tangerine-wallet-browser-773b36b0de5613f1f6bda1caba08ee240a14ab32.tar.gz tangerine-wallet-browser-773b36b0de5613f1f6bda1caba08ee240a14ab32.tar.zst tangerine-wallet-browser-773b36b0de5613f1f6bda1caba08ee240a14ab32.zip |
Move address copying into reusable component
"copyable" component allows any elements to be wrapped to include:
- a tool tip that changes/debounces its label when clicked.
- a customizable copyable value.
Fixes #1539
Diffstat (limited to 'ui/app/components/copyable.js')
-rw-r--r-- | ui/app/components/copyable.js | 49 |
1 files changed, 49 insertions, 0 deletions
diff --git a/ui/app/components/copyable.js b/ui/app/components/copyable.js new file mode 100644 index 000000000..9b785a77e --- /dev/null +++ b/ui/app/components/copyable.js @@ -0,0 +1,49 @@ +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', + style: { + cursor: 'pointer', + }, + }, 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) +} |