Context menu state and handlers
const { contextMenu, handleContextMenu, handleCloseContextMenu } = useContextMenu();
// In table row:
<tr onContextMenu={(e) => handleContextMenu(e, row.original)}>
// Render menu:
{contextMenu && (
<ContextMenu
x={contextMenu.x}
y={contextMenu.y}
product={contextMenu.product}
onClose={handleCloseContextMenu}
/>
)}
export function useContextMenu(): UseContextMenuReturn {
const [contextMenu, setContextMenu] = useState<ContextMenuState | null>(null);
/**
* Handles context menu open events from right-click actions.
* Prevents the default browser context menu and captures the mouse
* position and product data for the custom context menu.
*
* @param event - The mouse event from the right-click
* @param product - The product data associated with the clicked row
* @source
*/
const handleContextMenu = (event: MouseEvent, product: Product) => {
event.preventDefault();
event.stopPropagation();
setContextMenu({
x: event.clientX,
y: event.clientY,
product,
});
};
/**
* Closes the context menu by setting the state to null.
* This hides the context menu from the UI.
* @source
*/
const handleCloseContextMenu = () => {
setContextMenu(null);
};
return {
contextMenu,
handleContextMenu,
handleCloseContextMenu,
};
}
Hook to manage context menu state and positioning for table rows. Provides handlers for opening, closing, and positioning a context menu.
This hook manages the visibility and positioning of a context menu that appears when users right-click on table rows. It captures the mouse position and associated product data to display relevant actions.