@intuitionrobotics/thunderstorm
Version:
94 lines • 3.54 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.PopupMenu = void 0;
const React = require("react");
const MenuModule_1 = require("./MenuModule");
const BaseComponent_1 = require("../../core/BaseComponent");
const tools_1 = require("../../utils/tools");
const Tree_1 = require("../../components/tree/Tree");
const ts_common_1 = require("@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
};
class PopupMenu extends BaseComponent_1.BaseComponent {
constructor() {
super(...arguments);
this.overlayRef = React.createRef();
this.__onMenuDisplay = (element) => this.setState({ element });
this.__onMenuHide = (id) => {
const element = this.state.element;
if (!element || element.id !== id)
return;
this.setState({ element: undefined });
};
this.stopClickCascading = (e) => {
if (this.overlayRef.current === e.target)
(0, tools_1.stopPropagation)(e);
};
this.closeMenu = (e) => {
var _a, _b;
if (e.which === 3)
return;
if (this.overlayRef.current !== e.target)
return;
(0, tools_1.stopPropagation)(e);
const id = (_b = (_a = this.state) === null || _a === void 0 ? void 0 : _a.element) === null || _b === void 0 ? void 0 : _b.id;
id && MenuModule_1.MenuModule.hide(id);
this.setState({ element: undefined });
};
this.style = (pos, css) => (Object.assign(Object.assign(Object.assign({}, defaultStyle), css), pos));
this.eventListenersEffect = () => {
const _current = this.overlayRef.current;
if (!_current)
return;
// _current.addEventListener("mousedown", this.stopClickCascading, false);
_current.addEventListener("mousedown", this.closeMenu, false);
};
}
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);
}
}
render() {
var _a;
const element = (_a = this.state) === null || _a === void 0 ? void 0 : _a.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_1.Tree, { id: (0, ts_common_1.generateHex)(8), adapter: element.adapter, onNodeClicked: element.onNodeClicked, indentPx: 0 }))));
}
}
exports.PopupMenu = PopupMenu;
;
//# sourceMappingURL=PopupMenu.js.map