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

Moved to react-select for dropdowns to unify platforms

Browse Source
This commit is contained in:
Mitchell McCaffrey 2020-09-23 16:29:15 +10:00
parent 332de6433b
commit 2c0a01b66c
5 changed files with 169 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -31,6 +31,7 @@
"react-router-dom": "^5.1.2",
"react-router-hash-link": "^1.2.2",
"react-scripts": "3.4.0",
"react-select": "^3.1.0",
"react-spring": "^8.0.27",
"react-use-gesture": "^7.0.15",
"shortid": "^2.2.15",

57
src/components/Select.js Normal file
View File

@ -0,0 +1,57 @@
import React from "react";
import ReactSelect from "react-select";
import { useThemeUI } from "theme-ui";
function Select(props) {
const { theme } = useThemeUI();
function getColor(state) {
return state.isDisabled ? theme.colors.gray : theme.colors.text;
}
return (
<ReactSelect
isSearchable={false}
styles={{
menu: (provided, state) => ({
...provided,
backgroundColor: theme.colors.background,
color: getColor(state),
borderRadius: "4px",
borderColor: theme.colors.gray,
borderStyle: "solid",
borderWidth: "1px",
}),
control: (provided, state) => ({
...provided,
backgroundColor: theme.colors.background,
color: getColor(state),
borderColor: theme.colors.text,
}),
singleValue: (provided, state) => ({
...provided,
color: getColor(state),
}),
dropdownIndicator: (provided, state) => ({
...provided,
color: getColor(state),
":hover": {
color: state.isDisabled ? theme.colors.gray : theme.colors.primary,
},
}),
}}
theme={(t) => ({
...t,
colors: {
...t.colors,
primary: theme.colors.primary,
primary50: theme.colors.secondary,
primary25: theme.colors.highlight,
},
})}
{...props}
/>
);
}
export default Select;

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

