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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
src/components/map/MapSettings.js
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>
);
}

47
src/modals/SelectMapModal.js
View File

@ -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