github.com/pingcap/tiflow@v0.0.0-20240520035814-5bf52d54e205/dm/ui/src/utils/search.ts (about)

     1  import { useEffect, useRef, useState } from 'react'
     2  import Fuse from 'fuse.js'
     3  import { useDebounce } from 'ahooks'
     4  
     5  export function useFuseSearch<T>(list?: T[], options?: Fuse.IFuseOptions<T>) {
     6    const [keyword, setKeyword] = useState('')
     7    const fuseRef = useRef<Fuse<T>>()
     8    const [result, setResult] = useState<T[]>([])
     9    const debouncedKeyword = useDebounce(keyword, { wait: 600 })
    10    const searchResult = () => {
    11      const val = debouncedKeyword?.trim()
    12      if (val && fuseRef.current) {
    13        setResult(fuseRef.current.search(val).map(i => i.item))
    14      } else {
    15        setResult(list ?? [])
    16      }
    17    }
    18  
    19    useEffect(() => {
    20      if (list && list.length > 0) {
    21        fuseRef.current = new Fuse(list, options)
    22      }
    23      searchResult()
    24    }, [list])
    25  
    26    useEffect(() => {
    27      searchResult()
    28    }, [debouncedKeyword])
    29  
    30    return {
    31      result,
    32      keyword,
    33      setKeyword,
    34    }
    35  }