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();