@eccenca/gui-elements
Version:
GUI elements based on other libraries, usable in React application, written in Typescript.
47 lines • 2.74 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DecoupledOverlay = void 0;
const react_1 = __importDefault(require("react"));
const react_dom_1 = require("react-dom");
const core_1 = require("@blueprintjs/core");
const core_2 = require("@popperjs/core");
const index_1 = require("../../index");
/**
* Use an overlay popover without the necessity to use a target that need to be rendered in place.
* The target is referenced by a selector string or element object.
* It can exist somewhere in the DOM, but it must exist when the overlay is rendered.
* It is always displayed, close it by removement.
*/
const DecoupledOverlay = ({ targetSelectorOrElement, usePortal = true, portalContainer = document.body, minimal = false, placement = "auto", size = "large", paddingSize, children, }) => {
const overlayRef = react_1.default.useCallback((overlay) => {
const target = typeof targetSelectorOrElement === "string"
? document.querySelector(targetSelectorOrElement)
: targetSelectorOrElement;
if (overlay && target) {
(0, core_2.createPopper)(target, overlay, {
placement: placement,
modifiers: [
{
name: "offset",
options: {
offset: [0, 15],
},
},
],
});
}
}, [targetSelectorOrElement]);
const overlay = (react_1.default.createElement("div", { className: `${index_1.CLASSPREFIX}-decoupled-overlay` +
` ${index_1.CLASSPREFIX}-decoupled-overlay--${size}` +
` ${core_1.Classes.POPOVER}` +
(minimal ? ` ${core_1.Classes.MINIMAL}` : ""), role: "tooltip", ref: overlayRef },
!minimal && (react_1.default.createElement("div", { className: `${index_1.CLASSPREFIX}-decoupled-overlay__arrow ${core_1.Classes.POPOVER_ARROW}`, "data-popper-arrow": true, "aria-hidden": true })),
react_1.default.createElement("div", { className: `${core_1.Classes.POPOVER_CONTENT} ${index_1.CLASSPREFIX}-decoupled-overlay__content` }, paddingSize ? (react_1.default.createElement(index_1.WhiteSpaceContainer, { paddingTop: paddingSize, paddingRight: paddingSize, paddingBottom: paddingSize, paddingLeft: paddingSize }, children)) : children)));
return usePortal ? (0, react_dom_1.createPortal)(overlay, portalContainer) : overlay;
};
exports.DecoupledOverlay = DecoupledOverlay;
exports.default = exports.DecoupledOverlay;
//# sourceMappingURL=DecoupledOverlay.js.map