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 { OverlayTrigger, Tooltip } from 'react-bootstrap'
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 = () => {
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 {
if (typeof content !== 'string') {
content = JSON.stringify(content, null, '\t')
......@@ -14,21 +16,28 @@ export const CopyToClipboard = ({ content, tip='Copy value to clipboard', icon='
console.error(e)
}
copy(content)
// addTooltip('Copied value to clipboard.')
setMessage('Copied')
} else {
// addTooltip('Cannot copy empty content!')
setMessage('Cannot copy empty content!')
}
}
const reset = () => {
setTimeout(() => setMessage('Copy'), 500)
}
return (
<i
title={tip}
className={`copyIcon far ${icon} p-2`}
data-id="copyToClipboardCopyIcon"
aria-hidden="true"
<a href="#" onClick={handleClick} onMouseLeave={reset}>
<OverlayTrigger placement="right" overlay={
<Tooltip id="overlay-tooltip">
{ message }
</Tooltip>
}>
<i className={`far ${icon} ml-1 p-2`} data-id="copyToClipboardCopyIcon" aria-hidden="true"
{...otherProps}
onClick={handleClick}
></i>
</OverlayTrigger>
</a>
)
}
......
This diff is collapsed.
......@@ -139,6 +139,9 @@
"http-server": "^0.11.1",
"merge": "^1.2.0",
"npm-install-version": "^6.0.2",
"react": "16.13.1",
"react-bootstrap": "^1.3.0",
"react-dom": "16.13.1",
"signale": "^1.4.0",
"time-stamp": "^2.2.0",
"winston": "^3.3.3",
......@@ -151,9 +154,7 @@
"commander": "^2.20.3",
"fs-extra": "^3.0.1",
"isbinaryfile": "^3.0.2",
"ws": "^7.3.0",
"react": "16.13.1",
"react-dom": "16.13.1"
"ws": "^7.3.0"
},
"devDependencies": {
"@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