From 773b36b0de5613f1f6bda1caba08ee240a14ab32 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Sun, 4 Jun 2017 22:21:37 -0700 Subject: 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 --- ui/app/components/copyable.js | 49 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 49 insertions(+) create mode 100644 ui/app/components/copyable.js (limited to 'ui/app/components/copyable.js') 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) +} -- cgit From 8dc6aa9c4c4f11e08eee0688c210324b313b710b Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Sun, 4 Jun 2017 22:26:32 -0700 Subject: Remove dead style code --- ui/app/components/copyable.js | 3 --- 1 file changed, 3 deletions(-) (limited to 'ui/app/components/copyable.js') diff --git a/ui/app/components/copyable.js b/ui/app/components/copyable.js index 9b785a77e..a4f6f4bc6 100644 --- a/ui/app/components/copyable.js +++ b/ui/app/components/copyable.js @@ -24,9 +24,6 @@ Copyable.prototype.render = function () { return h(Tooltip, { title: copied ? 'Copied!' : 'Copy', position: 'bottom', - style: { - cursor: 'pointer', - }, }, h('span', { style: { cursor: 'pointer', -- cgit