@eccenca/gui-elements
Version:
GUI elements based on other libraries, usable in React application, written in Typescript.
41 lines • 2.69 kB
JavaScript
import React from "react";
import { createPortal } from "react-dom";
import { Classes as BlueprintClasses } from "@blueprintjs/core";
import { createPopper } from "@popperjs/core";
import { CLASSPREFIX as eccgui, WhiteSpaceContainer } from "../../index.js";
/**
* 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.
*/
export var DecoupledOverlay = function (_a) {
var targetSelectorOrElement = _a.targetSelectorOrElement, _b = _a.usePortal, usePortal = _b === void 0 ? true : _b, _c = _a.portalContainer, portalContainer = _c === void 0 ? document.body : _c, _d = _a.minimal, minimal = _d === void 0 ? false : _d, _e = _a.placement, placement = _e === void 0 ? "auto" : _e, _f = _a.size, size = _f === void 0 ? "large" : _f, paddingSize = _a.paddingSize, children = _a.children;
var overlayRef = React.useCallback(function (overlay) {
var target = typeof targetSelectorOrElement === "string"
? document.querySelector(targetSelectorOrElement)
: targetSelectorOrElement;
if (overlay && target) {
createPopper(target, overlay, {
placement: placement,
modifiers: [
{
name: "offset",
options: {
offset: [0, 15],
},
},
],
});
}
}, [targetSelectorOrElement]);
var overlay = (React.createElement("div", { className: "".concat(eccgui, "-decoupled-overlay") +
" ".concat(eccgui, "-decoupled-overlay--").concat(size) +
" ".concat(BlueprintClasses.POPOVER) +
(minimal ? " ".concat(BlueprintClasses.MINIMAL) : ""), role: "tooltip", ref: overlayRef },
!minimal && (React.createElement("div", { className: "".concat(eccgui, "-decoupled-overlay__arrow ").concat(BlueprintClasses.POPOVER_ARROW), "data-popper-arrow": true, "aria-hidden": true })),
React.createElement("div", { className: "".concat(BlueprintClasses.POPOVER_CONTENT, " ").concat(eccgui, "-decoupled-overlay__content") }, paddingSize ? (React.createElement(WhiteSpaceContainer, { paddingTop: paddingSize, paddingRight: paddingSize, paddingBottom: paddingSize, paddingLeft: paddingSize }, children)) : children)));
return usePortal ? createPortal(overlay, portalContainer) : overlay;
};
export default DecoupledOverlay;
//# sourceMappingURL=DecoupledOverlay.js.map