Function createContextMenu

packages/utils/src/context-menu.tsx:195–230

(children: React.ReactNode[], {
  event,
  offset = [0, 0],
}: {
  event: MouseEvent | React.MouseEvent;
  offset?: [number, number];
})

}

export function createContextMenu(children: React.ReactNode[], {
  event,
  offset = [0, 0],
}: {
  event: MouseEvent | React.MouseEvent;
  offset?: [number, number];
}) {
  event.preventDefault();
  event.stopPropagation();

  const viewportWidth = window.innerWidth;
  const viewportHeight = window.innerHeight;
  const dividerCount = React.Children.count(children.filter(child => React.isValidElement(child) && child.type === Divider));
  const popupItemCount = React.Children.count(children.filter(child => React.isValidElement(child) && (child.type === PopupItem || child.type === Item)));
  const menuHeight = popupItemCount * parseInt(getMenuItemHeight(), 10) + dividerCount * 8 + 16;
  const menuWidthLimit = 200;
  let x = event.clientX + offset[0];
  let y = event.clientY + offset[1];
  if (x + menuWidthLimit > viewportWidth) {
    x = x - menuWidthLimit;
  }
  if (y + menuHeight > viewportHeight) {
    y = y - menuHeight;
  }

  const menuInstance = Menu.create({
    target: document.body,
    offset: [x, y],
    children,
    className: 'engine-context-menu',
  });

  destroyFn = (menuInstance as any).destroy;

  return destroyFn;
}