From 297669173a596333cec88d555cc5466375f8d6cd Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Sun, 26 Apr 2020 17:25:04 +1000
Subject: [PATCH] Added a show more toggle to map settings

---
 src/components/map/MapSettings.js | 110 ++++++++++++++++++------------
 src/modals/SelectMapModal.js      |  47 +++++++------
 2 files changed, 95 insertions(+), 62 deletions(-)

diff --git a/src/components/map/MapSettings.js b/src/components/map/MapSettings.js
index 79b25c0..728707c 100644
--- a/src/components/map/MapSettings.js
+++ b/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,48 +51,70 @@ function MapSettings({
           />
         </Box>
       </Flex>
-      <Box mt={2} sx={{ flexGrow: 1 }}>
-        <Label htmlFor="name">Name</Label>
-        <Input
-          name="name"
-          value={(map && map.name) || ""}
-          onChange={(e) => onSettingsChange("name", e.target.value)}
-          disabled={map === null || map.type === "default"}
-        />
-      </Box>
-      <Box my={2} sx={{ flexGrow: 1 }}>
-        <Label>Allow others to edit</Label>
-        <Flex>
-          <Label>
-            <Checkbox
-              checked={
-                mapState !== null && mapState.editFlags.includes("drawings")
-              }
-              disabled={mapState === null}
-              onChange={(e) => handleFlagChange(e, "drawings")}
+      {showMore && (
+        <>
+          <Box mt={2} sx={{ flexGrow: 1 }}>
+            <Label htmlFor="name">Name</Label>
+            <Input
+              name="name"
+              value={(map && map.name) || ""}
+              onChange={(e) => onSettingsChange("name", e.target.value)}
+              disabled={map === null || map.type === "default"}
             />
-            Drawings
-          </Label>
-          <Label>
-            <Checkbox
-              checked={
-                mapState !== null && mapState.editFlags.includes("tokens")
-              }
-              disabled={mapState === null}
-              onChange={(e) => handleFlagChange(e, "tokens")}
-            />
-            Tokens
-          </Label>
-          <Label>
-            <Checkbox
-              checked={mapState !== null && mapState.editFlags.includes("map")}
-              disabled={mapState === null}
-              onChange={(e) => handleFlagChange(e, "map")}
-            />
-            Map
-          </Label>
-        </Flex>
-      </Box>
+          </Box>
+          <Box my={2} sx={{ flexGrow: 1 }}>
+            <Label>Allow others to edit</Label>
+            <Flex>
+              <Label>
+                <Checkbox
+                  checked={
+                    mapState !== null && mapState.editFlags.includes("drawings")
+                  }
+                  disabled={mapState === null}
+                  onChange={(e) => handleFlagChange(e, "drawings")}
+                />
+                Drawings
+              </Label>
+              <Label>
+                <Checkbox
+                  checked={
+                    mapState !== null && mapState.editFlags.includes("tokens")
+                  }
+                  disabled={mapState === null}
+                  onChange={(e) => handleFlagChange(e, "tokens")}
+                />
+                Tokens
+              </Label>
+              <Label>
+                <Checkbox
+                  checked={
+                    mapState !== null && mapState.editFlags.includes("map")
+                  }
+                  disabled={mapState === null}
+                  onChange={(e) => handleFlagChange(e, "map")}
+                />
+                Map
+              </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>
   );
 }
diff --git a/src/modals/SelectMapModal.js b/src/modals/SelectMapModal.js
index b0e5ddb..6b8264f 100644
--- a/src/modals/SelectMapModal.js
+++ b/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