1
0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00

Allowing to open menu by contextmenu event

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2020-12-25 10:59:56 +03:00
parent 0120073983
commit 3930822268

View File

@ -31,6 +31,7 @@ export interface MenuProps {
closeOnScroll?: boolean; // applicable when usePortal={true} closeOnScroll?: boolean; // applicable when usePortal={true}
position?: MenuPosition; // applicable when usePortal={false} position?: MenuPosition; // applicable when usePortal={false}
children?: ReactNode; children?: ReactNode;
toggleEvent?: "click" | "contextmenu";
} }
interface State { interface State {
@ -44,6 +45,7 @@ const defaultPropsMenu: Partial<MenuProps> = {
closeOnClickItem: true, closeOnClickItem: true,
closeOnClickOutside: true, closeOnClickOutside: true,
closeOnScroll: false, closeOnScroll: false,
toggleEvent: "click"
}; };
@autobind() @autobind()
@ -72,18 +74,19 @@ export class Menu extends React.Component<MenuProps, State> {
this.opener = document.getElementById(this.props.htmlFor); // might not exist in sub-menus this.opener = document.getElementById(this.props.htmlFor); // might not exist in sub-menus
if (this.opener) { if (this.opener) {
this.opener.addEventListener("click", this.toggle); this.opener.addEventListener(this.props.toggleEvent, this.toggle);
this.opener.addEventListener("keydown", this.onKeyDown); this.opener.addEventListener("keydown", this.onKeyDown);
} }
this.elem.addEventListener("keydown", this.onKeyDown); this.elem.addEventListener("keydown", this.onKeyDown);
window.addEventListener("resize", this.onWindowResize); window.addEventListener("resize", this.onWindowResize);
window.addEventListener("click", this.onClickOutside, true); window.addEventListener("click", this.onClickOutside, true);
window.addEventListener("scroll", this.onScrollOutside, true); window.addEventListener("scroll", this.onScrollOutside, true);
window.addEventListener("contextmenu", this.onContextMenu, true);
} }
componentWillUnmount() { componentWillUnmount() {
if (this.opener) { if (this.opener) {
this.opener.removeEventListener("click", this.toggle); this.opener.removeEventListener(this.props.toggleEvent, this.toggle);
this.opener.removeEventListener("keydown", this.onKeyDown); this.opener.removeEventListener("keydown", this.onKeyDown);
} }
this.elem.removeEventListener("keydown", this.onKeyDown); this.elem.removeEventListener("keydown", this.onKeyDown);
@ -198,6 +201,10 @@ export class Menu extends React.Component<MenuProps, State> {
} }
} }
onContextMenu() {
this.close();
}
onWindowResize() { onWindowResize() {
if (!this.isOpen) return; if (!this.isOpen) return;
this.refreshPosition(); this.refreshPosition();