Tree() — react Function Reference

Source Code

packages/react-devtools-shared/src/devtools/views/Components/Tree.js lines 76–548

export default function Tree(): React.Node {
  const dispatch = useContext(TreeDispatcherContext);
  const {
    activityID,
    numElements,
    ownerID,
    searchIndex,
    searchResults,
    inspectedElementID,
    inspectedElementIndex,
  } = useContext(TreeStateContext);
  const bridge = useContext(BridgeContext);
  const store = useContext(StoreContext);
  const {hideSettings} = useContext(OptionsContext);
  const {lineHeight} = useContext(SettingsContext);

  const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] =
    useState(false);
  const {highlightHostInstance, clearHighlightHostInstance} =
    useHighlightHostInstance();
  const [treeFocused, setTreeFocused] = useState<boolean>(false);
  const componentsPanelVisible = useExtensionComponentsPanelVisibility(bridge);

  const treeRef = useRef<HTMLDivElement | null>(null);
  const focusTargetRef = useRef<HTMLDivElement | null>(null);
  const listDOMElementRef = useRef<Element | null>(null);
  const setListDOMElementRef = useCallback((listDOMElement: Element) => {
    listDOMElementRef.current = listDOMElement;

    // Controls the initial horizontal offset of the Tree if the element was pre-selected. For example, via Elements panel in browser DevTools.
    // Initial vertical offset is controlled via initialScrollOffset prop of the FixedSizeList component.
    if (
      !componentsPanelVisible ||
      inspectedElementIndex == null ||
      listDOMElement == null
    ) {
      return;
    }

    const element = store.getElementAtIndex(inspectedElementIndex);
    if (element == null) {
      return;
    }

    const viewportLeft = listDOMElement.scrollLeft;
    const viewportRight = viewportLeft + listDOMElement.clientWidth;
    const elementLeft = calculateElementOffset(element.depth);
    // Because of virtualization, this element might not be rendered yet; we can't look up its width.
    // Assuming that it may take up to the half of the viewport.
    const elementRight = elementLeft + listDOMElement.clientWidth / 2;

    const isElementFullyVisible =
      elementLeft >= viewportLeft && elementRight <= viewportRight;

    if (!isElementFullyVisible) {
      const horizontalDelta =
        Math.min(0, elementLeft - viewportLeft) +
        Math.max(0, elementRight - viewportRight);

      // $FlowExpectedError[incompatible-call] Flow doesn't support instant as an option for behavior.
      listDOMElement.scrollBy({
        left: horizontalDelta,
        behavior: 'instant',
      });
    }
  }, []);

  useEffect(() => {
    if (!componentsPanelVisible || inspectedElementIndex == null) {
      return;
    }

    const listDOMElement = listDOMElementRef.current;
    if (listDOMElement == null) {
      return;
    }

    const viewportHeight = listDOMElement.clientHeight;
    const viewportLeft = listDOMElement.scrollLeft;
    const viewportRight = viewportLeft + listDOMElement.clientWidth;
    const viewportTop = listDOMElement.scrollTop;