react-application-core
Version:
A react-based application core for the business applications.
165 lines • 8.12 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.Header = void 0;
var React = require("react");
var util_1 = require("../../util");
var generic_component_1 = require("../base/generic.component");
var button_1 = require("../button");
var definition_1 = require("../../definition");
var menu_1 = require("../menu");
var link_1 = require("../link");
/**
* @component-impl
* @stable [22.05.2020]
*
* Please use the "Mappers.headerProps"
*/
var Header = /** @class */ (function (_super) {
__extends(Header, _super);
/**
* @stable [09.10.2020]
* @param originalProps
*/
function Header(originalProps) {
var _this = _super.call(this, originalProps) || this;
_this.defaultMenuProps = Object.freeze({
options: [
{ label: _this.settings.messages.SETTINGS, icon: definition_1.IconsEnum.COGS, value: definition_1.HeaderUserMenuActionsEnum.PROFILE },
{ label: _this.settings.messages.LOG_OUT, icon: definition_1.IconsEnum.SIGN_OUT_ALT, value: definition_1.HeaderUserMenuActionsEnum.EXIT }
],
});
_this.menuAnchorRef = React.createRef();
_this.menuRef = React.createRef();
_this.getMenuAnchorElement = _this.getMenuAnchorElement.bind(_this);
_this.onMenuActionClick = _this.onMenuActionClick.bind(_this);
_this.onMenuItemSelect = _this.onMenuItemSelect.bind(_this);
return _this;
}
/**
* @stable [09.10.2020]
*/
Header.prototype.render = function () {
var originalProps = this.originalProps;
var _a = this.settings, routes = _a.routes, urls = _a.urls;
var className = originalProps.className, onCommentClick = originalProps.onCommentClick, user = originalProps.user;
var headerContentElement = this.headerContentElement;
return (React.createElement("div", { ref: this.actualRef, className: util_1.ClsUtils.joinClassName(definition_1.HeaderClassesEnum.HEADER, util_1.CalcUtils.calc(className)) },
headerContentElement && (React.createElement("div", { className: definition_1.HeaderClassesEnum.CONTENT }, headerContentElement)),
React.createElement("div", { className: definition_1.HeaderClassesEnum.ACTIONS },
this.originalChildren,
util_1.TypeUtils.isFn(onCommentClick) && this.uiFactory.makeIcon({
type: definition_1.IconsEnum.COMMENT,
className: definition_1.HeaderClassesEnum.CHAT_ACTION,
onClick: onCommentClick,
}),
routes.help && (React.createElement("a", { id: definition_1.DefaultEntities.HEADER_HELP_LINK_UUID, className: definition_1.HeaderClassesEnum.HELP_ACTION_WRAPPER, href: routes.help }, this.uiFactory.makeIcon({
type: definition_1.IconsEnum.QUESTION_CIRCLE_REGULAR,
className: definition_1.HeaderClassesEnum.HELP_ACTION,
}))),
React.createElement(link_1.Link, { to: routes.profile, className: definition_1.HeaderClassesEnum.USER_AVATAR, style: { backgroundImage: this.domAccessor.asImageUrl(user.url || urls.emptyAvatar) } }),
React.createElement(link_1.Link, { to: routes.profile, className: definition_1.HeaderClassesEnum.USER_INFO }, user.name),
this.menuActionElement)));
};
Object.defineProperty(Header.prototype, "headerContentElement", {
/**
* @stable [21.05.2020]
* @returns {React.ReactNode}
*/
get: function () {
var mergedProps = this.mergedProps;
var _a = mergedProps.navigationActionConfiguration, navigationActionConfiguration = _a === void 0 ? {} : _a, navigationActionRendered = mergedProps.navigationActionRendered;
var contentElement = this.contentElement;
if (navigationActionRendered) {
return (React.createElement(React.Fragment, null,
React.createElement(button_1.Button, __assign({ icon: definition_1.IconsEnum.ARROW_LEFT }, navigationActionConfiguration, { className: util_1.ClsUtils.joinClassName(definition_1.HeaderClassesEnum.NAVIGATION_ACTION, util_1.CalcUtils.calc(navigationActionConfiguration.className)) })),
contentElement));
}
return contentElement;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Header.prototype, "menuActionElement", {
/**
* @stable [21.05.2020]
* @returns {JSX.Element}
*/
get: function () {
var _a = this.mergedProps, _b = _a.menuActionConfiguration, menuActionConfiguration = _b === void 0 ? {} : _b, menuConfiguration = _a.menuConfiguration;
return (React.createElement(React.Fragment, null,
React.createElement(button_1.Button, __assign({ forwardedRef: this.menuAnchorRef, icon: definition_1.IconsEnum.ELLIPSIS_H }, menuActionConfiguration, { className: util_1.ClsUtils.joinClassName(definition_1.HeaderClassesEnum.MENU_ACTION, util_1.CalcUtils.calc(menuActionConfiguration.className)), onClick: this.onMenuActionClick })),
React.createElement(menu_1.Menu, __assign({ ref: this.menuRef }, this.defaultMenuProps, menuConfiguration, { anchorElement: this.getMenuAnchorElement, positionConfiguration: definition_1.DefaultEntities.DOM_RIGHT_POSITION_CONFIG_ENTITY, onSelect: this.onMenuItemSelect }))));
},
enumerable: false,
configurable: true
});
/**
* @stable [21.05.2020]
* @param {IPresetsMenuItemEntity} menuItem
*/
Header.prototype.onMenuItemSelect = function (menuItem) {
util_1.ConditionUtils.ifNotNilThanValue(this.mergedProps.onSelect, function (onSelect) { return onSelect(menuItem); });
};
/**
* @stable [21.05.2020]
*/
Header.prototype.onMenuActionClick = function () {
this.menuRef.current.show();
};
/**
* @stable [21.05.2020]
* @returns {HTMLElement}
*/
Header.prototype.getMenuAnchorElement = function () {
return this.menuAnchorRef.current;
};
Object.defineProperty(Header.prototype, "contentElement", {
/**
* @stable [21.05.2020]
* @returns {React.ReactNode}
*/
get: function () {
return util_1.CalcUtils.calc(this.mergedProps.content, this);
},
enumerable: false,
configurable: true
});
Object.defineProperty(Header.prototype, "componentsSettingsProps", {
/**
* @stable [02.06.2020]
* @returns {IHeaderProps}
*/
get: function () {
return this.componentsSettings.header;
},
enumerable: false,
configurable: true
});
return Header;
}(generic_component_1.GenericComponent));
exports.Header = Header;
//# sourceMappingURL=header.component.js.map