refactor: switch SearchSelect to JSX

DataBiosphere · Jan 26, 2024 · 69c9c0b · 69c9c0b
1 parent ac7d575
commit 69c9c0b
Showing 1 changed file with 40 additions and 40 deletions.
diff --git a/src/components/SearchSelect.js b/src/components/SearchSelect.js
@@ -1,5 +1,5 @@
+import React from 'react';
 import { useState, useEffect, useRef } from 'react';
-import {div, input, span, a, ul, li } from 'react-hyperscript-helpers';
 import './SearchSelect.css';
 
 export const SearchSelect = (props) => {
@@ -42,44 +42,44 @@ export const SearchSelect = (props) => {
   };
 
   return (
-    div({ className: 'dropdown select-dropdown', id, name: label }, [
-      a({
-        className: 'btn select-btn btn-secondary dropdown-toggle',
-        role: 'button',
-        id: 'dropdownMenuLink',
-        'data-toggle': 'dropdown',
-        'aria-haspopup': true,
-        'aria-expanded': false
-      }, [
-        div({
-          style: { width: '100%' }
-        }, [
-          span(currentDisplay),
-          span({ className: 'caret select-caret caret-margin', style: { right: '2%' } })
-        ])
-      ]),
-      div({
-        className: 'dropdown-menu select-dropdown-menu'
-      }, [
-        input({
-          type: 'text',
-          placeholder: searchPlaceholder ? searchPlaceholder : 'Search...',
-          className: 'search-bar',
-          onChange:() => handleSearch(searchTerms),
-          ref: searchTerms
-        }),
-        div({
-          className: 'dropdown-divider'
-        }),
-        ul({}, filteredList.map(item => {
-          return li({
-            className: item.key === currentSelection
-              ? 'dropdown-item select-dropdown-item active'
-              : 'dropdown-item select-dropdown-item',
-            onClick: select(item.key),
-          }, [item.displayText]);
-        }))
-      ])
-    ])
+    <div className="dropdown select-dropdown" id={id} name={label}>
+      <a
+        className="btn select-btn btn-secondary dropdown-toggle"
+        role="button"
+        id="dropdownMenuLink"
+        data-toggle="dropdown"
+        aria-haspopup="true"
+        aria-expanded="false"
+      >
+        <div style={{ width: '100%' }}>
+          <span>{currentDisplay}</span>
+          <span className="caret select-caret caret-margin" style={{ right: '2%' }}></span>
+        </div>
+      </a>
+      <div className="dropdown-menu select-dropdown-menu">
+        <input
+          type="text"
+          placeholder={searchPlaceholder ? searchPlaceholder : 'Search...'}
+          className="search-bar"
+          onChange={() => handleSearch(searchTerms)}
+          ref={searchTerms}
+        />
+        <div className="dropdown-divider"></div>
+        <ul>
+          {filteredList.map(item => (
+            <li
+              className={
+                item.key === currentSelection
+                  ? 'dropdown-item select-dropdown-item active'
+                  : 'dropdown-item select-dropdown-item'
+              }
+              onClick={select(item.key)}
+            >
+              {item.displayText}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
   );
 };