Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | import React, { useEffect, useRef } from "react"; import useNestedMenu from "ui/hooks/use-nested-menu"; import { PositionedPortal } from "ui/layout/PositionedPortal"; import { Menu } from "ui/menu/Menu"; interface ContextMenuProps { readonly x: number; readonly y: number; readonly children?: JSX.Element[]; readonly onClose?: () => void; } export const ContextMenu = ({ x, y, children, onClose }: ContextMenuProps) => { const { menuRef, isOpen, childrenWithProps } = useNestedMenu( children, true, "right" ); const wasOpen = useRef(isOpen); useEffect(() => { Iif (wasOpen.current && !isOpen) { onClose?.(); } wasOpen.current = isOpen; }, [isOpen, onClose]); return isOpen ? ( <PositionedPortal x={x} y={y} offsetX={-2} offsetY={-10}> <Menu ref={menuRef}>{childrenWithProps}</Menu> </PositionedPortal> ) : null; }; |