misc_pterodactyl-panel/resources/scripts/components/elements/CopyOnClick.tsx

64 lines
1.7 KiB
TypeScript
Raw Normal View History

import React, { useCallback, useEffect, useState } from 'react';
import CopyToClipboard from 'react-copy-to-clipboard';
import tw from 'twin.macro';
import styled, { keyframes } from 'styled-components/macro';
import Fade from '@/components/elements/Fade';
import { SwitchTransition } from 'react-transition-group';
const fade = keyframes`
from { opacity: 0 }
to { opacity: 1 }
`;
const Toast = styled.div`
${tw`fixed z-50 bottom-0 left-0 mb-4 w-full flex justify-end pr-4`};
animation: ${fade} 250ms linear;
& > div {
${tw`rounded px-4 py-2 text-white bg-neutral-800 border border-neutral-900`};
}
`;
const CopyOnClick: React.FC<{ text: string }> = ({ text, children }) => {
const [ copied, setCopied ] = useState(false);
useEffect(() => {
if (!copied) return;
const timeout = setTimeout(() => {
setCopied(false);
}, 2500);
return () => {
clearTimeout(timeout);
};
}, [ copied ]);
const onCopy = useCallback(() => {
setCopied(true);
}, []);
return (
<>
<SwitchTransition>
<Fade timeout={250} key={copied ? 'visible' : 'invisible'}>
{copied ?
<Toast>
<div>
<p>Copied &quot;{text}&quot; to clipboard.</p>
</div>
</Toast>
:
<></>
}
</Fade>
</SwitchTransition>
<CopyToClipboard onCopy={onCopy} text={text} options={{ debug: true }}>
{children}
</CopyToClipboard>
</>
);
};
export default CopyOnClick;