@eccenca/gui-elements
Version:
GUI elements based on other libraries, usable in React application, written in Typescript.
91 lines • 6.05 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React from "react";
import { Classes as BlueprintClassNames, Overlay2 as BlueprintOverlay, } from "@blueprintjs/core";
import { preventReactFlowActionsClasses } from "../../cmem/index.js";
import { utils } from "../../common/index.js";
import { CLASSPREFIX as eccgui } from "../../configuration/constants.js";
import { Card } from "./../Card/index.js";
import { ModalContext } from "./ModalContext.js";
/**
* Displays contents on top of other elements, used to create dialogs.
* For most situations the usage of `SimpleDialog` and `AlertDialog` should be sufficient.
* Otherwise this element can be used to create own modal elements and edge cases for modal dialogs.
* Then it is recommended to use the `Card` element inside.
*/
export var Modal = function (_a) {
var children = _a.children, _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.overlayClassName, overlayClassName = _c === void 0 ? "" : _c, _d = _a.size, size = _d === void 0 ? "regular" : _d, _e = _a.canOutsideClickClose, canOutsideClickClose = _e === void 0 ? false : _e, _f = _a.canEscapeKeyClose, canEscapeKeyClose = _f === void 0 ? false : _f, _g = _a.preventBackdrop, preventBackdrop = _g === void 0 ? false : _g, wrapperDivProps = _a.wrapperDivProps, _h = _a.modalFocusable, modalFocusable = _h === void 0 ? true : _h, _j = _a.usePortal, usePortal = _j === void 0 ? true : _j, _k = _a.forceTopPosition, forceTopPosition = _k === void 0 ? false : _k, onOpening = _a.onOpening, dataTestId = _a["data-test-id"], dataTestid = _a["data-testid"], modalId = _a.modalId, _l = _a.preventReactFlowEvents, preventReactFlowEvents = _l === void 0 ? true : _l, otherProps = __rest(_a, ["children", "className", "overlayClassName", "size", "canOutsideClickClose", "canEscapeKeyClose", "preventBackdrop", "wrapperDivProps", "modalFocusable", "usePortal", "forceTopPosition", "onOpening", "data-test-id", "data-testid", "modalId", "preventReactFlowEvents"]);
var modalContext = React.useContext(ModalContext);
var uniqueModalId = React.useRef(modalId !== null && modalId !== void 0 ? modalId : Date.now().toString(36) + Math.random().toString(36).substring(2));
React.useEffect(function () {
return function () {
// Make sure to always remove flag when modal is removed
modalContext.setModalOpen(uniqueModalId.current, false);
};
}, []);
React.useEffect(function () {
modalContext.setModalOpen(uniqueModalId.current, otherProps.isOpen);
}, [otherProps.isOpen]);
var backdropProps = !canOutsideClickClose && canEscapeKeyClose
? __assign(__assign({}, otherProps.backdropProps), {
// Escape key won't work anymore otherwise after clicking on the backdrop
tabIndex: 0 }) : otherProps.backdropProps;
var focusableProps = modalFocusable
? {
tabIndex: 0,
}
: undefined;
var alteredChildren = React.Children.map(children, function (child) {
if (child.type && child.type === Card) {
return React.cloneElement(child, {
isOnlyLayout: true,
elevation: 4,
});
}
return child;
});
var handlerOnOpening = function (modalElement) {
var _a, _b;
if (onOpening) {
// call the original event handler
onOpening(modalElement);
}
if (usePortal && forceTopPosition) {
var parentalPortal = modalElement.closest(".".concat(BlueprintClassNames.PORTAL));
var highestTopIndex = (_a = utils.getGlobalVar("highestModalTopIndex")) !== null && _a !== void 0 ? _a : 0;
if (parentalPortal) {
var portalTopIndex = parseInt((_b = getComputedStyle(parentalPortal).zIndex) !== null && _b !== void 0 ? _b : 0, 10);
var newTopIndex = Math.max(portalTopIndex, highestTopIndex) + 1;
parentalPortal.style.zIndex = "".concat(newTopIndex);
utils.setGlobalVar("highestModalTopIndex", newTopIndex);
}
}
};
return (React.createElement(BlueprintOverlay, __assign({}, otherProps, { backdropProps: backdropProps, className: "".concat(overlayClassName, " ").concat(preventReactFlowEvents ? preventReactFlowActionsClasses : ""), backdropClassName: "".concat(eccgui, "-dialog__backdrop"), canOutsideClickClose: canOutsideClickClose, canEscapeKeyClose: canEscapeKeyClose, hasBackdrop: !preventBackdrop, usePortal: usePortal, onOpening: handlerOnOpening, portalClassName: "".concat(eccgui, "-dialog__portal") }),
React.createElement("div", __assign({}, wrapperDivProps, { className: BlueprintClassNames.DIALOG_CONTAINER, "data-test-id": dataTestId !== null && dataTestId !== void 0 ? dataTestId : "simpleDialogWidget", "data-testid": dataTestid }, focusableProps, { tabIndex: 0 }),
React.createElement("section", { className: "".concat(eccgui, "-dialog__wrapper") +
(typeof size === "string" ? " ".concat(eccgui, "-dialog__wrapper--") + size : "") +
(className ? " " + className : "") }, alteredChildren))));
};
export default Modal;
//# sourceMappingURL=Modal.js.map