CanvasPageContextMenu() — react Function Reference

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

Function javascript BabelCompiler Validation calls 2

Entity Profile

BabelCompiler→ Validation→ CanvasPageContextMenu() — react Function Reference

Dependency Diagram

graph TD
  1962c520_14de_6efa_4ec0_669c5452228e["CanvasPageContextMenu()"]
  e0a3b260_ea80_6b59_5c7d_18081c4333a6["CanvasPageContextMenu.js"]
  1962c520_14de_6efa_4ec0_669c5452228e -->|defined in| e0a3b260_ea80_6b59_5c7d_18081c4333a6
  804cd5a5_47ad_6091_4607_cf33ec051361["zoomToBatch()"]
  1962c520_14de_6efa_4ec0_669c5452228e -->|calls| 804cd5a5_47ad_6091_4607_cf33ec051361
  596be607_c89a_b650_6e31_4bacc2d90143["copySummary()"]
  1962c520_14de_6efa_4ec0_669c5452228e -->|calls| 596be607_c89a_b650_6e31_4bacc2d90143
  style 1962c520_14de_6efa_4ec0_669c5452228e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-timeline/src/CanvasPageContextMenu.js lines 82–182

export default function CanvasPageContextMenu({
  canvasRef,
  timelineData,
  hoveredEvent,
  viewState,
  canvasWidth,
  closedMenuStub,
  ref,
}: Props): React.Node {
  const menuItems = useMemo<ContextMenuItem[]>(() => {
    if (hoveredEvent == null) {
      return [];
    }

    const {
      componentMeasure,
      flamechartStackFrame,
      measure,
      networkMeasure,
      schedulingEvent,
      suspenseEvent,
    } = hoveredEvent;
    const items: ContextMenuItem[] = [];

    if (componentMeasure != null) {
      items.push({
        onClick: () => copy(componentMeasure.componentName),
        content: 'Copy component name',
      });
    }

    if (networkMeasure != null) {
      items.push({
        onClick: () => copy(networkMeasure.url),
        content: 'Copy URL',
      });
    }

    if (schedulingEvent != null) {
      items.push({
        onClick: () => copy(schedulingEvent.componentName),
        content: 'Copy component name',
      });
    }

    if (suspenseEvent != null) {
      items.push({
        onClick: () => copy(suspenseEvent.componentName),
        content: 'Copy component name',
      });
    }

    if (measure != null) {
      items.push(
        {
          onClick: () =>
            zoomToBatch(timelineData, measure, viewState, canvasWidth),
          content: 'Zoom to batch',
        },
        {
          onClick: withPermissionsCheck({permissions: ['clipboardWrite']}, () =>
            copySummary(timelineData, measure),
          ),
          content: 'Copy summary',
        },
      );
    }

    if (flamechartStackFrame != null) {
      items.push(
        {
          onClick: withPermissionsCheck({permissions: ['clipboardWrite']}, () =>
            copy(flamechartStackFrame.scriptUrl),
          ),
          content: 'Copy file path',
        },
        {
          onClick: withPermissionsCheck({permissions: ['clipboardWrite']}, () =>
            copy(
              `line ${flamechartStackFrame.locationLine ?? ''}, column ${
                flamechartStackFrame.locationColumn ?? ''