react-application-core
Version:
A react-based application core for the business applications.
552 lines • 21.2 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
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);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.BaseDialog = void 0;
var React = require("react");
var ReactDOM = require("react-dom");
var R = require("ramda");
var button_1 = require("../button");
var util_1 = require("../../util");
var perfect_scroll_plugin_1 = require("../plugin/perfect-scroll.plugin");
var definition_1 = require("../../definition");
var basic_component_1 = require("../base/basic.component");
var generic_component_1 = require("../base/generic.component");
/**
* @component-impl
* @stable [10.10.2020]
*/
var BaseDialog = /** @class */ (function (_super) {
__extends(BaseDialog, _super);
/**
* @stable [10.10.2020]
* @param originalProps
*/
function BaseDialog(originalProps) {
var _this = _super.call(this, originalProps) || this;
_this.bodyRef = React.createRef();
_this.doClose = _this.doClose.bind(_this);
_this.onAcceptClick = _this.onAcceptClick.bind(_this);
_this.onCloseClick = _this.onCloseClick.bind(_this);
_this.onDialogClick = _this.onDialogClick.bind(_this);
_this.onDocumentClickCapture = _this.onDocumentClickCapture.bind(_this);
_this.state = { opened: false };
_this.$isCheckNeededAndAnotherModalDialogOpen = _this.isCheckNeededAndAnotherModalDialogOpen;
return _this;
}
/**
* @stable [10.10.2020]
*/
BaseDialog.prototype.render = function () {
var _this = this;
return util_1.ConditionUtils.orNull(this.state.opened, function () {
var inline = _this.isInline;
var modal = _this.isModal;
var content = (React.createElement("div", __assign({ ref: _this.actualRef, className: _this.dialogClassName }, util_1.PropsUtils.buildClickHandlerProps(_this.onDialogClick, modal, false)), _this.dialogBodyElement));
return inline
? content
: ReactDOM.createPortal(content, _this.portalElement);
});
};
/**
* @stable [10.10.2020]
*/
BaseDialog.prototype.componentDidMount = function () {
this.showOverlayIfApplicable();
if (this.isOverlay) {
this.activate();
}
};
/**
* @stable [10.10.2020]
*/
BaseDialog.prototype.componentWillUnmount = function () {
this.onDestroy();
};
/**
* @stable [10.10.2020]
* @param payload
*/
BaseDialog.prototype.activate = function (payload) {
var _this = this;
this.setState({ opened: true }, function () {
_this.onAfterRender();
var _a = payload || {}, onActivate = _a.onActivate, onDeactivate = _a.onDeactivate;
if (util_1.TypeUtils.isFn(onDeactivate)) {
_this.$onDeactivateCallback = onDeactivate;
}
if (util_1.TypeUtils.isFn(onActivate)) {
onActivate.call(_this);
}
var originalProps = _this.originalProps;
if (util_1.TypeUtils.isFn(originalProps.onActivate)) {
originalProps.onActivate();
}
});
};
/**
* @stable [10.10.2020]
*/
BaseDialog.prototype.close = function () {
this.onCloseClick();
};
/**
* @stable [10.10.2020]
*/
BaseDialog.prototype.onAcceptClick = function () {
var _a = this.originalProps, onAccept = _a.onAccept, onBeforeAccept = _a.onBeforeAccept;
if (onBeforeAccept) {
onBeforeAccept();
}
this.doClose(function () {
if (util_1.TypeUtils.isFn(onAccept)) {
onAccept();
}
});
};
/**
* @stable [10.10.2020]
*/
BaseDialog.prototype.onCloseClick = function () {
var onClose = this.originalProps.onClose;
this.doClose(function () {
if (util_1.TypeUtils.isFn(onClose)) {
onClose();
}
});
};
Object.defineProperty(BaseDialog.prototype, "title", {
/**
* @stable [10.10.2020]
*/
get: function () {
return this.originalProps.title;
},
enumerable: false,
configurable: true
});
Object.defineProperty(BaseDialog.prototype, "closeText", {
/**
* @stable [10.10.2020]
*/
get: function () {
return this.mergedProps.closeText || this.settings.messages.DIALOG_CANCEL;
},
enumerable: false,
configurable: true
});
Object.defineProperty(BaseDialog.prototype, "acceptText", {
/**
* @stable [10.10.2020]
*/
get: function () {
return this.mergedProps.acceptText || this.settings.messages.DIALOG_ACCEPT;
},
enumerable: false,
configurable: true
});
/**
* @stable [10.10.2020]
*/
BaseDialog.prototype.onDialogClick = function () {
this.doClose();
};
/**
* @stable [10.10.2020]
*/
BaseDialog.prototype.onDocumentClickCapture = function (event) {
var element = event.target;
if (this.domAccessor.getParentsAsElements({ parentClassName: definition_1.DialogClassesEnum.DIALOG, element: element })
.includes(this.actualRef.current)) {
return;
}
this.doClose();
};
/**
* @stable [10.10.2020]
*/
BaseDialog.prototype.onDestroy = function () {
this.closeOverlayIfApplicable();
this.unsubscribeEvents();
};
/**
* @stable [10.10.2020]
*/
BaseDialog.prototype.onAfterRender = function () {
if (!this.isAnchored) {
return;
}
this.unsubscribeEvents();
var _a = this.originalProps, anchorElement = _a.anchorElement, positionConfiguration = _a.positionConfiguration;
this.domAccessor.setPosition(__assign(__assign({}, positionConfiguration), { element: this.bodyRef.current, of: util_1.CalcUtils.calc(anchorElement) }));
this.$closeEventUnsubscriber = this.domAccessor.captureEvent({
eventName: definition_1.EventsEnum.CLICK,
callback: this.onDocumentClickCapture,
/**
* We must process a capture phase of click event because a component may stop an events bubbling.
* This case is reproduced in case of child non-modal dialogs:
* 1. Open the modal dialog "D" with field "F" <Non-modal Select>
* 2. Click on field "F" => simple menu is open
* 3. Try click on the body of "D"
* 4. Simple menu will be closed automatically
* 5. "D" is still open
* 6. See the "onDocumentClickCapture" method
*/
capture: true,
});
};
/**
* @stable [10.10.2020]
* @param callback
*/
BaseDialog.prototype.doClose = function (callback) {
var _this = this;
var onDeactivate = this.originalProps.onDeactivate;
this.setState({ opened: false }, function () {
_this.onDestroy();
if (util_1.TypeUtils.isFn(_this.$onDeactivateCallback)) {
_this.$onDeactivateCallback.call(_this);
_this.$onDeactivateCallback = null;
}
if (util_1.TypeUtils.isFn(onDeactivate)) {
onDeactivate();
}
if (util_1.TypeUtils.isFn(callback)) {
callback.call(_this);
}
});
};
Object.defineProperty(BaseDialog.prototype, "actionsElement", {
/**
* @stable [10.10.2020]
*/
get: function () {
var _this = this;
var _a = this.originalProps, acceptActionConfiguration = _a.acceptActionConfiguration, acceptDisabled = _a.acceptDisabled, closeActionConfiguration = _a.closeActionConfiguration, closeDisabled = _a.closeDisabled;
return util_1.ConditionUtils.orNull(this.closable || this.acceptable, function () { return (React.createElement("div", { className: definition_1.DialogClassesEnum.DIALOG_ACTIONS },
util_1.ConditionUtils.orNull(_this.closable, function () { return (React.createElement(button_1.Button, __assign({ icon: definition_1.IconsEnum.TIMES }, closeActionConfiguration, { disabled: closeDisabled, onClick: _this.onCloseClick }), _this.t(_this.closeText))); }),
util_1.ConditionUtils.orNull(_this.acceptable, function () { return (React.createElement(button_1.Button, __assign({ icon: definition_1.IconsEnum.CHECK_CIRCLE, raised: true }, acceptActionConfiguration, { disabled: acceptDisabled, onClick: _this.onAcceptClick }), _this.t(_this.acceptText))); }))); });
},
enumerable: false,
configurable: true
});
Object.defineProperty(BaseDialog.prototype, "dialogBodyElement", {
/**
* @stable [10.10.2020]
*/
get: function () {
var _a = this.originalProps, closableOverlay = _a.closableOverlay, width = _a.width;
return (React.createElement("div", { ref: this.bodyRef, style: { width: util_1.CalcUtils.calc(width) }, className: definition_1.DialogClassesEnum.DIALOG_BODY, onClick: this.domAccessor.cancelEvent }, this.isDialogInProgress
? this.progressElement
: (React.createElement(React.Fragment, null,
this.titleElement,
this.hasExtraActions
? (React.createElement("div", { className: definition_1.DialogClassesEnum.DIALOG_BODY_CONTENT_WRAPPER },
this.bodyElement,
this.extraActionsElement))
: (React.createElement(basic_component_1.BasicComponent, { className: definition_1.DialogClassesEnum.DIALOG_BODY_CONTENT_WRAPPER, plugins: this.wrapperPlugins },
this.bodyElement,
this.extraActionsElement)),
this.isOverlay
? closableOverlay && this.closeOverlayActionElement
: this.actionsElement))));
},
enumerable: false,
configurable: true
});
Object.defineProperty(BaseDialog.prototype, "titleElement", {
/**
* @stable [10.10.2020]
*/
get: function () {
var title = this.title;
return (React.createElement(React.Fragment, null, title && (React.createElement("div", { className: definition_1.DialogClassesEnum.DIALOG_BODY_TITLE }, this.t(title)))));
},
enumerable: false,
configurable: true
});
Object.defineProperty(BaseDialog.prototype, "extraActionsElement", {
/**
* @stable [10.10.2020]
*/
get: function () {
return (React.createElement(React.Fragment, null, this.hasExtraActions && (React.createElement("div", { className: definition_1.DialogClassesEnum.DIALOG_EXTRA_ACTIONS }, this.originalProps.extraActions))));
},
enumerable: false,
configurable: true
});
Object.defineProperty(BaseDialog.prototype, "bodyElement", {
/**
* @stable [10.10.2020]
*/
get: function () {
var originalChildren = this.originalChildren;
return (React.createElement(React.Fragment, null, this.hasExtraActions
? (originalChildren && (React.createElement(basic_component_1.BasicComponent, { className: definition_1.DialogClassesEnum.DIALOG_BODY_CONTENT, plugins: this.wrapperPlugins }, originalChildren)))
: originalChildren));
},
enumerable: false,
configurable: true
});
/**
* @stable [10.10.2020]
*/
BaseDialog.prototype.unsubscribeEvents = function () {
if (util_1.TypeUtils.isFn(this.$closeEventUnsubscriber)) {
this.$closeEventUnsubscriber();
this.$closeEventUnsubscriber = null;
}
};
/**
* @stable [10.10.2020]
*/
BaseDialog.prototype.showOverlayIfApplicable = function () {
if (this.isOverlay) {
this.domAccessor.addClassNamesToRootElement(definition_1.DialogClassesEnum.OVERLAY_FILTER);
}
};
/**
* @stable [10.10.2020]
*/
BaseDialog.prototype.closeOverlayIfApplicable = function () {
if (this.isOverlay) {
this.domAccessor.removeClassNamesFromRootElement(definition_1.DialogClassesEnum.OVERLAY_FILTER);
}
};
Object.defineProperty(BaseDialog.prototype, "progressElement", {
/**
* @stable [10.10.2020]
*/
get: function () {
return (this.uiFactory.makeIcon({
type: definition_1.IconsEnum.SPINNER,
className: definition_1.DialogClassesEnum.DIALOG_PROGRESS_ICON,
}));
},
enumerable: false,
configurable: true
});
Object.defineProperty(BaseDialog.prototype, "closeOverlayActionElement", {
/**
* @stable [10.10.2020]
*/
get: function () {
return (this.uiFactory.makeIcon({
type: definition_1.IconsEnum.TIMES,
className: definition_1.DialogClassesEnum.OVERLAY_CLOSE_ICON,
onClick: this.doClose,
}));
},
enumerable: false,
configurable: true
});
Object.defineProperty(BaseDialog.prototype, "acceptable", {
/**
* @stable [10.10.2020]
*/
get: function () {
return this.originalProps.acceptable;
},
enumerable: false,
configurable: true
});
Object.defineProperty(BaseDialog.prototype, "closable", {
/**
* @stable [10.10.2020]
*/
get: function () {
return this.originalProps.closable;
},
enumerable: false,
configurable: true
});
Object.defineProperty(BaseDialog.prototype, "portalElement", {
/**
* @stable [10.10.2020]
*/
get: function () {
return this.domAccessor.documentBody;
},
enumerable: false,
configurable: true
});
Object.defineProperty(BaseDialog.prototype, "isAnchored", {
/**
* @stable [10.10.2020]
*/
get: function () {
return !R.isNil(this.originalProps.anchorElement);
},
enumerable: false,
configurable: true
});
Object.defineProperty(BaseDialog.prototype, "isInline", {
/**
* @stable [10.10.2020]
*/
get: function () {
return this.originalProps.inline;
},
enumerable: false,
configurable: true
});
Object.defineProperty(BaseDialog.prototype, "isDefault", {
/**
* @stable [10.10.2020]
*/
get: function () {
return this.originalProps.default;
},
enumerable: false,
configurable: true
});
Object.defineProperty(BaseDialog.prototype, "isOverlay", {
/**
* @stable [10.10.2020]
*/
get: function () {
return this.originalProps.overlay;
},
enumerable: false,
configurable: true
});
Object.defineProperty(BaseDialog.prototype, "isConfirm", {
/**
* @stable [10.10.2020]
*/
get: function () {
return this.originalProps.confirm;
},
enumerable: false,
configurable: true
});
Object.defineProperty(BaseDialog.prototype, "isWide", {
/**
* @stable [10.10.2020]
*/
get: function () {
return this.originalProps.wide;
},
enumerable: false,
configurable: true
});
Object.defineProperty(BaseDialog.prototype, "isModal", {
/**
* @stable [10.10.2020]
*/
get: function () {
return (!this.isInline && !this.isAnchored) || this.isOverlay;
},
enumerable: false,
configurable: true
});
Object.defineProperty(BaseDialog.prototype, "hasExtraActions", {
/**
* @stable [10.10.2020]
*/
get: function () {
return !R.isNil(this.originalProps.extraActions);
},
enumerable: false,
configurable: true
});
Object.defineProperty(BaseDialog.prototype, "isScrollable", {
/**
* @stable [10.10.2020]
*/
get: function () {
return this.mergedProps.scrollable;
},
enumerable: false,
configurable: true
});
Object.defineProperty(BaseDialog.prototype, "isDialogInProgress", {
/**
* @stable [10.10.2020]
*/
get: function () {
return this.originalProps.progress;
},
enumerable: false,
configurable: true
});
Object.defineProperty(BaseDialog.prototype, "wrapperPlugins", {
/**
* @stable [10.10.2020]
*/
get: function () {
return this.isScrollable ? [perfect_scroll_plugin_1.PerfectScrollPlugin] : [];
},
enumerable: false,
configurable: true
});
Object.defineProperty(BaseDialog.prototype, "dialogClassName", {
/**
* @stable [10.10.2020]
*/
get: function () {
var className = this.originalProps.className;
return util_1.ClsUtils.joinClassName(util_1.CalcUtils.calc(className), definition_1.DialogClassesEnum.DIALOG, this.isOverlay && definition_1.DialogClassesEnum.OVERLAY_DIALOG, this.isDialogInProgress && definition_1.DialogClassesEnum.PROGRESS_DIALOG, this.isModal && definition_1.DialogClassesEnum.MODAL_DIALOG, !this.isOverlay && (util_1.ClsUtils.joinClassName(this.isConfirm && definition_1.DialogClassesEnum.CONFIRM_DIALOG, this.isDefault && definition_1.DialogClassesEnum.DEFAULT_DIALOG, this.isWide && definition_1.DialogClassesEnum.WIDE_DIALOG, this.isAnchored
? definition_1.DialogClassesEnum.ANCHORED_DIALOG
: definition_1.DialogClassesEnum.NOT_ANCHORED_DIALOG, this.isInline
? definition_1.DialogClassesEnum.INLINE_DIALOG
: (util_1.ClsUtils.joinClassName(definition_1.DialogClassesEnum.NOT_INLINE_DIALOG, !this.isAnchored && (this.$isCheckNeededAndAnotherModalDialogOpen
? definition_1.DialogClassesEnum.TRANSPARENT_DIALOG
: definition_1.DialogClassesEnum.NOT_TRANSPARENT_DIALOG))))));
},
enumerable: false,
configurable: true
});
Object.defineProperty(BaseDialog.prototype, "isCheckNeededAndAnotherModalDialogOpen", {
/**
* @stable [10.10.2020]
*/
get: function () {
return this.originalProps.checkModal && (this.domAccessor.hasElements(definition_1.DialogClassesEnum.MODAL_DIALOG, this.portalElement));
},
enumerable: false,
configurable: true
});
Object.defineProperty(BaseDialog.prototype, "componentsSettingsProps", {
/**
* @stable [10.10.2020]
*/
get: function () {
return this.componentsSettings.dialog;
},
enumerable: false,
configurable: true
});
BaseDialog.defaultProps = {
acceptable: true,
closable: true,
closableOverlay: true,
default: true,
scrollable: true,
};
return BaseDialog;
}(generic_component_1.GenericComponent));
exports.BaseDialog = BaseDialog;
//# sourceMappingURL=base-dialog.component.js.map