@eccenca/gui-elements
Version:
GUI elements based on other libraries, usable in React application, written in Typescript.
63 lines • 5.09 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.modalPreventEvents = exports.SimpleDialog = void 0;
const react_1 = __importDefault(require("react"));
const constants_1 = require("../../configuration/constants");
const IconButton_1 = __importDefault(require("../Icon/IconButton"));
const Card_1 = require("./../Card");
const Divider_1 = __importDefault(require("./../Separation/Divider"));
const Modal_1 = __importDefault(require("./Modal"));
/**
* Simplifies the dialog display by providing a direct `Card` template for the `Modal` element.
* Inherits all properties from `Modal`.
*/
const SimpleDialog = (_a) => {
var _b, _c;
var { children, canOutsideClickClose = false, canEscapeKeyClose = false, title = "", actions = null, notifications = null, hasBorder = false, preventSimpleClosing = false, enforceFocus = false, intent, headerOptions, showFullScreenToggler = false, startInFullScreenMode = false, size, actionsProps } = _a, otherProps = __rest(_a, ["children", "canOutsideClickClose", "canEscapeKeyClose", "title", "actions", "notifications", "hasBorder", "preventSimpleClosing", "enforceFocus", "intent", "headerOptions", "showFullScreenToggler", "startInFullScreenMode", "size", "actionsProps"]);
const [displayFullscreen, setDisplayFullscreen] = react_1.default.useState(startInFullScreenMode);
const showToggler = startInFullScreenMode || showFullScreenToggler;
const intentClassName = intent ? `${constants_1.CLASSPREFIX}-intent--${intent}` : "";
const wrapperDivProps = Object.assign(Object.assign({}, exports.modalPreventEvents), otherProps.wrapperDivProps);
return (react_1.default.createElement(Modal_1.default, Object.assign({ enforceFocus: enforceFocus }, otherProps, { wrapperDivProps: wrapperDivProps, "data-test-id": (_b = otherProps["data-test-id"]) !== null && _b !== void 0 ? _b : "simpleDialogWidget", canOutsideClickClose: canOutsideClickClose || !preventSimpleClosing, canEscapeKeyClose: canEscapeKeyClose || !preventSimpleClosing, size: displayFullscreen ? "fullscreen" : size }),
react_1.default.createElement(Card_1.Card, { className: intentClassName },
title || headerOptions || showToggler ? (react_1.default.createElement(Card_1.CardHeader, null,
react_1.default.createElement(Card_1.CardTitle, { className: intentClassName }, title),
headerOptions || showToggler ? (react_1.default.createElement(Card_1.CardOptions, null,
headerOptions,
showToggler && (react_1.default.createElement(IconButton_1.default, { name: displayFullscreen ? "toggler-minimize" : "toggler-maximize", onClick: () => setDisplayFullscreen(!displayFullscreen) })))) : (react_1.default.createElement(react_1.default.Fragment, null)))) : null,
hasBorder && react_1.default.createElement(Divider_1.default, null),
react_1.default.createElement(Card_1.CardContent, null, children),
hasBorder && react_1.default.createElement(Divider_1.default, null),
!!notifications && (react_1.default.createElement(Card_1.CardContent, { className: `${constants_1.CLASSPREFIX}-dialog__notifications` }, notifications)),
actions && (react_1.default.createElement(Card_1.CardActions, Object.assign({}, actionsProps, { inverseDirection: true, className: `${(_c = actionsProps === null || actionsProps === void 0 ? void 0 : actionsProps.className) !== null && _c !== void 0 ? _c : ""} ${intentClassName}` }), actions)))));
};
exports.SimpleDialog = SimpleDialog;
/** Events that should be prevented to bubble up from a modal that goes beyond the most simple version of a modal, e.g.
* allows to drag or supports hot keys etc. */
exports.modalPreventEvents = {
// Prevent certain events from leaving the modal, so that e.g. react-flow does not receive these events doing unexpected stuff
onContextMenu: (event) => event.stopPropagation(),
onDrag: (event) => event.stopPropagation(),
onDragStart: (event) => event.stopPropagation(),
onDragEnd: (event) => event.stopPropagation(),
// The following prevents some drop-downs to not close anymore when clicking outside of them
// onMouseDown: (event: BaseSyntheticEvent) => event.stopPropagation(),
onMouseUp: (event) => event.stopPropagation(),
onClick: (event) => event.stopPropagation(),
};
exports.default = exports.SimpleDialog;
//# sourceMappingURL=SimpleDialog.js.map