@intuitionrobotics/thunderstorm
Version:
91 lines • 2.99 kB
JavaScript
import * as React from 'react';
import {} from 'react';
import { MenuModule } from "./MenuModule.js";
import { BaseComponent } from "../../core/BaseComponent.js";
import { stopPropagation } from '../../utils/tools.js';
import { Tree } from "../../components/tree/Tree.js";
import { generateHex } from "@intuitionrobotics/ts-common";
const defaultStyle = {
width: 225,
overflowX: "hidden",
overflowY: "scroll",
maxHeight: "60vh",
borderRadius: 2,
boxShadow: "1px 1px 4px 0 rgba(0, 0, 0, 0.3)",
border: "solid 1px transparent",
backgroundColor: "#fff",
position: "absolute"
};
const overlayStyle = {
cursor: "default",
position: "fixed",
top: 0,
left: 0,
bottom: 0,
right: 0,
height: "100vh",
width: "100vw",
zIndex: 3333
};
export class PopupMenu extends BaseComponent {
overlayRef = React.createRef();
__onMenuDisplay = (element) => this.setState({ element });
__onMenuHide = (id) => {
const element = this.state.element;
if (!element || element.id !== id)
return;
this.setState({ element: undefined });
};
componentDidMount() {
this.eventListenersEffect();
}
componentDidUpdate() {
this.eventListenersEffect();
}
componentWillUnmount() {
const current = this.overlayRef.current;
if (current) {
current.removeEventListener("mousedown", this.stopClickCascading, false);
current.removeEventListener("mouseup", this.closeMenu, false);
}
}
stopClickCascading = (e) => {
if (this.overlayRef.current === e.target)
stopPropagation(e);
};
closeMenu = (e) => {
if (e.which === 3)
return;
if (this.overlayRef.current !== e.target)
return;
stopPropagation(e);
const id = this.state?.element?.id;
if (id)
MenuModule.hide(id);
this.setState({ element: undefined });
};
style = (pos, css) => ({
...defaultStyle,
...css,
...pos
});
render() {
const element = this.state?.element;
if (!element)
return null;
//tree instead of menu component
return React.createElement("div", { style: { position: "absolute" } },
React.createElement("div", { id: "overlay", ref: this.overlayRef, style: overlayStyle },
React.createElement("div", { style: this.style(element.pos, element.css) },
React.createElement(Tree, { id: generateHex(8), adapter: element.adapter, onNodeClicked: element.onNodeClicked, indentPx: 0 }))));
}
eventListenersEffect = () => {
const _current = this.overlayRef.current;
if (!_current)
return;
// _current.addEventListener("mousedown", this.stopClickCascading, false);
_current.addEventListener("mousedown", this.closeMenu, false);
};
}
;
//# sourceMappingURL=PopupMenu.js.map