Moved to react-select for dropdowns to unify platforms

package.json

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

src/components/Select.js

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

src/components/map/MapSettings.js

@@ -1,26 +1,19 @@
 import React from "react";
-import {
+import { Flex, Box, Label, Input, Checkbox, IconButton } from "theme-ui";
-  Flex,
-  Box,
-  Label,
-  Input,
-  Checkbox,
-  IconButton,
-  Select,
-} 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" },
+  { value: "low", label: "Low" },
-  { id: "medium", name: "Medium" },
+  { value: "medium", label: "Medium" },
-  { id: "high", name: "High" },
+  { value: "high", label: "High" },
-  { id: "ultra", name: "Ultra High" },
+  { value: "ultra", label: "Ultra High" },
-  { id: "original", name: "Original" },
+  { 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%" }}>
+            <Box mb={1} sx={{ width: "50%" }}>
-              <Label>Grid Type</Label>
+              <Label mb={1}>Grid Type</Label>
               <Select
-                defaultValue="Square"
+                defaultValue={{ value: "square", label: "Square" }}
-                my={1}
+                isDisabled={mapEmpty || map.type === "default"}
-                disabled={mapEmpty || map.type === "default"}
+                options={[
-              >
+                  { value: "square", label: "Square" },
-                <option>Square</option>
+                  { value: "hex", label: "Hex (Coming Soon)" },
-                <option disabled>Hex (Coming Soon)</option>
+                ]}
-              </Select>
+                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%" }}>
+              <Box mb={1} sx={{ width: "50%" }}>
-                <Label>Quality</Label>
+                <Label mb={1}>Quality</Label>
                 <Select
-                  my={1}
+                  options={qualitySettings}
-                  value={!mapEmpty && map.quality}
+                  value={
-                  disabled={mapEmpty}
+                    !mapEmpty &&
-                  onChange={(e) => onSettingsChange("quality", e.target.value)}
+                    qualitySettings.find((s) => s.value === map.quality)
-                >
-                  {qualitySettings.map((quality) => (
-                    <option
-                      key={quality.id}
-                      value={quality.id}
-                      disabled={
-                        mapEmpty ||
-                        (quality.id !== "original" &&
-                          !map.resolutions[quality.id])
                   }
-                    >
+                  isDisabled={mapEmpty}
-                      {quality.name}
+                  onChange={(option) =>
-                    </option>
+                    onSettingsChange("quality", option.value)
-                  ))}
+                  }
-                </Select>
+                  isOptionDisabled={(option) =>
+                    mapEmpty ||
+                    (option.value !== "original" &&
+                      !map.resolutions[option.value])
+                  }
+                />
               </Box>
               <Label sx={{ width: "50%" }} ml={2}>
                 Size: {getMapSize()}

src/components/token/TokenSettings.js

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

yarn.lock

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