diff --git a/src/FitButtonBar/FitButtonBar.tsx b/src/FitButtonBar/FitButtonBar.tsx index 7ebf135..80bfb46 100644 --- a/src/FitButtonBar/FitButtonBar.tsx +++ b/src/FitButtonBar/FitButtonBar.tsx @@ -1,9 +1,11 @@ import clsx from "clsx"; import React from "react"; +import { EsiFit, ShipSnapshotContext } from "../ShipSnapshotProvider"; import { LocalFitContext } from "../LocalFitProvider"; import { ModalDialog } from "../ModalDialog"; -import { EsiFit, ShipSnapshotContext } from "../ShipSnapshotProvider"; +import { useClipboard } from "../Helpers/Clipboard"; +import { useEveShipFitLink } from "../EveShipFitLink"; import { useFormatAsEft } from "../FormatAsEft"; import { useFormatEftToEsi } from "../FormatEftToEsi"; @@ -72,6 +74,7 @@ const ClipboardButton = () => { const shipSnapshot = React.useContext(ShipSnapshotContext); const toEft = useFormatAsEft(); const eftToEsiFit = useFormatEftToEsi(); + const { copy, copied } = useClipboard(); const [isPopupOpen, setIsPopupOpen] = React.useState(false); const [isPasteOpen, setIsPasteOpen] = React.useState(false); @@ -81,10 +84,10 @@ const ClipboardButton = () => { const eft = toEft(); if (eft === undefined) return; - navigator.clipboard.writeText(eft); + copy(eft); setIsPopupOpen(false); - }, [toEft]); + }, [copy, toEft]); const importFromClipboard = React.useCallback(() => { if (!shipSnapshot.loaded) return; @@ -112,7 +115,7 @@ const ClipboardButton = () => { return <>
setIsPopupOpen(true)} onMouseOut={() => setIsPopupOpen(false)}>
- Clipboard + {copied ? "In Clipboard" : "Clipboard"}
@@ -142,6 +145,24 @@ const ClipboardButton = () => { } +const ShareButton = () => { + const link = useEveShipFitLink(); + const { copy, copied } = useClipboard(); + + const onClick = React.useCallback((e: React.MouseEvent) => { + e.preventDefault(); + copy(link); + }, [copy, link]); + + return <> +
+
+ {copied ? "In Clipboard" : "Share Link"} +
+
+ +} + const RenameButton = () => { const shipSnapshot = React.useContext(ShipSnapshotContext); @@ -183,6 +204,7 @@ export const FitButtonBar = () => { return
+
}; diff --git a/src/Helpers/Clipboard.tsx b/src/Helpers/Clipboard.tsx new file mode 100644 index 0000000..5d1806f --- /dev/null +++ b/src/Helpers/Clipboard.tsx @@ -0,0 +1,21 @@ +import React from "react"; + +/* 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 }; +} diff --git a/src/ShipFit/FitLink.tsx b/src/ShipFit/FitLink.tsx index 0b5efc6..b09e01d 100644 --- a/src/ShipFit/FitLink.tsx +++ b/src/ShipFit/FitLink.tsx @@ -1,6 +1,7 @@ import React from "react"; import { useEveShipFitLink } from "../EveShipFitLink"; +import { useClipboard } from "../Helpers/Clipboard"; import styles from "./ShipFit.module.css"; @@ -16,26 +17,6 @@ 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 isRemoteViewer = useIsRemoteViewer();