FIX: script options modal issue #625 (#626)

src/ScriptEditor/ui/Toolbar.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import * as monaco from "monaco-editor";
 
 import Box from "@mui/material/Box";
@@ -17,9 +17,9 @@ import { makeTheme, sanitizeTheme } from "./themes";
 import { Modal } from "../../ui/React/Modal";
 import { Page } from "../../ui/Router";
 import { Router } from "../../ui/GameRoot";
+import { useBoolean } from "../../ui/React/hooks";
 import { Settings } from "../../Settings/Settings";
-import { OptionsModal } from "./OptionsModal";
-import { Options } from "./Options";
+import { OptionsModal, OptionsModalProps } from "./OptionsModal";
 import { useScriptEditorContext } from "./ScriptEditorContext";
 
 type IStandaloneCodeEditor = monaco.editor.IStandaloneCodeEditor;
@@ -30,8 +30,8 @@ interface IProps {
 }
 
 export function Toolbar({ editor, onSave }: IProps) {
-  const [ramInfoOpen, setRamInfoOpen] = useState(false);
-  const [optionsOpen, setOptionsOpen] = useState(false);
+  const [ramInfoOpen, { on: openRAMInfo, off: closeRAMInfo }] = useBoolean(false);
+  const [optionsOpen, { on: openOptions, off: closeOptions }] = useBoolean(false);
 
   function beautify(): void {
     editor?.getAction("editor.action.formatDocument")?.run();
@@ -39,20 +39,24 @@ export function Toolbar({ editor, onSave }: IProps) {
 
   const { ram, ramEntries, isUpdatingRAM, options, saveOptions } = useScriptEditorContext();
 
+  const onOptionChange: OptionsModalProps["onOptionChange"] = (option, value) => {
+    saveOptions({ ...options, [option]: value });
+    editor?.updateOptions(options);
+  };
+
+  const onThemeChange = () => {
+    sanitizeTheme(Settings.EditorTheme);
+    monaco.editor.defineTheme("customTheme", makeTheme(Settings.EditorTheme));
+  };
+
   return (
     <>
       <Box display="flex" flexDirection="row" sx={{ m: 1 }} alignItems="center">
-        <Button startIcon={<SettingsIcon />} onClick={() => setOptionsOpen(true)} sx={{ mr: 1 }}>
+        <Button startIcon={<SettingsIcon />} onClick={openOptions} sx={{ mr: 1 }}>
           Options
         </Button>
         <Button onClick={beautify}>Beautify</Button>
-        <Button
-          color={isUpdatingRAM ? "secondary" : "primary"}
-          sx={{ mx: 1 }}
-          onClick={() => {
-            setRamInfoOpen(true);
-          }}
-        >
+        <Button color={isUpdatingRAM ? "secondary" : "primary"} sx={{ mx: 1 }} onClick={openRAMInfo}>
           {ram}
         </Button>
         <Button onClick={onSave}>Save (Ctrl/Cmd + s)</Button>
@@ -76,20 +80,12 @@ export function Toolbar({ editor, onSave }: IProps) {
       </Box>
       <OptionsModal
         open={optionsOpen}
-        onClose={() => {
-          sanitizeTheme(Settings.EditorTheme);
-          monaco.editor.defineTheme("customTheme", makeTheme(Settings.EditorTheme));
-          setOptionsOpen(false);
-        }}
-        options={{ ...options }}
-        save={(options: Options) => {
-          sanitizeTheme(Settings.EditorTheme);
-          monaco.editor.defineTheme("customTheme", makeTheme(Settings.EditorTheme));
-          editor?.updateOptions(options);
-          saveOptions(options);
-        }}
+        options={options}
+        onClose={closeOptions}
+        onOptionChange={onOptionChange}
+        onThemeChange={onThemeChange}
       />
-      <Modal open={ramInfoOpen} onClose={() => setRamInfoOpen(false)}>
+      <Modal open={ramInfoOpen} onClose={closeRAMInfo}>
         <Table>
           <TableBody>
             {ramEntries.map(([n, r]) => (