StyleInput: update style and use react-dropdown-select

package.json

@@ -16,6 +16,7 @@
     "phosphor-react": "^0.1.6",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-dropdown-select": "^4.4.2",
     "react-list": "^0.8.15",
     "react-scripts": "3.4.1",
     "react-use": "^15.3.2",

src/components/StyleInput/StyleInput.css

@@ -0,0 +1,93 @@
+/* .style-select {
+  position: relative;
+}
+
+.style-select {
+  background-color: gold;
+  border-radius: 24px;
+  box-shadow: 4px 4px #ccc;
+  display: none;
+}
+
+.style-select option {
+  background-color: gold;
+  border-radius: 24px;
+  display: none;
+} */
+
+.react-dropdown-select {
+  width: 176px !important;
+  height: 48px !important;
+  margin: 0 4px;
+  padding: 0 24px !important;
+  color: white;
+  border-radius: 8px !important;
+  background-color: #494650;
+  font-size: 16px;
+  border: none !important;
+}
+
+.react-dropdown-select-content span {
+  box-sizing: initial !important;
+}
+
+.react-dropdown-select:focus-within {
+  background-color: white;
+  color: black;
+  outline: none !important;
+  box-shadow: none !important;
+}
+
+.react-dropdown-select-type-single {
+  /* height: 100% !important; */
+}
+
+.react-dropdown-select-clear,
+.react-dropdown-select-dropdown-handle {
+  /* color: #fff; */
+}
+.react-dropdown-select-option {
+  /* border: 1px solid #000; */
+}
+.react-dropdown-select-item {
+  color: #333;
+  height: 100% !important;
+
+}
+.react-dropdown-select-input {
+  color: #fff;
+}
+.react-dropdown-select-dropdown {
+  position: absolute;
+  left: 0;
+  border: none;
+  width: 500px;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  border-radius: 8px;
+  max-height: 300px;
+  overflow: auto;
+  z-index: 9;
+  /* background: rgb(29, 20, 20) !important; */
+  box-shadow: none;
+}
+.react-dropdown-select-item {
+  color: black;
+}
+.react-dropdown-select-item:hover {
+  /* color: white; */
+  background-color: #ffd171 !important;
+}
+
+.react-dropdown-select-item.react-dropdown-select-item-selected,
+.react-dropdown-select-item.react-dropdown-select-item-active {
+  color: black !important;
+  background-color: #ffd171 !important;
+  /* border-bottom: 1px solid #333; */
+  font-weight: bold;
+}
+.react-dropdown-select-item.react-dropdown-select-item-disabled {
+  background: #777;
+  color: #ccc;
+}

src/components/StyleInput/StyleInput.tsx

@@ -1,34 +1,57 @@
 import React from "react";
 import { useRecoilState } from "recoil";
+import Select from "react-dropdown-select";
 
 import { styleQueryAtom } from "../../state/atoms";
 import { IconStyle } from "../../lib";
+import "./StyleInput.css";
+import { Heart } from "phosphor-react";
+
+const options = [
+  { key: "Thin", value: IconStyle.THIN, icon: <Heart weight="thin" /> },
+  { key: "Light", value: IconStyle.LIGHT, icon: <Heart weight="light" /> },
+  {
+    key: "Regular",
+    value: IconStyle.REGULAR,
+    icon: <Heart weight="regular" />,
+  },
+  { key: "Bold", value: IconStyle.BOLD, icon: <Heart weight="bold" /> },
+  { key: "Fill", value: IconStyle.FILL, icon: <Heart weight="fill" /> },
+  {
+    key: "Duotone",
+    value: IconStyle.DUOTONE,
+    icon: <Heart weight="duotone" />,
+  },
+];
 
 type StyleInputProps = {};
 
 const StyleInput: React.FC<StyleInputProps> = () => {
   const [style, setStyle] = useRecoilState(styleQueryAtom);
+  void style;
 
-  const handleStyleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+  // const handleStyleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    setStyle(event.target.value as IconStyle);
+  //   setStyle(event.target.value as IconStyle);
-  };
+  // };
 
   return (
-    <div>
+    <Select
-      <select
+      style={{ height: 48 }}
-        id="style-input"
+      options={options}
-        aria-label="Icon Style"
+      values={[options[2]]}
-        value={style?.toString()}
+      searchable={false}
-        onChange={handleStyleChange}
+      labelField="key"
-      >
+      onChange={(values) => setStyle(values[0].value as IconStyle)}
-        <option value={IconStyle.THIN}>Thin</option>
+      // itemRenderer={({ item, methods }) => (
-        <option value={IconStyle.LIGHT}>Light</option>
+      //   <div
-        <option value={IconStyle.REGULAR}>Regular</option>
+      //     className="react-dropdown-select-item"
-        <option value={IconStyle.BOLD}>Bold</option>
+      //     onClick={() => methods.addItem(item)}
-        <option value={IconStyle.FILL}>Fill</option>
+      //   >
-        <option value={IconStyle.DUOTONE}>Duotone</option>
+      //     {item.icon}
-      </select>
+      //     {item.key}
-    </div>
+      //   </div>
+      // )}
+    />
   );
 };