ContextMenu() — react Function Reference

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

Function javascript BabelCompiler Validation calls 1

Entity Profile

BabelCompiler→ Validation→ ContextMenu() — react Function Reference

Dependency Diagram

graph TD
  b286a239_8afb_5e3f_a9eb_6310cf2e0167["ContextMenu()"]
  6b15267e_6087_7e9b_ceab_28e7a8ab3cd9["ContextMenu.js"]
  b286a239_8afb_5e3f_a9eb_6310cf2e0167 -->|defined in| 6b15267e_6087_7e9b_ceab_28e7a8ab3cd9
  2da3f52c_377e_5c96_84cf_f595e6d976b2["repositionToFit()"]
  b286a239_8afb_5e3f_a9eb_6310cf2e0167 -->|calls| 2da3f52c_377e_5c96_84cf_f595e6d976b2
  style b286a239_8afb_5e3f_a9eb_6310cf2e0167 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js lines 55–117

export default function ContextMenu({
  anchorElementRef,
  position,
  items,
  hide,
  ref = createRef(),
}: Props): React.Node {
  // This works on the assumption that ContextMenu component is only rendered when it should be shown
  const anchor = anchorElementRef.current;

  if (anchor == null) {
    throw new Error(
      'Attempted to open a context menu for an element, which is not mounted',
    );
  }

  const ownerDocument = anchor.ownerDocument;
  const portalContainer = ownerDocument.querySelector(
    '[data-react-devtools-portal-root]',
  );

  useLayoutEffect(() => {
    const menu = ((ref.current: any): HTMLElement);

    function hideUnlessContains(event: Event) {
      if (!menu.contains(((event.target: any): Node))) {
        hide();
      }
    }

    ownerDocument.addEventListener('mousedown', hideUnlessContains);
    ownerDocument.addEventListener('touchstart', hideUnlessContains);
    ownerDocument.addEventListener('keydown', hideUnlessContains);

    const ownerWindow = ownerDocument.defaultView;
    ownerWindow.addEventListener('resize', hide);

    repositionToFit(menu, position.x, position.y);

    return () => {
      ownerDocument.removeEventListener('mousedown', hideUnlessContains);
      ownerDocument.removeEventListener('touchstart', hideUnlessContains);
      ownerDocument.removeEventListener('keydown', hideUnlessContains);

      ownerWindow.removeEventListener('resize', hide);
    };
  }, []);

  if (portalContainer == null || items.length === 0) {
    return null;
  }

  return createPortal(
    <div className={styles.ContextMenu} ref={ref}>
      {items.map(({onClick, content}, index) => (
        <ContextMenuItem key={index} onClick={onClick} hide={hide}>
          {content}
        </ContextMenuItem>
      ))}
    </div>,
    portalContainer,
  );
}