import React from "react" ; import Menu from "@material-ui/core/Menu" ; import { MUIDocDropdownMenuItems } from "./MUIDocDropdownMenuItems" ; import isEqual from "react-fast-compare" ; export type ContextMenuHandler = ( event : React . MouseEvent < HTMLElement > ) => void ; interface IProps { readonly render : ( contextMenuHandler : ContextMenuHandler ) => void ; } interface IState { readonly mouseX ? : number ; readonly mouseY ? : number ; } export class MUIDocContextMenu extends React . Component < IProps , IState > { constructor ( props ) { super ( props ) ; this . handleContextMenu = this . handleContextMenu . bind ( this ) ; this . state = { } ; } public shouldComponentUpdate ( nextProps , nextState ) { return ! isEqual ( this . props , nextProps ) || ! isEqual ( this . state , nextState ) ; } private handleContextMenu ( event ) { event . preventDefault ( ) ; this . setState ( { mouseX : event . clientX - 2 , mouseY : event . clientY - 4 , } ) ; } public render ( ) { const handleClose = ( ) => { this . setState ( { mouseX : undefined , mouseY : undefined } ) ; } ; function handleContextMenu ( event ) { event . preventDefault ( ) ; } return ( < > { this . state . mouseX !== undefined && this . state . mouseY !== undefined && < Menu keepMounted open = { this . state . mouseX !== undefined } onClose = { ( ) => handleClose ( ) } onClick = { ( ) => handleClose ( ) } onContextMenu = { handleContextMenu } anchorReference = "anchorPosition" anchorPosition = { { top : this . state . mouseY , left : this . state . mouseX } } > < div > < MUIDocDropdownMenuItems /> < /div> < /Menu>} { this . props . render ( this . handleContextMenu ) } < />); } }