@blueprintjs/core
Version:
Core styles & components
58 lines • 3.63 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ContextMenuPopover = void 0;
const tslib_1 = require("tslib");
const react_1 = require("react");
const jsx_runtime_1 = require("react/jsx-runtime");
/*
* Copyright 2023 Palantir Technologies, Inc. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const react_2 = require("react");
const common_1 = require("../../common");
const popover_1 = require("../popover/popover");
const portal_1 = require("../portal/portal");
/**
* A floating popover which is positioned at a given target offset inside its parent element container.
* Used to display context menus. Note that this behaves differently from other popover components like
* Popover and Tooltip, which wrap their children with interaction handlers -- if you're looking for the whole
* interaction package, use ContextMenu instead.
*
* @see https://blueprintjs.com/docs/#core/components/context-menu-popover
*/
exports.ContextMenuPopover = (0, react_2.memo)(function ContextMenuPopover(props) {
const { content, popoverClassName, onClose, isDarkTheme = false, rootBoundary = "viewport", targetOffset, transitionDuration = 100, ...popoverProps } = props;
const cancelContextMenu = (0, react_2.useCallback)((e) => e.preventDefault(), []);
// Popover should attach its ref to the virtual target we render inside a Portal, not the "inline" child target
const renderTarget = (0, react_2.useCallback)(({ ref }) => ((0, jsx_runtime_1.jsx)(portal_1.Portal, { children: (0, jsx_runtime_1.jsx)("div", { className: common_1.Classes.CONTEXT_MENU_VIRTUAL_TARGET, style: targetOffset, ref: ref }) })), [targetOffset]);
const handleInteraction = (0, react_2.useCallback)((nextOpenState) => {
if (!nextOpenState) {
onClose?.();
}
}, [onClose]);
return ((0, react_1.createElement)(popover_1.Popover, { placement: "right-start", rootBoundary: rootBoundary, transitionDuration: transitionDuration, ...popoverProps, content:
// this prevents right-clicking inside our context menu
(0, jsx_runtime_1.jsx)("div", { onContextMenu: cancelContextMenu, children: content }), enforceFocus: false,
// Generate key based on offset so that a new Popover instance is created
// when offset changes, to force recomputing position.
key: getPopoverKey(targetOffset), hasBackdrop: true, backdropProps: { className: common_1.Classes.CONTEXT_MENU_BACKDROP }, minimal: true, onInteraction: handleInteraction, popoverClassName: (0, classnames_1.default)(common_1.Classes.CONTEXT_MENU_POPOVER, popoverClassName, {
[common_1.Classes.DARK]: isDarkTheme,
}), positioningStrategy: "fixed", renderTarget: renderTarget }));
});
exports.ContextMenuPopover.displayName = `${common_1.DISPLAYNAME_PREFIX}.ContextMenuPopover`;
function getPopoverKey(targetOffset) {
return targetOffset === undefined ? "default" : `${targetOffset.left}x${targetOffset.top}`;
}
//# sourceMappingURL=contextMenuPopover.js.map