Implement new Select in FilterBar

components/FilterBar/index.scss

@@ -25,7 +25,8 @@
     text-align: left;
   }
 
-  select {
+  select,
+  .SelectTrigger {
     // background: url("/icons/Arrow.svg"), $grey-90;
     // background-repeat: no-repeat;
     // background-position-y: center;
@@ -37,6 +38,14 @@
     max-width: 200px;
   }
 
+  .SelectTrigger {
+    width: 100%;
+
+    span {
+      font-size: $font-small;
+    }
+  }
+
   .UserInfo {
     align-items: center;
     display: flex;

components/FilterBar/index.tsx

@@ -1,10 +1,12 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { useTranslation } from 'next-i18next'
 import classNames from 'classnames'
 
 import RaidDropdown from '~components/RaidDropdown'
 
 import './index.scss'
+import Select from '~components/Select'
+import SelectItem from '~components/SelectItem'
 
 interface Props {
   children: React.ReactNode
@@ -27,6 +29,9 @@ const FilterBar = (props: Props) => {
   // Set up translation
   const { t } = useTranslation('common')
 
+  const [recencyOpen, setRecencyOpen] = useState(false)
+  const [elementOpen, setElementOpen] = useState(false)
+
   // Set up refs for filter dropdowns
   const elementSelect = React.createRef<HTMLSelectElement>()
   const raidSelect = React.createRef<HTMLSelectElement>()
@@ -38,17 +43,21 @@ const FilterBar = (props: Props) => {
     shadow: props.scrolled,
   })
 
-  function elementSelectChanged() {
-    const elementValue = elementSelect.current
-      ? parseInt(elementSelect.current.value)
-      : -1
+  function openElementSelect() {
+    setElementOpen(!elementOpen)
+  }
+
+  function openRecencySelect() {
+    setRecencyOpen(!recencyOpen)
+  }
+
+  function elementSelectChanged(value: string) {
+    const elementValue = parseInt(value)
     props.onFilter({ element: elementValue })
   }
 
-  function recencySelectChanged() {
-    const recencyValue = recencySelect.current
-      ? parseInt(recencySelect.current.value)
-      : -1
+  function recencySelectChanged(value: string) {
+    const recencyValue = parseInt(value)
     props.onFilter({ recency: recencyValue })
   }
 
@@ -59,65 +68,76 @@ const FilterBar = (props: Props) => {
   return (
     <div className={classes}>
       {props.children}
-      <select
+      <Select
+        defaultValue={-1}
+        trigger={'All elements'}
+        open={elementOpen}
         onChange={elementSelectChanged}
-        ref={elementSelect}
-        value={props.element}
+        onClick={openElementSelect}
       >
-        <option data-element="all" key={-1} value={-1}>
+        <SelectItem data-element="all" key={-1} value={-1}>
           {t('elements.full.all')}
-        </option>
-        <option data-element="null" key={0} value={0}>
+        </SelectItem>
+        <SelectItem data-element="null" key={0} value={0}>
           {t('elements.full.null')}
-        </option>
-        <option data-element="wind" key={1} value={1}>
+        </SelectItem>
+        <SelectItem data-element="wind" key={1} value={1}>
           {t('elements.full.wind')}
-        </option>
-        <option data-element="fire" key={2} value={2}>
+        </SelectItem>
+        <SelectItem data-element="fire" key={2} value={2}>
           {t('elements.full.fire')}
-        </option>
-        <option data-element="water" key={3} value={3}>
+        </SelectItem>
+        <SelectItem data-element="water" key={3} value={3}>
           {t('elements.full.water')}
-        </option>
-        <option data-element="earth" key={4} value={4}>
+        </SelectItem>
+        <SelectItem data-element="earth" key={4} value={4}>
           {t('elements.full.earth')}
-        </option>
-        <option data-element="dark" key={5} value={5}>
+        </SelectItem>
+        <SelectItem data-element="dark" key={5} value={5}>
           {t('elements.full.dark')}
-        </option>
-        <option data-element="light" key={6} value={6}>
+        </SelectItem>
+        <SelectItem data-element="light" key={6} value={6}>
           {t('elements.full.light')}
-        </option>
-      </select>
+        </SelectItem>
+      </Select>
+
       <RaidDropdown
         currentRaid={props.raidSlug}
+        defaultRaid="all"
         showAllRaidsOption={true}
         onChange={raidSelectChanged}
         ref={raidSelect}
       />
-      <select onChange={recencySelectChanged} ref={recencySelect}>
-        <option key={-1} value={-1}>
+
+      <Select
+        defaultValue={-1}
+        trigger={'All time'}
+        open={recencyOpen}
+        onChange={recencySelectChanged}
+        onClick={openRecencySelect}
+      >
+        <SelectItem key={-1} value={-1}>
           {t('recency.all_time')}
-        </option>
-        <option key={86400} value={86400}>
+        </SelectItem>
+        <SelectItem key={86400} value={86400}>
           {t('recency.last_day')}
-        </option>
-        <option key={604800} value={604800}>
+        </SelectItem>
+        <SelectItem key={604800} value={604800}>
           {t('recency.last_week')}
-        </option>
-        <option key={2629746} value={2629746}>
+        </SelectItem>
+        <SelectItem key={2629746} value={2629746}>
           {t('recency.last_month')}
-        </option>
-        <option key={7889238} value={7889238}>
+        </SelectItem>
+        <SelectItem key={7889238} value={7889238}>
           {t('recency.last_3_months')}
-        </option>
-        <option key={15778476} value={15778476}>
+        </SelectItem>
+        <SelectItem key={15778476} value={15778476}>
           {t('recency.last_6_months')}
-        </option>
-        <option key={31556952} value={31556952}>
+        </SelectItem>
+        <SelectItem key={31556952} value={31556952}>
           {t('recency.last_year')}
-        </option>
-      </select>
+        </SelectItem>
+      </Select>
     </div>
   )
 }

components/RaidDropdown/index.tsx

@@ -15,6 +15,7 @@ import './index.scss'
 interface Props {
   showAllRaidsOption: boolean
   currentRaid?: string
+  defaultRaid?: string
   onChange?: (slug?: string) => void
   onBlur?: (event: React.ChangeEvent<HTMLSelectElement>) => void
 }
@@ -129,6 +130,7 @@ const RaidDropdown = React.forwardRef<HTMLSelectElement, Props>(
 
     return (
       <Select
+        defaultValue={props.defaultRaid}
         trigger={'Select a raid...'}
         placeholder={'Select a raid...'}
         open={open}

components/Select/index.tsx

@@ -9,6 +9,7 @@ import './index.scss'
 // Props
 interface Props {
   open: boolean
+  defaultValue?: string | number
   placeholder?: string
   trigger?: React.ReactNode
   children?: React.ReactNode
@@ -22,7 +23,10 @@ const Select = React.forwardRef<HTMLSelectElement, Props>(function useFieldSet(
   ref
 ) {
   return (
-    <RadixSelect.Root onValueChange={props.onChange}>
+    <RadixSelect.Root
+      defaultValue={props.defaultValue as string}
+      onValueChange={props.onChange}
+    >
       <RadixSelect.Trigger
         className={classNames('SelectTrigger', props.triggerClass)}
         placeholder={props.placeholder}