@itwin/core-react
Version:
A react component library of iTwin.js UI general purpose components
59 lines • 2.88 kB
JavaScript
/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
/** @packageDocumentation
* @module ContextMenu
*/
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ContextMenu } from "./ContextMenu.js";
/** GlobalContextMenu React component used to display a [[ContextMenu]] at the cursor
* @public
* @deprecated in 4.16.0. Use {@link https://itwinui.bentley.com/docs/dropdownmenu iTwinUI DropdownMenu} component instead.
*/
export class GlobalContextMenu extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
parentDocument: null,
};
this._handleRefSet = (popupDiv) => {
const parentDocument = popupDiv?.ownerDocument ?? null;
if (parentDocument) {
this._container = parentDocument.createElement("div");
this._container.id =
this.props.identifier !== undefined
? `dialog-${this.props.identifier}`
: "core-global-context-menu";
let rt = parentDocument.getElementById("core-global-context-menu-root");
if (!rt) {
rt = parentDocument.createElement("div");
rt.id = "core-global-context-menu-root";
(parentDocument.body.querySelector('[data-root-container="appui-root-id"]') ?? parentDocument.body).appendChild(rt);
}
rt.appendChild(this._container);
// used to support component rendering in pop-out window
this.setState({ parentDocument });
}
};
}
componentWillUnmount() {
if (this._container && this._container.parentElement) {
// cleanup
this._container.parentElement.removeChild(this._container);
}
}
render() {
const { x, y, identifier, contextMenuComponent, ...props } = this.props;
const positioningStyle = {
left: x,
top: y,
};
const CtxMenu = contextMenuComponent || ContextMenu;
return (React.createElement("div", { ref: this._handleRefSet, style: { display: "none" } }, this.state.parentDocument &&
ReactDOM.createPortal(React.createElement("div", { className: "core-context-menu-global", style: positioningStyle },
React.createElement(CtxMenu, { ...props })), this.state.parentDocument.body.querySelector('[data-root-container="appui-root-id"]') ?? this.state.parentDocument.body)));
}
}
//# sourceMappingURL=GlobalContextMenu.js.map