diff --git a/src/ShipFit/FitLink.tsx b/src/ShipFit/FitLink.tsx index 8661dc5..57e18a9 100644 --- a/src/ShipFit/FitLink.tsx +++ b/src/ShipFit/FitLink.tsx @@ -16,9 +16,39 @@ const useIsRemoteViewer = () => { return remote; } +/* Based on https://github.com/mantinedev/mantine/blob/master/src/mantine-hooks/src/use-clipboard/use-clipboard.ts */ +export function useClipboard({ timeout = 2000 } = {}) { + const [copied, setCopied] = React.useState(false); + const [copyTimeout, setCopyTimeout] = React.useState(undefined); + + const handleCopyResult = (value: boolean) => { + if (copyTimeout !== undefined) { + window.clearTimeout(copyTimeout); + } + setCopyTimeout(window.setTimeout(() => setCopied(false), timeout)); + setCopied(value); + }; + + const copy = (valueToCopy: string) => { + navigator.clipboard.writeText(valueToCopy).then(() => handleCopyResult(true)); + }; + + return { copy, copied }; +} + export const FitLink = () => { const link = useEveShipFitLink(); - const linkText = useIsRemoteViewer() ? "open on eveship.fit" : "link to fit"; + const isRemoteViewer = useIsRemoteViewer(); + const { copy, copied } = useClipboard(); + + const linkText = isRemoteViewer ? "open on eveship.fit" : "share fit"; + const linkPropsClick = React.useCallback((e: React.MouseEvent) => { + e.preventDefault(); + copy(link); + }, [copy, link]); + const linkProps = { + onClick: isRemoteViewer ? undefined : linkPropsClick, + }; return
@@ -27,9 +57,9 @@ export const FitLink = () => { fill="none" d="M18,365 A25,25 0 0,1 712,365" /> - + - {linkText} + {copied ? "copied to clipboard" : linkText}