react/packages/react-devtools-shared/src/devtools/ContextMenu/useContextMenu.js

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import {useContext, useEffect} from 'react';
import {RegistryContext} from './Contexts';

import type {ElementRef} from 'react';

export default function useContextMenu({
  data,
  id,
  ref,
}: {|
  data: Object,
  id: string,
  ref: ElementRef<HTMLElement>,
|}) {
  const {showMenu} = useContext(RegistryContext);

  useEffect(
    () => {
      if (ref.current !== null) {
        const handleContextMenu = event => {
          event.preventDefault();
          event.stopPropagation();

          const pageX =
            event.pageX || (event.touches && event.touches[0].pageX);
          const pageY =
            event.pageY || (event.touches && event.touches[0].pageY);

          showMenu({data, id, pageX, pageY});
        };

        const trigger = ref.current;
        trigger.addEventListener('contextmenu', handleContextMenu);

        return () => {
          trigger.removeEventListener('contextmenu', handleContextMenu);
        };
      }
    },
    [data, id, showMenu],
  );
}