Added a show more toggle to map settings

src/components/map/MapSettings.js

@@ -1,11 +1,15 @@
 import React from "react";
-import { Flex, Box, Label, Input, Checkbox } from "theme-ui";
+import { Flex, Box, Label, Input, Checkbox, IconButton } from "theme-ui";
+
+import ExpandMoreIcon from "../../icons/ExpandMoreIcon";
 
 function MapSettings({
   map,
   mapState,
   onSettingsChange,
   onStateSettingsChange,
+  showMore,
+  onShowMoreChange,
 }) {
   function handleFlagChange(event, flag) {
     if (event.target.checked) {
@@ -47,6 +51,8 @@ function MapSettings({
           />
         </Box>
       </Flex>
+      {showMore && (
+        <>
           <Box mt={2} sx={{ flexGrow: 1 }}>
             <Label htmlFor="name">Name</Label>
             <Input
@@ -81,7 +87,9 @@ function MapSettings({
               </Label>
               <Label>
                 <Checkbox
-              checked={mapState !== null && mapState.editFlags.includes("map")}
+                  checked={
+                    mapState !== null && mapState.editFlags.includes("map")
+                  }
                   disabled={mapState === null}
                   onChange={(e) => handleFlagChange(e, "map")}
                 />
@@ -89,6 +97,24 @@ function MapSettings({
               </Label>
             </Flex>
           </Box>
+        </>
+      )}
+      <IconButton
+        onClick={(e) => {
+          e.stopPropagation();
+          e.preventDefault();
+          onShowMoreChange(!showMore);
+        }}
+        sx={{
+          transform: `rotate(${showMore ? "180deg" : "0"})`,
+          alignSelf: "center",
+        }}
+        aria-label={showMore ? "Show Less" : "Show More"}
+        title={showMore ? "Show Less" : "Show More"}
+        disabled={map === null}
+      >
+        <ExpandMoreIcon />
+      </IconButton>
     </Flex>
   );
 }

src/modals/SelectMapModal.js

@@ -204,26 +204,6 @@ function SelectMapModal({
     onDone();
   }
 
-  async function handleMapSettingsChange(key, value) {
-    await db.table("maps").update(selectedMap.id, { [key]: value });
-    const newMap = { ...selectedMap, [key]: value };
-    setMaps((prevMaps) => {
-      const newMaps = [...prevMaps];
-      const i = newMaps.findIndex((map) => map.id === selectedMap.id);
-      if (i > -1) {
-        newMaps[i] = newMap;
-      }
-      return newMaps;
-    });
-    setSelectedMap(newMap);
-  }
-
-  async function handleMapStateSettingsChange(key, value) {
-    console.log(value);
-    await db.table("states").update(selectedMap.id, { [key]: value });
-    setSelectedMapState((prevState) => ({ ...prevState, [key]: value }));
-  }
-
   /**
    * Drag and Drop
    */
@@ -250,6 +230,31 @@ function SelectMapModal({
     setDragging(false);
   }
 
+  /**
+   * Map settings
+   */
+  const [showMoreSettings, setShowMoreSettings] = useState(false);
+
+  async function handleMapSettingsChange(key, value) {
+    await db.table("maps").update(selectedMap.id, { [key]: value });
+    const newMap = { ...selectedMap, [key]: value };
+    setMaps((prevMaps) => {
+      const newMaps = [...prevMaps];
+      const i = newMaps.findIndex((map) => map.id === selectedMap.id);
+      if (i > -1) {
+        newMaps[i] = newMap;
+      }
+      return newMaps;
+    });
+    setSelectedMap(newMap);
+  }
+
+  async function handleMapStateSettingsChange(key, value) {
+    console.log(value);
+    await db.table("states").update(selectedMap.id, { [key]: value });
+    setSelectedMapState((prevState) => ({ ...prevState, [key]: value }));
+  }
+
   return (
     <Modal isOpen={isOpen} onRequestClose={onRequestClose}>
       <Box as="form" onSubmit={handleSubmit} onDragEnter={handleImageDragEnter}>
@@ -283,6 +288,8 @@ function SelectMapModal({
             mapState={selectedMapState}
             onSettingsChange={handleMapSettingsChange}
             onStateSettingsChange={handleMapStateSettingsChange}
+            showMore={showMoreSettings}
+            onShowMoreChange={setShowMoreSettings}
           />
           <Button variant="primary" disabled={imageLoading}>
             Done