import { contextMenusAtom } from "./model" ; import { Box } from "@chakra-ui/react" ; import React , { MouseEvent } from "react" ; import { useRecoilState } from "recoil" ; type Props = { menuId : string ; passData ? : unknown ; onTrigger ? : ( ) => void ; } ; export const ContextMenuTrigger = ( { children , menuId , passData , onTrigger = ( ) => { return ; } , } ) => { const [ , setContextMenusState ] = useRecoilState ( contextMenusAtom ) ; return ( < Box onContextMenu = { ( event ) => { event . preventDefault ( ) ; onTrigger ( ) ; setContextMenusState ( ( oldState ) => ( { ... oldState , passData , position : { x : event . clientX , y : event . clientY , } , menus : oldState . menus . find ( ( m ) => m . id === menuId ) ? oldState . menus . map ( ( m ) => { if ( m . id === menuId ) { return { ... m , isOpen : true , } ; } return { ... m , isOpen : false , } ; } ) : [ { id : menuId , isOpen : true , } , ... oldState . menus . map ( ( m ) => { return { ... m , isOpen : false , } ; } ) , ] , } ) ) ; } } > { children } < /Box>); } ;