@ -1,26 +1,19 @@
import React from "react";
import {
Flex,
Box,
Label,
Input,
Checkbox,
IconButton,
Select,
} from "theme-ui";
import { Flex, Box, Label, Input, Checkbox, IconButton } from "theme-ui";
import ExpandMoreIcon from "../../icons/ExpandMoreIcon";
import { isEmpty } from "../../helpers/shared";
import Divider from "../Divider";
import Select from "../Select";
const qualitySettings = [
{ id: "low", name: "Low" },
{ id: "medium", name: "Medium" },
{ id: "high", name: "High" },
{ id: "ultra", name: "Ultra High" },
{ id: "original", name: "Original" },
{ value: "low", label: "Low" },
{ value: "medium", label: "Medium" },
{ value: "high", label: "High" },
{ value: "ultra", label: "Ultra High" },
{ value: "original", label: "Original" },
];
function MapSettings({
@ -105,16 +98,17 @@ function MapSettings({
mb={mapEmpty || map.type === "default" ? 2 : 0}
sx={{ alignItems: "flex-end" }}
>
<Box sx={{ width: "50%" }}>
<Label>Grid Type</Label>
<Box mb={1} sx={{ width: "50%" }}>
<Label mb={1}>Grid Type</Label>
<Select
defaultValue="Square"
my={1}
disabled={mapEmpty || map.type === "default"}
>
<option>Square</option>
<option disabled>Hex (Coming Soon)</option>
</Select>
defaultValue={{ value: "square", label: "Square" }}
isDisabled={mapEmpty || map.type === "default"}
options={[
{ value: "square", label: "Square" },
{ value: "hex", label: "Hex (Coming Soon)" },
]}
isOptionDisabled={(option) => option.value === "hex"}
/>
</Box>
<Flex sx={{ width: "50%", flexDirection: "column" }} ml={2}>
<Label>
@ -141,28 +135,24 @@ function MapSettings({
</Flex>
{!mapEmpty && map.type !== "default" && (
<Flex my={2} sx={{ alignItems: "center" }}>
<Box sx={{ width: "50%" }}>
<Label>Quality</Label>
<Box mb={1} sx={{ width: "50%" }}>
<Label mb={1}>Quality</Label>
<Select
my={1}
value={!mapEmpty && map.quality}
disabled={mapEmpty}
onChange={(e) => onSettingsChange("quality", e.target.value)}
>
{qualitySettings.map((quality) => (
<option
key={quality.id}
value={quality.id}
disabled={
mapEmpty ||
(quality.id !== "original" &&
!map.resolutions[quality.id])
}
>
{quality.name}
</option>
))}
</Select>
options={qualitySettings}
value={
!mapEmpty &&
qualitySettings.find((s) => s.value === map.quality)
}
isDisabled={mapEmpty}
onChange={(option) =>
onSettingsChange("quality", option.value)
}
isOptionDisabled={(option) =>
mapEmpty ||
(option.value !== "original" &&
!map.resolutions[option.value])
}
/>
</Box>
<Label sx={{ width: "50%" }} ml={2}>
Size: {getMapSize()}

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

@ -1,21 +1,15 @@
import React from "react";
import {
Flex,
Box,
Input,
IconButton,
Label,
Checkbox,
Select,
} from "theme-ui";
import { Flex, Box, Input, IconButton, Label, Checkbox } from "theme-ui";
import ExpandMoreIcon from "../../icons/ExpandMoreIcon";
import { isEmpty } from "../../helpers/shared";
import Select from "../Select";
const categorySettings = [
{ id: "character", name: "Character" },
{ id: "prop", name: "Prop" },
{ id: "vehicle", name: "Vehicle / Mount" },
{ value: "character", label: "Character" },
{ value: "prop", label: "Prop" },
{ value: "vehicle", label: "Vehicle / Mount" },
];
function TokenSettings({
@ -56,20 +50,19 @@ function TokenSettings({
/>
</Box>
<Flex my={2}>
<Box sx={{ flexGrow: 1 }}>
<Label>Category</Label>
<Box mb={1} sx={{ flexGrow: 1 }}>
<Label mb={1}>Category</Label>
<Select
my={1}
value={!tokenEmpty && token.category}
disabled={tokenEmpty || token.type === "default"}
onChange={(e) => onSettingsChange("category", e.target.value)}
>
{categorySettings.map((category) => (
<option key={category.id} value={category.id}>
{category.name}
</option>
))}
</Select>
options={categorySettings}
value={
!tokenEmpty &&
categorySettings.find((s) => s.value === token.category)
}
isDisabled={tokenEmpty || token.type === "default"}
onChange={(option) =>
onSettingsChange("category", option.value)
}
/>
</Box>
<Flex sx={{ flexGrow: 1, alignItems: "center" }} ml={2}>
<Label>

62
yarn.lock
View File

@ -1131,7 +1131,7 @@
dependencies:
regenerator-runtime "^0.13.4"
"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.6":
"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.6":
version "7.11.2"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0736"
integrity sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==
@ -1205,7 +1205,7 @@
resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18"
integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==
"@emotion/cache@^10.0.27":
"@emotion/cache@^10.0.27", "@emotion/cache@^10.0.9":
version "10.0.29"
resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.29.tgz#87e7e64f412c060102d589fe7c6dc042e6f9d1e0"
integrity sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==
@ -1227,7 +1227,19 @@
"@emotion/sheet" "0.9.4"
"@emotion/utils" "0.11.3"
"@emotion/css@^10.0.27":
"@emotion/core@^10.0.9":
version "10.0.35"
resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.35.tgz#513fcf2e22cd4dfe9d3894ed138c9d7a859af9b3"
integrity sha512-sH++vJCdk025fBlRZSAhkRlSUoqSqgCzYf5fMOmqqi3bM6how+sQpg3hkgJonj8GxXM4WbD7dRO+4tegDB9fUw==
dependencies:
"@babel/runtime" "^7.5.5"
"@emotion/cache" "^10.0.27"
"@emotion/css" "^10.0.27"
"@emotion/serialize" "^0.11.15"
"@emotion/sheet" "0.9.4"
"@emotion/utils" "0.11.3"
"@emotion/css@^10.0.27", "@emotion/css@^10.0.9":
version "10.0.27"
resolved "https://registry.yarnpkg.com/@emotion/css/-/css-10.0.27.tgz#3a7458198fbbebb53b01b2b87f64e5e21241e14c"
integrity sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==
@ -4325,6 +4337,14 @@ dom-converter@^0.2:
dependencies:
utila "~0.4"
dom-helpers@^5.0.1:
version "5.2.0"
resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.0.tgz#57fd054c5f8f34c52a3eeffdb7e7e93cd357d95b"
integrity sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==
dependencies:
"@babel/runtime" "^7.8.7"
csstype "^3.0.2"
dom-serializer@0, dom-serializer@^0.2.1:
version "0.2.2"
resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
@ -7473,6 +7493,11 @@ mem@^4.0.0:
mimic-fn "^2.0.0"
p-is-promise "^2.0.0"
memoize-one@^5.0.0:
version "5.1.1"
resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0"
integrity sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA==
memory-fs@^0.4.1:
version "0.4.1"
resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552"
@ -9524,6 +9549,13 @@ react-error-overlay@^6.0.7:
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108"
integrity sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA==
react-input-autosize@^2.2.2:
version "2.2.2"
resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-2.2.2.tgz#fcaa7020568ec206bc04be36f4eb68e647c4d8c2"
integrity sha512-jQJgYCA3S0j+cuOwzuCd1OjmBmnZLdqQdiLKRYrsMMzbjUrVDS5RvJUDwJqA7sKuksDuzFtm6hZGKFu7Mjk5aw==
dependencies:
prop-types "^15.5.8"
react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@ -9693,6 +9725,20 @@ react-scripts@3.4.0:
optionalDependencies:
fsevents "2.1.2"
react-select@^3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/react-select/-/react-select-3.1.0.tgz#ab098720b2e9fe275047c993f0d0caf5ded17c27"
integrity sha512-wBFVblBH1iuCBprtpyGtd1dGMadsG36W5/t2Aj8OE6WbByDg5jIFyT7X5gT+l0qmT5TqWhxX+VsKJvCEl2uL9g==
dependencies:
"@babel/runtime" "^7.4.4"
"@emotion/cache" "^10.0.9"
"@emotion/core" "^10.0.9"
"@emotion/css" "^10.0.9"
memoize-one "^5.0.0"
prop-types "^15.6.0"
react-input-autosize "^2.2.2"
react-transition-group "^4.3.0"
react-spring@^8.0.27:
version "8.0.27"
resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-8.0.27.tgz#97d4dee677f41e0b2adcb696f3839680a3aa356a"
@ -9701,6 +9747,16 @@ react-spring@^8.0.27:
"@babel/runtime" "^7.3.1"
prop-types "^15.5.8"
react-transition-group@^4.3.0:
version "4.4.1"
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9"
integrity sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==
dependencies:
"@babel/runtime" "^7.5.5"
dom-helpers "^5.0.1"
loose-envify "^1.4.0"
prop-types "^15.6.2"
react-use-gesture@^7.0.15:
version "7.0.15"
resolved "https://registry.yarnpkg.com/react-use-gesture/-/react-use-gesture-7.0.15.tgz#93c651e916a31cfb12d079e7fa1543d5b0511e07"