Function useContextMenu

src/components/contextMenu/index.tsx:12–47

(
    props: IContextMenuProps
)

export interface IContextMenu extends IContextView {}

export function useContextMenu(
    props: IContextMenuProps
): IContextMenu | undefined {
    const { anchor, render } = props;

    if (!anchor) {
        return undefined;
    }

    const contextView = useContextView({
        render,
    });

    const onContextMenu = (e: MouseEvent) => {
        // ONLY works over the anchor ele
        if (e.target === e.currentTarget) {
            e.preventDefault();
            contextView!.show(
                {
                    x: e.clientX,
                    y: e.clientY,
                },
                render
            );
        }
    };

    anchor.addEventListener('contextmenu', onContextMenu);

    const dispose = () => {
        contextView!.hide();
        anchor.removeEventListener('contextmenu', onContextMenu);
    };

    return { ...contextView, dispose };
}