Split map select mode into a radio button

This commit is contained in:
Mitchell McCaffrey 2020-09-30 14:10:15 +10:00
parent 8ac4e0aec9
commit 27dfecf649

View File

@ -9,6 +9,8 @@ import ResetMapIcon from "../../icons/ResetMapIcon";
import SelectMultipleIcon from "../../icons/SelectMultipleIcon"; import SelectMultipleIcon from "../../icons/SelectMultipleIcon";
import SelectSingleIcon from "../../icons/SelectSingleIcon"; import SelectSingleIcon from "../../icons/SelectSingleIcon";
import RadioIconButton from "./controls/RadioIconButton";
import MapTile from "./MapTile"; import MapTile from "./MapTile";
import Link from "../Link"; import Link from "../Link";
import Search from "../Search"; import Search from "../Search";
@ -69,22 +71,31 @@ function MapTiles({
onFocus={() => onMapSelect()} onFocus={() => onMapSelect()}
> >
<Search /> <Search />
<IconButton <Flex
onClick={() => mr={1}
onSelectModeChange(selectMode === "single" ? "multiple" : "single") px={1}
} sx={{
aria-label={ borderRight: "1px solid",
selectMode === "single" ? "Select Multiple" : "Select Single" borderColor: "text",
} height: "36px",
title={selectMode === "single" ? "Select Multiple" : "Select Single"} alignItems: "center",
ml={1} }}
> >
{selectMode === "single" ? ( <RadioIconButton
<SelectMultipleIcon /> title="Select Single"
) : ( onClick={() => onSelectModeChange("single")}
isSelected={selectMode === "single"}
>
<SelectSingleIcon /> <SelectSingleIcon />
)} </RadioIconButton>
</IconButton> <RadioIconButton
title="Select Multiple"
onClick={() => onSelectModeChange("multiple")}
isSelected={selectMode === "multiple" || selectMode === "range"}
>
<SelectMultipleIcon />
</RadioIconButton>
</Flex>
<IconButton <IconButton
onClick={onMapAdd} onClick={onMapAdd}
aria-label="Add Map" aria-label="Add Map"