Atlas48/grungnet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added a show more toggle to map settings

Browse Source
This commit is contained in:
Mitchell McCaffrey
2020-04-26 17:25:04 +10:00
parent a07b95ec2d
commit 297669173a
2 changed files with 95 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/map/MapSettings.js
+68 -42
View File
@@ -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>
);
}