TimelineSearchInput() — react Function Reference

Architecture documentation for the TimelineSearchInput() function in TimelineSearchInput.js from the react codebase.

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ TimelineSearchInput() — react Function Reference

Dependency Diagram

graph TD
  6966a1b1_9f8d_fe86_8881_3275433175ea["TimelineSearchInput()"]
  e3efee68_a282_ee12_670e_539a11c16f99["TimelineSearchInput.js"]
  6966a1b1_9f8d_fe86_8881_3275433175ea -->|defined in| e3efee68_a282_ee12_670e_539a11c16f99
  style 6966a1b1_9f8d_fe86_8881_3275433175ea fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-timeline/src/TimelineSearchInput.js lines 19–47

export default function TimelineSearchInput(props: Props): React.Node {
  const {searchInputContainerRef} = useContext(TimelineContext);
  const {dispatch, searchIndex, searchResults, searchText} = useContext(
    TimelineSearchContext,
  );

  if (searchInputContainerRef.current === null) {
    return null;
  }

  const search = (text: string) =>
    dispatch({type: 'SET_SEARCH_TEXT', payload: text});
  const goToNextResult = () => dispatch({type: 'GO_TO_NEXT_SEARCH_RESULT'});
  const goToPreviousResult = () =>
    dispatch({type: 'GO_TO_PREVIOUS_SEARCH_RESULT'});

  return createPortal(
    <SearchInput
      goToNextResult={goToNextResult}
      goToPreviousResult={goToPreviousResult}
      placeholder="Search components by name"
      search={search}
      searchIndex={searchIndex}
      searchResultsCount={searchResults.length}
      searchText={searchText}
    />,
    searchInputContainerRef.current,
  );
}