SuspenseBreadcrumbs() — react Function Reference

Source Code

packages/react-devtools-shared/src/devtools/views/SuspenseTab/SuspenseBreadcrumbs.js lines 279–318

export default function SuspenseBreadcrumbs(): React$Node {
  const treeDispatch = useContext(TreeDispatcherContext);
  const suspenseTreeDispatch = useContext(SuspenseTreeDispatcherContext);

  const {highlightHostInstance, clearHighlightHostInstance} =
    useHighlightHostInstance();

  function handleClick(id: SuspenseNode['id'], event?: SyntheticMouseEvent) {
    if (event !== undefined) {
      // E.g. 3rd party component libraries might omit the event and already prevent default
      // like Reach's MenuItem does.
      event.preventDefault();
    }
    treeDispatch({type: 'SELECT_ELEMENT_BY_ID', payload: id});
    suspenseTreeDispatch({type: 'SELECT_SUSPENSE_BY_ID', payload: id});
  }

  const [elementsTotalWidth, setElementsTotalWidth] = useState(0);
  const containerRef = useRef<HTMLDivElement | null>(null);
  const isOverflowing = useIsOverflowing(containerRef, elementsTotalWidth);

  return (
    <div className={styles.SuspenseBreadcrumbsContainer} ref={containerRef}>
      {isOverflowing ? (
        <SuspenseBreadcrumbsMenu
          onItemClick={handleClick}
          onItemPointerEnter={highlightHostInstance}
          onItemPointerLeave={clearHighlightHostInstance}
        />
      ) : (
        <SuspenseBreadcrumbsFlatList
          onItemClick={handleClick}
          onItemPointerEnter={highlightHostInstance}
          onItemPointerLeave={clearHighlightHostInstance}
          setElementsTotalWidth={setElementsTotalWidth}
        />
      )}
    </div>
  );
}