Commit c4e55972 authored by ioedeveloper's avatar ioedeveloper

Added tooltip for copy to clipboard

parent 9cdbea29
import React from 'react' import React, { useState } from 'react'
import copy from 'copy-text-to-clipboard' import copy from 'copy-text-to-clipboard'
import { OverlayTrigger, Tooltip } from 'react-bootstrap'
import './copy-to-clipboard.css' import './copy-to-clipboard.css'
export const CopyToClipboard = ({ content, tip='Copy value to clipboard', icon='fa-copy', ...otherProps }) => { export const CopyToClipboard = ({ content, tip='Copy', icon='fa-copy', ...otherProps }) => {
const [message, setMessage] = useState(tip)
const handleClick = () => { const handleClick = () => {
if (content) { // module `copy` keeps last copied thing in the memory, so don't show tooltip if nothing is copied, because nothing was added to memory if (content && content !== '') { // module `copy` keeps last copied thing in the memory, so don't show tooltip if nothing is copied, because nothing was added to memory
try { try {
if (typeof content !== 'string') { if (typeof content !== 'string') {
content = JSON.stringify(content, null, '\t') content = JSON.stringify(content, null, '\t')
...@@ -14,21 +16,28 @@ export const CopyToClipboard = ({ content, tip='Copy value to clipboard', icon=' ...@@ -14,21 +16,28 @@ export const CopyToClipboard = ({ content, tip='Copy value to clipboard', icon='
console.error(e) console.error(e)
} }
copy(content) copy(content)
// addTooltip('Copied value to clipboard.') setMessage('Copied')
} else { } else {
// addTooltip('Cannot copy empty content!') setMessage('Cannot copy empty content!')
} }
} }
const reset = () => {
setTimeout(() => setMessage('Copy'), 500)
}
return ( return (
<i <a href="#" onClick={handleClick} onMouseLeave={reset}>
title={tip} <OverlayTrigger placement="right" overlay={
className={`copyIcon far ${icon} p-2`} <Tooltip id="overlay-tooltip">
data-id="copyToClipboardCopyIcon" { message }
aria-hidden="true" </Tooltip>
{...otherProps} }>
onClick={handleClick} <i className={`far ${icon} ml-1 p-2`} data-id="copyToClipboardCopyIcon" aria-hidden="true"
></i> {...otherProps}
></i>
</OverlayTrigger>
</a>
) )
} }
......
This diff is collapsed.
...@@ -139,6 +139,9 @@ ...@@ -139,6 +139,9 @@
"http-server": "^0.11.1", "http-server": "^0.11.1",
"merge": "^1.2.0", "merge": "^1.2.0",
"npm-install-version": "^6.0.2", "npm-install-version": "^6.0.2",
"react": "16.13.1",
"react-bootstrap": "^1.3.0",
"react-dom": "16.13.1",
"signale": "^1.4.0", "signale": "^1.4.0",
"time-stamp": "^2.2.0", "time-stamp": "^2.2.0",
"winston": "^3.3.3", "winston": "^3.3.3",
...@@ -151,9 +154,7 @@ ...@@ -151,9 +154,7 @@
"commander": "^2.20.3", "commander": "^2.20.3",
"fs-extra": "^3.0.1", "fs-extra": "^3.0.1",
"isbinaryfile": "^3.0.2", "isbinaryfile": "^3.0.2",
"ws": "^7.3.0", "ws": "^7.3.0"
"react": "16.13.1",
"react-dom": "16.13.1"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.4.5", "@babel/core": "^7.4.5",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment