diff --git a/src/FitButtonBar/FitButtonBar.module.css b/src/FitButtonBar/FitButtonBar.module.css index b213c95..bfc7ad6 100644 --- a/src/FitButtonBar/FitButtonBar.module.css +++ b/src/FitButtonBar/FitButtonBar.module.css @@ -25,6 +25,10 @@ height: 20px; line-height: 20px; } +.buttonMax { + text-align: center; + width: calc(100% - 40px - 2px); +} .button:hover { background-color: #864735; @@ -67,21 +71,41 @@ padding: 10px; } +.popup > div > .button { + margin-top: 10px; +} +.popup > div > .button:first-child { + margin-top: 0; +} + .renameEdit { margin-right: 10px; } .alreadyExists { - text-align: center; max-width: 50%; } .alreadyExistsButtons { margin-top: 10px; - text-align: center; } .alreadyExistsButtons .button { margin-right: 10px; - width: 35%; + text-align: center; + width: calc(50% - 48px); +} +.alreadyExistsButtons .button:last-child { + margin-right: 0; +} + +.paste .button { + text-align: center; + width: calc(100% - 42px); +} +.pasteTextarea { + height: 60px; + margin-bottom: 10px; + margin-top: 4px; + width: 300px; } diff --git a/src/FitButtonBar/FitButtonBar.stories.tsx b/src/FitButtonBar/FitButtonBar.stories.tsx index 1d17245..0f8cc55 100644 --- a/src/FitButtonBar/FitButtonBar.stories.tsx +++ b/src/FitButtonBar/FitButtonBar.stories.tsx @@ -26,7 +26,7 @@ const withEveDataProvider: Decorator> = (Story, context) = -
+
diff --git a/src/FitButtonBar/FitButtonBar.tsx b/src/FitButtonBar/FitButtonBar.tsx index 8996060..74ef626 100644 --- a/src/FitButtonBar/FitButtonBar.tsx +++ b/src/FitButtonBar/FitButtonBar.tsx @@ -6,6 +6,8 @@ import { ModalDialog } from "../ModalDialog"; import { ShipSnapshotContext } from "../ShipSnapshotProvider"; import styles from "./FitButtonBar.module.css"; +import { useFormatAsEft } from "../FormatAsEft"; +import { useFormatEftToEsi } from "../FormatEftToEsi"; const SaveButton = () => { const shipSnapshot = React.useContext(ShipSnapshotContext); @@ -66,6 +68,75 @@ const SaveButton = () => { } +const ClipboardButton = () => { + const shipSnapshot = React.useContext(ShipSnapshotContext); + const toEft = useFormatAsEft(); + const eftToEsiFit = useFormatEftToEsi(); + + const [isPopupOpen, setIsPopupOpen] = React.useState(false); + const [isPasteOpen, setIsPasteOpen] = React.useState(false); + const textAreaRef = React.useRef(null); + + const copyToClipboard = React.useCallback(() => { + const eft = toEft(); + if (eft === undefined) return; + + navigator.clipboard.writeText(eft); + + setIsPopupOpen(false); + }, [toEft]); + + const importFromClipboard = React.useCallback(() => { + if (!shipSnapshot.loaded) return; + + const textArea = textAreaRef.current; + if (textArea === null) return; + + const eft = textArea.value; + if (eft === "") return; + + const fit = eftToEsiFit(eft); + if (fit === undefined) return; + + shipSnapshot.changeFit(fit); + + setIsPasteOpen(false); + setIsPopupOpen(false); + }, [eftToEsiFit, shipSnapshot]); + + return <> +
setIsPopupOpen(true)} onMouseOut={() => setIsPopupOpen(false)}> +
+ Clipboard +
+
+
+
setIsPasteOpen(true)}> + Import from Clipboard +
+
copyToClipboard()}> + Copy to Clipboard +
+
+
+
+ + setIsPasteOpen(false)} className={styles.paste} title="Import from Clipboard"> +
+
+ Paste the EFT fit here +
+
+