@eccenca/gui-elements
Version:
GUI elements based on other libraries, usable in React application, written in Typescript.
74 lines • 4.61 kB
JavaScript
;
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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Modal = void 0;
const react_1 = __importDefault(require("react"));
const core_1 = require("@blueprintjs/core");
const common_1 = require("../../common");
const constants_1 = require("../../configuration/constants");
const Card_1 = require("./../Card");
/**
* 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.
*/
const Modal = (_a) => {
var { children, className = "", overlayClassName = "", size = "regular", canOutsideClickClose = false, canEscapeKeyClose = false, preventBackdrop = false, wrapperDivProps, modalFocusable = true, usePortal = true, forceTopPosition = false, onOpening, "data-test-id": dataTestId, "data-testid": dataTestid } = _a, otherProps = __rest(_a, ["children", "className", "overlayClassName", "size", "canOutsideClickClose", "canEscapeKeyClose", "preventBackdrop", "wrapperDivProps", "modalFocusable", "usePortal", "forceTopPosition", "onOpening", "data-test-id", "data-testid"]);
const backdropProps = !canOutsideClickClose && canEscapeKeyClose
? Object.assign(Object.assign({}, otherProps.backdropProps), {
// Escape key won't work anymore otherwise after clicking on the backdrop
tabIndex: 0 }) : otherProps.backdropProps;
const focusableProps = modalFocusable
? {
tabIndex: 0,
}
: undefined;
const alteredChildren = react_1.default.Children.map(children, (child) => {
if (child.type && child.type === Card_1.Card) {
return react_1.default.cloneElement(child, {
isOnlyLayout: true,
elevation: 4,
});
}
return child;
});
const handlerOnOpening = (modalElement) => {
var _a, _b;
if (onOpening) {
// call the original event handler
onOpening(modalElement);
}
if (usePortal && forceTopPosition) {
const parentalPortal = modalElement.closest(`.${core_1.Classes.PORTAL}`);
const highestTopIndex = (_a = common_1.utils.getGlobalVar("highestModalTopIndex")) !== null && _a !== void 0 ? _a : 0;
if (parentalPortal) {
const portalTopIndex = parseInt((_b = getComputedStyle(parentalPortal).zIndex) !== null && _b !== void 0 ? _b : 0, 10);
const newTopIndex = Math.max(portalTopIndex, highestTopIndex) + 1;
parentalPortal.style.zIndex = `${newTopIndex}`;
common_1.utils.setGlobalVar("highestModalTopIndex", newTopIndex);
}
}
};
return (react_1.default.createElement(core_1.Overlay2, Object.assign({}, otherProps, { backdropProps: backdropProps, className: overlayClassName, backdropClassName: `${constants_1.CLASSPREFIX}-dialog__backdrop`, canOutsideClickClose: canOutsideClickClose, canEscapeKeyClose: canEscapeKeyClose, hasBackdrop: !preventBackdrop, usePortal: usePortal, onOpening: handlerOnOpening, portalClassName: `${constants_1.CLASSPREFIX}-dialog__portal` }),
react_1.default.createElement("div", Object.assign({}, wrapperDivProps, { className: core_1.Classes.DIALOG_CONTAINER, "data-test-id": dataTestId !== null && dataTestId !== void 0 ? dataTestId : "simpleDialogWidget", "data-testid": dataTestid }, focusableProps, { tabIndex: 0 }),
react_1.default.createElement("section", { className: `${constants_1.CLASSPREFIX}-dialog__wrapper` +
(typeof size === "string" ? ` ${constants_1.CLASSPREFIX}-dialog__wrapper--` + size : "") +
(className ? " " + className : "") }, alteredChildren))));
};
exports.Modal = Modal;
exports.default = exports.Modal;
//# sourceMappingURL=Modal.js.map