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

Fixed bug with token and map settings modal values being edited with no item selected

Browse Source
This commit is contained in:
Mitchell McCaffrey 2020-06-28 15:44:36 +10:00
parent 761bf8e800
commit 9f2ab861bb
2 changed files with 23 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/map/MapSettings.js
View File

@ -26,6 +26,9 @@ function MapSettings({
} }
} }
const mapEmpty = !map || isEmpty(map);
const mapStateEmpty = !mapState || isEmpty(mapState);
return ( return (
<Flex sx={{ flexDirection: "column" }}> <Flex sx={{ flexDirection: "column" }}>
<Flex> <Flex>
@ -38,7 +41,7 @@ function MapSettings({
onChange={(e) => onChange={(e) =>
onSettingsChange("gridX", parseInt(e.target.value)) onSettingsChange("gridX", parseInt(e.target.value))
} }
disabled={!map || map.type === "default"} disabled={mapEmpty || map.type === "default"}
min={1} min={1}
my={1} my={1}
/> />
@ -52,7 +55,7 @@ function MapSettings({
onChange={(e) => onChange={(e) =>
onSettingsChange("gridY", parseInt(e.target.value)) onSettingsChange("gridY", parseInt(e.target.value))
} }
disabled={!map || map.type === "default"} disabled={mapEmpty || map.type === "default"}
min={1} min={1}
my={1} my={1}
/> />
@ -66,7 +69,7 @@ function MapSettings({
name="name" name="name"
value={(map && map.name) || ""} value={(map && map.name) || ""}
onChange={(e) => onSettingsChange("name", e.target.value)} onChange={(e) => onSettingsChange("name", e.target.value)}
disabled={!map || map.type === "default"} disabled={mapEmpty || map.type === "default"}
my={1} my={1}
/> />
</Box> </Box>
@ -74,7 +77,7 @@ function MapSettings({
<Label> <Label>
<Checkbox <Checkbox
checked={map && map.showGrid} checked={map && map.showGrid}
disabled={!map || map.type === "default"} disabled={mapEmpty || map.type === "default"}
onChange={(e) => onSettingsChange("showGrid", e.target.checked)} onChange={(e) => onSettingsChange("showGrid", e.target.checked)}
/> />
Show Grid Show Grid
@ -86,24 +89,28 @@ function MapSettings({
<Flex my={1}> <Flex my={1}>
<Label> <Label>
<Checkbox <Checkbox
checked={mapState && mapState.editFlags.includes("fog")} checked={!mapStateEmpty && mapState.editFlags.includes("fog")}
disabled={!mapState} disabled={mapStateEmpty}
onChange={(e) => handleFlagChange(e, "fog")} onChange={(e) => handleFlagChange(e, "fog")}
/> />
Fog Fog
</Label> </Label>
<Label> <Label>
<Checkbox <Checkbox
checked={mapState && mapState.editFlags.includes("drawing")} checked={
disabled={mapState === null} !mapStateEmpty && mapState.editFlags.includes("drawing")
}
disabled={mapStateEmpty}
onChange={(e) => handleFlagChange(e, "drawing")} onChange={(e) => handleFlagChange(e, "drawing")}
/> />
Drawings Drawings
</Label> </Label>
<Label> <Label>
<Checkbox <Checkbox
checked={mapState && mapState.editFlags.includes("tokens")} checked={
disabled={!mapState} !mapStateEmpty && mapState.editFlags.includes("tokens")
}
disabled={mapStateEmpty}
onChange={(e) => handleFlagChange(e, "tokens")} onChange={(e) => handleFlagChange(e, "tokens")}
/> />
Tokens Tokens
@ -124,7 +131,6 @@ function MapSettings({
}} }}
aria-label={showMore ? "Show Less" : "Show More"} aria-label={showMore ? "Show Less" : "Show More"}
title={showMore ? "Show Less" : "Show More"} title={showMore ? "Show Less" : "Show More"}
disabled={!map || isEmpty(map)}
> >
<ExpandMoreIcon /> <ExpandMoreIcon />
</IconButton> </IconButton>

11
src/components/token/TokenSettings.js
View File

@ -2,6 +2,7 @@ import React from "react";
import { Flex, Box, Input, IconButton, Label, Checkbox } from "theme-ui"; import { Flex, Box, Input, IconButton, Label, Checkbox } from "theme-ui";
import ExpandMoreIcon from "../../icons/ExpandMoreIcon"; import ExpandMoreIcon from "../../icons/ExpandMoreIcon";
import { isEmpty } from "../../helpers/shared";
function TokenSettings({ function TokenSettings({
token, token,
@ -9,6 +10,7 @@ function TokenSettings({
showMore, showMore,
onShowMoreChange, onShowMoreChange,
}) { }) {
const tokenEmpty = !token || isEmpty(token);
return ( return (
<Flex sx={{ flexDirection: "column" }}> <Flex sx={{ flexDirection: "column" }}>
<Flex> <Flex>
@ -21,7 +23,7 @@ function TokenSettings({
onChange={(e) => onChange={(e) =>
onSettingsChange("defaultSize", parseInt(e.target.value)) onSettingsChange("defaultSize", parseInt(e.target.value))
} }
disabled={!token || token.type === "default"} disabled={tokenEmpty || token.type === "default"}
min={1} min={1}
my={1} my={1}
/> />
@ -35,7 +37,7 @@ function TokenSettings({
name="name" name="name"
value={(token && token.name) || ""} value={(token && token.name) || ""}
onChange={(e) => onSettingsChange("name", e.target.value)} onChange={(e) => onSettingsChange("name", e.target.value)}
disabled={!token || token.type === "default"} disabled={tokenEmpty || token.type === "default"}
my={1} my={1}
/> />
</Box> </Box>
@ -44,7 +46,7 @@ function TokenSettings({
<Label> <Label>
<Checkbox <Checkbox
checked={token && token.isVehicle} checked={token && token.isVehicle}
disabled={!token || token.type === "default"} disabled={tokenEmpty || token.type === "default"}
onChange={(e) => onChange={(e) =>
onSettingsChange("isVehicle", e.target.checked) onSettingsChange("isVehicle", e.target.checked)
} }
@ -56,7 +58,7 @@ function TokenSettings({
<Label> <Label>
<Checkbox <Checkbox
checked={token && token.hideInSidebar} checked={token && token.hideInSidebar}
disabled={!token || token.type === "default"} disabled={tokenEmpty || token.type === "default"}
onChange={(e) => onChange={(e) =>
onSettingsChange("hideInSidebar", e.target.checked) onSettingsChange("hideInSidebar", e.target.checked)
} }
@ -79,7 +81,6 @@ function TokenSettings({
}} }}
aria-label={showMore ? "Show Less" : "Show More"} aria-label={showMore ? "Show Less" : "Show More"}
title={showMore ? "Show Less" : "Show More"} title={showMore ? "Show Less" : "Show More"}
disabled={!token}
> >
<ExpandMoreIcon /> <ExpandMoreIcon />
</IconButton> </IconButton>