Add popover for clipboard notification
This commit is contained in:
parent
1cc76058d2
commit
1c7b806575
|
@ -1,14 +1,33 @@
|
||||||
import React from "react";
|
import React, { useState } from "react";
|
||||||
|
|
||||||
type SignatureProps = {
|
type SignatureProps = {
|
||||||
text: string
|
text: string
|
||||||
}
|
}
|
||||||
|
|
||||||
function Signature({ text }: SignatureProps) {
|
const popover = (
|
||||||
const copyToClipboard = () => navigator.clipboard.writeText(text);
|
<div className="popover fade bs-popover-right show">
|
||||||
// TODO: how to make onClick pop up a toast or other notification?
|
<div className="arrow" />
|
||||||
|
<div className="popover-body">Copied!</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
return <code onClick={copyToClipboard}>{text}</code>;
|
function Signature({ text }: SignatureProps) {
|
||||||
|
const [showPopover, setShowPopover] = useState(false);
|
||||||
|
|
||||||
|
const copyToClipboard = () => navigator.clipboard.writeText(text);
|
||||||
|
const handleClick = () =>
|
||||||
|
copyToClipboard()
|
||||||
|
.then(() => {
|
||||||
|
setShowPopover(true);
|
||||||
|
setTimeout(setShowPopover.bind(null, false), 2500);
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="signature">
|
||||||
|
<code onClick={handleClick}>{text}</code>
|
||||||
|
{showPopover && popover}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Signature;
|
export default Signature;
|
||||||
|
|
|
@ -10,6 +10,20 @@ code {
|
||||||
color: $black;
|
color: $black;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.signature {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popover {
|
||||||
|
top: -1rem;
|
||||||
|
right: -5.12rem;
|
||||||
|
left: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.modal.show {
|
.modal.show {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue