diff options
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | ui/app/components/copyButton.js | 51 | ||||
| -rw-r--r-- | ui/css.js | 1 |
3 files changed, 43 insertions, 10 deletions
diff --git a/package.json b/package.json index cafca2672..efa652730 100644 --- a/package.json +++ b/package.json @@ -54,6 +54,7 @@ "react-dom": "^15.0.2", "react-hyperscript": "^2.2.2", "react-redux": "^4.4.5", + "react-tooltip-component": "^0.3.0", "readable-stream": "^2.1.2", "redux": "^3.0.5", "redux-logger": "^2.3.1", diff --git a/ui/app/components/copyButton.js b/ui/app/components/copyButton.js index 1fdc3f822..182d7a670 100644 --- a/ui/app/components/copyButton.js +++ b/ui/app/components/copyButton.js @@ -3,6 +3,8 @@ const h = require('react-hyperscript') const inherits = require('util').inherits const copyToClipboard = require('copy-to-clipboard') +const Tooltip = require('react-tooltip-component') + module.exports = CopyButton inherits(CopyButton, Component) @@ -10,22 +12,51 @@ 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 copied = state.copied + + const message = copied ? 'Copied' : props.title || ' Copy ' - return h('i.fa.fa-clipboard.cursor-pointer.color-orange', { - title: props.title || 'Copy', + return h('.copy-button', { style: { display: 'flex', - justifyContent: 'center', alignItems: 'center', - margin: '5px', }, - onClick: (event) => { - event.preventDefault() - event.stopPropagation() - copyToClipboard(value) - }, - }) + }, [ + + h(Tooltip, { + position: 'top', + title: message, + }, [ + h('i.fa.fa-clipboard.cursor-pointer.color-orange', { + style: { + margin: '5px', + }, + 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) + } @@ -9,6 +9,7 @@ var cssFiles = { 'lib.css': fs.readFileSync(path.join(__dirname, '/app/css/lib.css'), 'utf8'), 'index.css': fs.readFileSync(path.join(__dirname, '/app/css/index.css'), 'utf8'), 'transitions.css': fs.readFileSync(path.join(__dirname, '/app/css/transitions.css'), 'utf8'), + 'react-tooltip-component.css': fs.readFileSync(path.join(__dirname, '..', 'node_modules', 'react-tooltip-component', 'dist', 'react-tooltip-component.css'), 'utf8'), } function bundleCss () { |