Merge pull request #271 from scottbenton/fix/custom-track-issue

Fix/custom track issue
scottbenton · Oct 30, 2023 · fb6de3b · fb6de3b
2 parents a9c04dc + b094d66
commit fb6de3b
Show file tree

Hide file tree

Showing 8 changed files with 138 additions and 133 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,16 +9,16 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@fontsource/bebas-neue": "^5.0.12",
     "@fontsource/rubik": "^4.5.13",
     "@fontsource/staatliches": "^4.5.9",
     "@hocuspocus/transformer": "^2.4.0",
     "@iconify-icons/game-icons": "^1.2.1",
-    "@mui/icons-material": "^5.11.0",
-    "@mui/lab": "^5.0.0-alpha.115",
-    "@mui/material": "^5.11.3",
+    "@mui/icons-material": "^5.14.15",
+    "@mui/lab": "^5.0.0-alpha.150",
+    "@mui/material": "^5.14.15",
     "@tiptap/extension-collaboration": "^2.0.3",
     "@tiptap/extension-collaboration-cursor": "^2.0.3",
     "@tiptap/extension-placeholder": "^2.0.0-beta.218",

diff --git a/src/components/features/charactersAndCampaigns/CustomMovesSection/CustomMoveDialog.tsx b/src/components/features/charactersAndCampaigns/CustomMovesSection/CustomMoveDialog.tsx
@@ -434,14 +434,17 @@ export function CustomMoveDialog(props: CustomMoveDialogProps) {
                   </FormControl>
                 </Box>
                 <Autocomplete
-                  multiple
+                  //@ts-ignore
+                  multiple={true}
                   limitTags={2}
                   options={Object.values(combinedOracles)}
+                  //@ts-ignore
                   getOptionLabel={(oracle) => oracle.Title.Standard}
                   renderInput={(params) => (
                     <TextField {...params} label={"Oracles"} />
                   )}
                   value={getOraclesFromIds(form.values.oracleIds)}
+                  //@ts-ignore
                   onChange={(evt, value) => {
                     const ids = Array.isArray(value)
                       ? value.map((oracle) => oracle.$id)

diff --git a/src/components/features/charactersAndCampaigns/CustomTrack.tsx b/src/components/features/charactersAndCampaigns/CustomTrack.tsx
@@ -4,6 +4,7 @@ import {
   Theme,
   ToggleButton,
   ToggleButtonGroup,
+  ToggleButtonProps,
   Typography,
 } from "@mui/material";
 import { CustomTrack as ICustomTrack } from "types/CustomTrackSettings.type";
@@ -17,6 +18,35 @@ export interface CustomTrackProps {
   loading?: boolean;
 }
 
+const FakeToggleButton = (props: ToggleButtonProps) => {
+  const { children, className } = props;
+
+  return (
+    <Box
+      className={className}
+      sx={(theme) => ({
+        borderStyle: "solid",
+        borderColor: theme.palette.divider,
+        borderWidth: 1,
+        borderLeftWidth: 0,
+        px: 0.5,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        bgcolor: theme.palette.grey[500],
+        color: theme.palette.darkGrey.contrastText,
+      })}
+    >
+      <Typography
+        fontFamily={(theme) => theme.fontFamilyTitle}
+        variant={"subtitle1"}
+      >
+        {children}
+      </Typography>
+    </Box>
+  );
+};
+
 export function CustomTrack(props: CustomTrackProps) {
   const { sx, customTrack, value, onChange, disabled, loading } = props;
   return (
@@ -85,28 +115,9 @@ export function CustomTrack(props: CustomTrackProps) {
               {cell.value}
             </ToggleButton>
           ) : (
-            <Box
-              key={index}
-              sx={(theme) => ({
-                borderStyle: "solid",
-                borderColor: theme.palette.divider,
-                borderWidth: 1,
-                borderLeftWidth: 0,
-                px: 0.5,
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                bgcolor: theme.palette.grey[500],
-                color: theme.palette.darkGrey.contrastText,
-              })}
-            >
-              <Typography
-                fontFamily={(theme) => theme.fontFamilyTitle}
-                variant={"subtitle1"}
-              >
-                {cell.value}
-              </Typography>
-            </Box>
+            <FakeToggleButton key={index} value={cell.value}>
+              {cell.value}
+            </FakeToggleButton>
           )
         )}
       </ToggleButtonGroup>