metamask-extension/ui/app/pages/swaps/searchable-item-list/list-item-search/list-item-search.component.js

import React, { useState, useEffect, useRef } from 'react'
import PropTypes from 'prop-types'
import Fuse from 'fuse.js'
import InputAdornment from '@material-ui/core/InputAdornment'
import TextField from '../../../../components/ui/text-field'
import { usePrevious } from '../../../../hooks/usePrevious'

const renderAdornment = () => (
  <InputAdornment position="start" style={{ marginRight: '12px' }}>
    <img src="images/search.svg" width="17" height="17" alt="" />
  </InputAdornment>
)

export default function ListItemSearch({
  onSearch,
  error,
  listToSearch = [],
  fuseSearchKeys,
  searchPlaceholderText,
  defaultToAll,
}) {
  const fuseRef = useRef()
  const [searchQuery, setSearchQuery] = useState('')

  const handleSearch = (newSearchQuery) => {
    setSearchQuery(newSearchQuery)
    const fuseSearchResult = fuseRef.current.search(newSearchQuery)
    onSearch({
      searchQuery: newSearchQuery,
      results:
        defaultToAll && newSearchQuery === '' ? listToSearch : fuseSearchResult,
    })
  }

  useEffect(() => {
    if (!fuseRef.current) {
      fuseRef.current = new Fuse(listToSearch, {
        shouldSort: true,
        threshold: 0.45,
        location: 0,
        distance: 100,
        maxPatternLength: 32,
        minMatchCharLength: 1,
        keys: fuseSearchKeys,
      })
    }
  }, [fuseSearchKeys, listToSearch])

  const previousListToSearch = usePrevious(listToSearch) || []
  useEffect(() => {
    if (
      fuseRef.current &&
      searchQuery &&
      previousListToSearch !== listToSearch
    ) {
      fuseRef.current.setCollection(listToSearch)
      const fuseSearchResult = fuseRef.current.search(searchQuery)
      onSearch({ searchQuery, results: fuseSearchResult })
    }
  }, [listToSearch, searchQuery, onSearch, previousListToSearch])

  return (
    <TextField
      data-testid="search-list-items"
      className="searchable-item-list__search"
      placeholder={searchPlaceholderText}
      type="text"
      value={searchQuery}
      onChange={(e) => handleSearch(e.target.value)}
      error={error}
      fullWidth
      startAdornment={renderAdornment()}
      autoComplete="off"
      autoFocus
    />
  )
}

ListItemSearch.propTypes = {
  onSearch: PropTypes.func,
  error: PropTypes.string,
  listToSearch: PropTypes.array.isRequired,
  fuseSearchKeys: PropTypes.arrayOf(PropTypes.object).isRequired,
  searchPlaceholderText: PropTypes.string,
  defaultToAll: PropTypes.bool,
}