111 lines
2.6 KiB
TypeScript
111 lines
2.6 KiB
TypeScript
import * as React from 'react';
|
|
import { IPoint } from '../../Interfaces/IPoint';
|
|
import { MenuItem } from './MenuItem';
|
|
|
|
interface IMenuProps {
|
|
getListener: () => HTMLElement | null
|
|
actions: Map<string, IMenuAction[]>
|
|
className?: string
|
|
}
|
|
|
|
export interface IMenuAction {
|
|
/** displayed */
|
|
text: string
|
|
|
|
/** function to be called on button click */
|
|
action: (target: HTMLElement) => void
|
|
}
|
|
|
|
function UseMouseEvents(
|
|
getListener: () => HTMLElement | null,
|
|
setIsOpen: React.Dispatch<React.SetStateAction<boolean>>,
|
|
setContextMenuPosition: React.Dispatch<React.SetStateAction<IPoint>>,
|
|
setTarget: React.Dispatch<React.SetStateAction<HTMLElement | undefined>>
|
|
): void {
|
|
React.useEffect(() => {
|
|
function OnContextMenu(event: MouseEvent): void {
|
|
event.preventDefault();
|
|
const contextMenuPosition: IPoint = { x: event.pageX, y: event.pageY };
|
|
|
|
setIsOpen(true);
|
|
setContextMenuPosition(contextMenuPosition);
|
|
setTarget(event.target as HTMLElement); // this is wrong since target can be null and not undefined
|
|
}
|
|
|
|
function OnLeftClick(): void {
|
|
setIsOpen(false);
|
|
}
|
|
|
|
getListener()?.addEventListener(
|
|
'contextmenu',
|
|
OnContextMenu
|
|
);
|
|
|
|
window.addEventListener(
|
|
'click',
|
|
OnLeftClick
|
|
);
|
|
|
|
return () => {
|
|
getListener()?.removeEventListener(
|
|
'contextmenu',
|
|
OnContextMenu
|
|
);
|
|
|
|
window.removeEventListener(
|
|
'click',
|
|
OnLeftClick
|
|
);
|
|
};
|
|
});
|
|
}
|
|
|
|
export function Menu(props: IMenuProps): JSX.Element {
|
|
const [isOpen, setIsOpen] = React.useState(false);
|
|
const [contextMenuPosition, setContextMenuPosition] = React.useState<IPoint>({
|
|
x: 0,
|
|
y: 0
|
|
});
|
|
const [target, setTarget] = React.useState<HTMLElement>();
|
|
|
|
UseMouseEvents(
|
|
props.getListener,
|
|
setIsOpen,
|
|
setContextMenuPosition,
|
|
setTarget
|
|
);
|
|
|
|
const children: JSX.Element[] = [];
|
|
|
|
if (target !== undefined) {
|
|
let count = 0;
|
|
for (const className of target.classList) {
|
|
count++;
|
|
const actions = props.actions.get(className);
|
|
if (actions === undefined) {
|
|
continue;
|
|
}
|
|
|
|
actions.forEach((action, index) => {
|
|
children.push(<MenuItem
|
|
key={`contextmenu-item-${count}`}
|
|
className="contextmenu-item"
|
|
text={action.text}
|
|
onClick={() => action.action(target)} />);
|
|
});
|
|
};
|
|
}
|
|
|
|
// TODO: Fix css
|
|
const visible = isOpen ? 'visible opacity-1' : 'invisible opacity-0';
|
|
return (
|
|
<div
|
|
className={`fixed ${props.className ?? ''} ${visible}`}
|
|
style={{
|
|
left: contextMenuPosition.x,
|
|
top: contextMenuPosition.y
|
|
}}>
|
|
{ children }
|
|
</div>
|
|
);
|
|
}
|