repositionToFit() — react Function Reference

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

Function javascript BabelCompiler Validation called by 1

Entity Profile

BabelCompiler→ Validation→ repositionToFit() — react Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/ContextMenu/ContextMenu.js lines 24–45

function repositionToFit(element: HTMLElement, x: number, y: number) {
  const ownerWindow = element.ownerDocument.defaultView;
  if (y + element.offsetHeight >= ownerWindow.innerHeight) {
    if (y - element.offsetHeight > 0) {
      element.style.top = `${y - element.offsetHeight}px`;
    } else {
      element.style.top = '0px';
    }
  } else {
    element.style.top = `${y}px`;
  }

  if (x + element.offsetWidth >= ownerWindow.innerWidth) {
    if (x - element.offsetWidth > 0) {
      element.style.left = `${x - element.offsetWidth}px`;
    } else {
      element.style.left = '0px';
    }
  } else {
    element.style.left = `${x}px`;
  }
}