github.com/pyroscope-io/pyroscope@v0.37.3-0.20230725203016-5f6947968bd0/webapp/javascript/pages/continuous/contextMenu/ContextMenu.tsx (about)

     1  /* eslint-disable react/jsx-props-no-spreading */
     2  import React, { useEffect } from 'react';
     3  import { ControlledMenu, useMenuState } from '@webapp/ui/Menu';
     4  import { ContextMenuProps as PluginContextMenuProps } from '@webapp/components/TimelineChart/ContextMenu.plugin';
     5  
     6  interface ContextMenuProps {
     7    /** position */
     8    position: PluginContextMenuProps['click'];
     9  
    10    /** must be not empty */
    11    children: React.ReactNode;
    12  }
    13  
    14  function ContextMenu(props: ContextMenuProps) {
    15    const { position, children } = props;
    16    const [menuProps, toggleMenu] = useMenuState({ transition: true });
    17  
    18    // https://github.com/szhsin/react-menu/issues/2#issuecomment-719166062
    19    useEffect(() => {
    20      toggleMenu(true);
    21    }, []);
    22  
    23    return (
    24      <>
    25        <ControlledMenu
    26          {...menuProps}
    27          anchorPoint={{ x: position.pageX, y: position.pageY }}
    28          onClose={() => toggleMenu(false)}
    29        >
    30          {children}
    31        </ControlledMenu>
    32      </>
    33    );
    34  }
    35  
    36  export default ContextMenu;