ComponentSearchInput() — react Function Reference

Source Code

packages/react-devtools-shared/src/devtools/views/Components/ComponentSearchInput.js lines 19–52

export default function ComponentSearchInput(): React.Node {
  const [localSearchQuery, setLocalSearchQuery] = useState('');
  const {searchIndex, searchResults} = useContext(TreeStateContext);
  const transitionDispatch = useContext(TreeDispatcherContext);

  const search = useCallback(
    (text: string) => {
      setLocalSearchQuery(text);
      transitionDispatch({type: 'SET_SEARCH_TEXT', payload: text});
    },
    [setLocalSearchQuery, transitionDispatch],
  );
  const goToNextResult = useCallback(
    () => transitionDispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'}),
    [transitionDispatch],
  );
  const goToPreviousResult = useCallback(
    () => transitionDispatch({type: 'GO_TO_PREVIOUS_SEARCH_RESULT'}),
    [transitionDispatch],
  );

  return (
    <SearchInput
      goToNextResult={goToNextResult}
      goToPreviousResult={goToPreviousResult}
      placeholder="Search (text or /regex/)"
      search={search}
      searchIndex={searchIndex}
      searchResultsCount={searchResults.length}
      searchText={localSearchQuery}
      testName="ComponentSearchInput"
    />
  );
}