Add text input and fix styles to filter options

h39s · Feb 22, 2023 · 0f139db · 0f139db
1 parent 73e2c2d
commit 0f139db
Show file tree

Hide file tree

Showing 7 changed files with 104 additions and 43 deletions.
diff --git a/src/renderer/AutoEQ.tsx b/src/renderer/AutoEQ.tsx
@@ -90,6 +90,7 @@ const AutoEQ = () => {
         handleChange={handleDeviceChange}
         isDisabled={!!globalError}
         noSelectionPlaceholder={NO_DEVICE_SELECTION}
+        isFilterable
       />
       Target Frequency Response:
       <Dropdown

diff --git a/src/renderer/PresetsBar.tsx b/src/renderer/PresetsBar.tsx
@@ -262,6 +262,7 @@ const PresetsBar = () => {
         value={presetName}
         handleChange={handleChangeSelectedPreset}
         isDisabled={!!globalError}
+        emptyOptionsPlaceholder="No presets found."
       />
       <Button
         ariaLabel="Load selected preset"

diff --git a/src/renderer/styles/AutoEQ.scss b/src/renderer/styles/AutoEQ.scss
@@ -20,6 +20,11 @@ $auto-eq-dropdown-width: 220px;
       width: $auto-eq-dropdown-width;
     }
 
+    // Add padding around the text input for filtering the drop down
+    .starting-item {
+      padding: $spacing-xs;
+    }
+
     .list {
       // Assign fixed width to dropdown menu
       width: $auto-eq-dropdown-width + $spacing-s;

diff --git a/src/renderer/styles/Dropdown.scss b/src/renderer/styles/Dropdown.scss
@@ -40,6 +40,13 @@
       }
     }
 
+    // Clip content in the selected entry that exceeds the container
+    div:first-child {
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow-x: clip;
+    }
+
     svg {
       width: 36px;
       height: auto;
@@ -55,12 +62,12 @@
     }
   }
 
