Refactor searchable select

vacuumlabs · Jun 8, 2021 · bca4044 · bca4044
1 parent 83dd51d
commit bca4044
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 11 deletions.
diff --git a/app/frontend/components/common/searchableSelect.tsx b/app/frontend/components/common/searchableSelect.tsx
@@ -8,15 +8,16 @@ import onSubTreeBlur from '../../../frontend/helpers/onSubTreeBlur'
 interface Props<T> {
   wrapperClassName?: string
   label?: string
+  labelClassName?: string
   defaultItem: T
   items: T[]
   displaySelectedItem: (t: T) => string | h.JSX.Element
   displaySelectedItemClassName?: string
   displayItem: (t: T) => string | h.JSX.Element
   onSelect: (t: T) => void
   showSearch: boolean
-  searchPredicate: (query: string, t: T) => boolean
-  searchPlaceholder: string
+  searchPredicate?: (query: string, t: T) => boolean
+  searchPlaceholder?: string
   dropdownClassName?: string
   getDropdownWidth?: () => string
 }
@@ -25,7 +26,8 @@ interface Props<T> {
 const SearchableSelect = <T extends {}>({
   wrapperClassName,
   label,
-  defaultItem, // TODO: do we need this, should default item by in state of the parent component?
+  labelClassName,
+  defaultItem,
   items,
   displaySelectedItem,
   displaySelectedItemClassName,
@@ -41,9 +43,10 @@ const SearchableSelect = <T extends {}>({
   const dropdownEl = useRef<HTMLDivElement>(null)
   const wrapperEl = useRef<HTMLDivElement>(null)
   const [visible, setVisible] = useState(false)
-  const [dropdownWidth, setDropdownWidth] = useState(getDropdownWidth())
+  const [dropdownWidth, setDropdownWidth] = useState(getDropdownWidth ? getDropdownWidth() : '')
   const [search, setSearch] = useState('')
-  const shouldShowItem = (item: T) => searchPredicate(search, item)
+  const [selectedItem, setSelectedItem] = useState(defaultItem)
+  const shouldShowItem = (item: T) => (searchPredicate ? searchPredicate(search, item) : true)
   const showDropdown = (bool: boolean) => {
     setVisible(bool)
     setSearch('')
@@ -78,14 +81,18 @@ const SearchableSelect = <T extends {}>({
       // @ts-ignore
       onfocusout={(e) => onSubTreeBlur(e, wrapperEl, () => showDropdown(false))}
     >
-      {label && <div className="searchable-select-label">{label}</div>}
+      {label && (
+        <div className={`searchable-select-label ${optionalClassName(labelClassName)}`}>
+          {label}
+        </div>
+      )}
       <div
         className={`searchable-select ${visible ? 'focus ' : ''}${optionalClassName(
           displaySelectedItemClassName
         )}`}
         onClick={() => showDropdown(!visible)}
       >
-        {displaySelectedItem(defaultItem)}
+        {displaySelectedItem(selectedItem)}
       </div>
       <div
         ref={dropdownEl}
@@ -101,7 +108,7 @@ const SearchableSelect = <T extends {}>({
             className="searchable-select-input"
             value={search}
             onInput={(event: any) => setSearch(event.target.value)}
-            placeholder={searchPlaceholder}
+            placeholder={searchPlaceholder != null ? searchPlaceholder : ''}
           />
         )}
         <div>
@@ -113,6 +120,7 @@ const SearchableSelect = <T extends {}>({
                 onClick={() => {
                   setVisible(false)
                   onSelect(item)
+                  setSelectedItem(item)
                 }}
               >
                 {displayItem(item)}
@@ -124,4 +132,4 @@ const SearchableSelect = <T extends {}>({
   )
 }
 
-export default connect((state: State) => ({}), actions)(SearchableSelect)
+export default SearchableSelect
diff --git a/app/frontend/components/pages/sendAda/sendAdaPage.tsx b/app/frontend/components/pages/sendAda/sendAdaPage.tsx
@@ -231,10 +231,10 @@ const SendAdaPage = ({
     [updateAmount]
   )
 
-  const displayDropdownSelectedItem = ({assetName, policyId}: DropdownAssetItem) => (
+  const displayDropdownSelectedItem = ({assetName, policyId, type}: DropdownAssetItem) => (
     <div className="wrapper">
       {assetName}
-      {selectedAsset.type === AssetFamily.TOKEN && (
+      {type === AssetFamily.TOKEN && (
         <div className="hash">
           (<div className="ellipsis">{policyId}</div>)
         </div>