import React, { RefObject, Dispatch, SetStateAction, useEffect } from 'react'; import { IPoint } from '../../Interfaces/IPoint'; export function UseMouseEvents( isContextMenuOpen: boolean, elementRef: RefObject, setIsContextMenuOpen: Dispatch>, setOnClickContainerId: Dispatch>, setContextMenuPosition: Dispatch> ): void { useEffect(() => { function OnContextMenu(event: MouseEvent): void { return HandleRightClick( event, setIsContextMenuOpen, setOnClickContainerId, setContextMenuPosition ); } function OnLeftClick(): void { return HandleLeftClick( isContextMenuOpen, setIsContextMenuOpen, setOnClickContainerId ); } elementRef.current?.addEventListener( 'contextmenu', OnContextMenu ); window.addEventListener( 'click', OnLeftClick ); return () => { elementRef.current?.removeEventListener( 'contextmenu', OnContextMenu ); window.removeEventListener( 'click', OnLeftClick ); }; }); } export function HandleRightClick( event: MouseEvent, setIsContextMenuOpen: React.Dispatch>, setOnClickContainerId: React.Dispatch>, setContextMenuPosition: React.Dispatch> ): void { event.preventDefault(); if (!(event.target instanceof HTMLButtonElement)) { setIsContextMenuOpen(false); setOnClickContainerId(''); return; } const contextMenuPosition: IPoint = { x: event.pageX, y: event.pageY }; setIsContextMenuOpen(true); setOnClickContainerId(event.target.id); setContextMenuPosition(contextMenuPosition); } export function HandleLeftClick( isContextMenuOpen: boolean, setIsContextMenuOpen: React.Dispatch>, setOnClickContainerId: React.Dispatch> ): void { if (!isContextMenuOpen) { return; } setIsContextMenuOpen(false); setOnClickContainerId(''); }