-  .list {
+  .list-wrapper {
     // Position the drop down menu
     position: absolute;
     margin-block-start: -4px;
 
-    z-index: 1;
+    z-index: 2;
 
     svg {
       width: 36px;

diff --git a/src/renderer/styles/List.scss b/src/renderer/styles/List.scss
@@ -1,37 +1,40 @@
 @import 'color';
 @import 'spacing';
 
-.list {
-  // Remove default styles
-  list-style-type: none;
-  padding-inline-start: 0px;
-  margin-block-start: 0px;
-  margin-block-end: 0px;
-
-  // Apply custom styles
+.list-wrapper {
+  // Apply custom styles for the list wrapper
   background: $primary-dark;
   color: $white;
   border: solid $spacing-xxs $secondary-default;
   border-radius: 4px;
   text-align: start;
 
-  overflow-y: auto;
+  .list {
+    // Remove default styles of the ul element
+    list-style-type: none;
+    padding-inline-start: 0px;
+    margin-block-start: 0px;
+    margin-block-end: 0px;
 
-  li {
-    cursor: pointer;
-    padding: $spacing-xs;
-    align-content: center;
-    font-size: small;
+    // Apply custom styles
+    overflow-y: auto;
 
-    &.selected {
-      background: $primary-light;
-    }
+    li {
+      cursor: pointer;
+      padding: $spacing-xs;
+      align-content: center;
+      font-size: small;
+
+      &.selected {
+        background: $primary-light;
+      }
 
-    &:focus,
-    &:focus-visible,
-    &:focus-within {
-      background: $secondary-dark;
-      outline: none;
+      &:focus,
+      &:focus-visible,
+      &:focus-within {
+        background: $secondary-dark;
+        outline: none;
+      }
     }
   }
 }
diff --git a/src/renderer/widgets/Dropdown.tsx b/src/renderer/widgets/Dropdown.tsx
@@ -10,6 +10,7 @@ import ArrowIcon from '../icons/ArrowIcon';
 import '../styles/Dropdown.scss';
 import { useClickOutside, useFocusOutside } from '../utils/utils';
 import List from './List';
+import TextInput from './TextInput';
 
 interface IOptionEntry {
   value: string;
@@ -24,6 +25,7 @@ interface IDropdownProps {
   isDisabled: boolean;
   noSelectionPlaceholder?: JSX.Element | string;
   emptyOptionsPlaceholder?: JSX.Element | string;
+  isFilterable?: boolean;
   handleChange: (newValue: string) => void;
 }
 
@@ -35,11 +37,22 @@ const Dropdown = ({
   noSelectionPlaceholder,
   emptyOptionsPlaceholder,
   handleChange,
+  isFilterable = false,
 }: IDropdownProps) => {
   const nullElement = createElement('div');
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
+  const [searchString, setSearchString] = useState<string>('');
+
+  const filteredOptions = useMemo(
+    () =>
+      options.filter((o) =>
+        o.value.toLowerCase().startsWith(searchString.toLowerCase())
+      ),
+    [options, searchString]
+  );
+
   useEffect(() => {
     if (isDisabled) {
       setIsOpen(false);
@@ -107,10 +120,21 @@ const Dropdown = ({
         <List
           name={name}
           value={value}
-          options={options}
+          options={filteredOptions}
           isDisabled={isDisabled}
           handleChange={onChange}
-          focusOnRender
+          focusOnRender={!isFilterable}
+          startingItem={
+            isFilterable ? (
+              <TextInput
+                value={searchString}
+                ariaLabel="Filter audio devices"
+                isDisabled={isDisabled}
+                errorMessage=""
+                handleChange={(newValue) => setSearchString(newValue)}
+              />
+            ) : undefined
+          }
         />
       )}
     </div>

diff --git a/src/renderer/widgets/List.tsx b/src/renderer/widgets/List.tsx
@@ -23,6 +23,8 @@ interface IListProps {
   className?: string;
   itemClassName?: string;
   focusOnRender?: boolean;
+  startingItem?: JSX.Element;
+  emptyOptionsPlaceholder?: JSX.Element | string;
 }
 
 const List = ({
@@ -34,6 +36,8 @@ const List = ({
   className,
   itemClassName,
   focusOnRender = false,
+  startingItem,
+  emptyOptionsPlaceholder = 'No options found.',
 }: IListProps) => {
   const inputRefs = useMemo(
     () =>
@@ -91,28 +95,44 @@ const List = ({
   );
 
   return (
-    <ul className={`list ${className || ''}`} aria-label={`${name}-items`}>
-      {options.map((entry: IOptionEntry, index: number) => {
-        return (
+    <div className={`list-wrapper ${className || ''}`}>
+      {startingItem && (
+        <div role="menuitem" className="row starting-item">
+          {startingItem}
+        </div>
+      )}
+      <ul className={`list ${className || ''}`} aria-label={`${name}-items`}>
+        {options.map((entry: IOptionEntry, index: number) => {
+          return (
+            <li
+              role="menuitem"
+              ref={inputRefs[index]}
+              className={`row ${itemClassName || ''} ${
+                entry.value === value ? 'selected' : ''
+              }`}
+              key={entry.value}
+              value={entry.value}
+              aria-label={entry.label}
+              onClick={onClick(entry.value)}
+              onKeyDown={handleItemKeyPress(entry, index)}
+              onMouseEnter={onMouseEnter(index)}
+              tabIndex={0}
+            >
+              {entry.display}
+            </li>
+          );
+        })}
+        {options.length === 0 && (
           <li
             role="menuitem"
-            ref={inputRefs[index]}
-            className={`row ${itemClassName || ''} ${
-              entry.value === value ? 'selected' : ''
-            }`}
-            key={entry.value}
-            value={entry.value}
-            aria-label={entry.label}
-            onClick={onClick(entry.value)}
-            onKeyDown={handleItemKeyPress(entry, index)}
-            onMouseEnter={onMouseEnter(index)}
+            className={`row ${itemClassName || ''} `}
             tabIndex={0}
           >
-            {entry.display}
+            {emptyOptionsPlaceholder}
           </li>
-        );
-      })}
-    </ul>
+        )}
+      </ul>
+    </div>
   );
 };