react-application-core
Version:
A react-based application core for the business applications.
254 lines • 12.4 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 __spreadArrays = (this && this.__spreadArrays) || function () {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.NavigationList = void 0;
var React = require("react");
var R = require("ramda");
var util_1 = require("../../util");
var link_1 = require("../link");
var menu_1 = require("../menu");
var definition_1 = require("../../definition");
var enhanced_generic_component_1 = require("../base/enhanced-generic.component");
var NavigationList = /** @class */ (function (_super) {
__extends(NavigationList, _super);
/**
* @stable [14.05.2020]
* @param {INavigationListProps} props
*/
function NavigationList(props) {
var _this = _super.call(this, props) || this;
_this.menuRef = React.createRef();
_this.itemsRefsMap = new Map();
_this.asPopupMenuAnchorElement = _this.asPopupMenuAnchorElement.bind(_this);
_this.onPopupMenuItemSelect = _this.onPopupMenuItemSelect.bind(_this);
_this.state = {};
return _this;
}
/**
* @stable [14.05.2020]
* @returns {JSX.Element}
*/
NavigationList.prototype.render = function () {
var _this = this;
this.itemsRefsMap.clear();
var activeGroup = this.state.activeGroup;
var $mergedProps = this.mergedProps;
var $items = $mergedProps.items;
return (React.createElement("nav", { ref: this.actualRef, className: this.asClassName($mergedProps) },
$items.map(function (item) { return _this.toElement(item, $mergedProps); }),
util_1.ConditionUtils.ifNotNilThanValue(activeGroup, function () { return _this.asPopupMenuElement($items, activeGroup); })));
};
/**
* @stable [23.03.2020]
*/
NavigationList.prototype.componentWillUnmount = function () {
this.itemsRefsMap.clear();
_super.prototype.componentWillUnmount.call(this);
};
NavigationList.prototype.toElement = function (item, $mergedProps) {
var _this = this;
var $isExpanded = this.isItemExpanded(item);
var $isFullModeEnabled = this.isFullLayoutModeEnabled(this.mergedProps);
var $label = this.asItemLabel(item);
var $isGroup = R.isNil(item.parent);
switch (item.type) {
case definition_1.NavigationItemTypesEnum.SUB_HEADER:
var isGroupItemActive = !$isExpanded && this.hasActiveChild(item);
var groupRef = React.createRef();
this.itemsRefsMap.set(item.value, groupRef);
var ind = this.props.items.length - 1 -
__spreadArrays(this.props.items).reverse().findIndex(function (itm) { return itm.type === definition_1.NavigationItemTypesEnum.SUB_HEADER; });
return (React.createElement("div", { ref: groupRef, key: this.asUniqueKey(this.asItemLabel(item), 'label'), className: util_1.ClsUtils.joinClassName(this.asItemClassName(true, isGroupItemActive, $isExpanded), ind === this.props.items.lastIndexOf(item) && !$isExpanded && 'rac-navigation-list__last-section'), title: $label, onClick: function () { return _this.onGroupClick(item, $mergedProps, $isFullModeEnabled); } },
this.asItemIconElement(item),
$isFullModeEnabled && (React.createElement(React.Fragment, null,
$label,
this.asItemExpandIconElement($isExpanded)))));
default:
return util_1.ConditionUtils.orNull($isGroup || $isFullModeEnabled && $isExpanded, function () { return _this.asItemElement(item, $isGroup, $isFullModeEnabled, $isExpanded); });
}
};
/**
* @stable [14.05.2020]
* @param {IPresetsMenuItemEntity<INavigationListItemEntity>} option
*/
NavigationList.prototype.onPopupMenuItemSelect = function (option) {
var _this = this;
this.setState({ activeGroup: null }, function () { return util_1.ConditionUtils.ifNotNilThanValue(_this.props.onClick, function (onClick) { return onClick(option.rawData); }); });
};
/**
* @stable [14.05.2020]
* @param {INavigationListItemEntity} $entity
* @param {boolean} $isFullModeEnabled
* @param {INavigationListProps} $mergedProps
*/
NavigationList.prototype.onGroupClick = function ($entity, $mergedProps, $isFullModeEnabled) {
var _this = this;
if ($isFullModeEnabled) {
util_1.ConditionUtils.ifNotNilThanValue($mergedProps.onGroupClick, function (onGroupClick) { return onGroupClick($entity); });
}
else {
this.setState({ activeGroup: $entity }, function () { return _this.menuRef.current.show(); });
}
};
/**
* @stable [23.09.2018]
* @param {INavigationListItemEntity} item
* @returns {boolean}
*/
NavigationList.prototype.isItemExpanded = function (item) {
var expandedGroups = this.props.expandedGroups;
return expandedGroups[item.value] === true
|| (!R.isNil(item.parent) && expandedGroups[item.parent.value] === true);
};
/**
* @stable [23.09.2018]
* @param {INavigationListItemEntity} item
* @returns {boolean}
*/
NavigationList.prototype.hasActiveChild = function (item) {
var activeItem = R.find(function (itm) { return !!itm.active; }, this.props.items);
return !R.isNil(activeItem) && !R.isNil(R.find(function (child) { return child.link === activeItem.link; }, item.children || []));
};
/**
* @stable [24.03.2020]
* @param {INavigationListItemEntity} item
* @param {INavigationListItemEntity} activeGroup
* @returns {INavigationListItemEntity}
*/
NavigationList.prototype.asPopupMenuItem = function (item, activeGroup) {
if (definition_1.NAVIGATION_EXTRA_ITEM_TYPES.includes(item.type)) {
return null;
}
return util_1.ConditionUtils.ifNotNilThanValue(item.parent, function (parent) { return util_1.ConditionUtils.orNull(parent.value === activeGroup.value, item); });
};
NavigationList.prototype.asPopupMenuElement = function ($items, $activeGroup) {
var _this = this;
return (React.createElement(menu_1.Menu, { ref: this.menuRef, positionConfiguration: {
collision: 'fit',
my: 'left top',
at: 'right top',
}, heightRestricted: false, options: util_1.FilterUtils.notNilValuesArrayFilter.apply(util_1.FilterUtils, $items.map(function (item) { return _this.asPopupMenuItem(item, $activeGroup); })).map(function (itm) { return ({ value: _this.asUniqueKey(itm.link, 'link'), label: _this.asItemLabel(itm), rawData: itm }); }), anchorElement: this.asPopupMenuAnchorElement, onSelect: this.onPopupMenuItemSelect }));
};
/**
* @stable [14.05.2020]
* @param {INavigationListItemEntity} item
* @param {boolean} $isGroup
* @param {boolean} $isFullModeEnabled
* @param {boolean} $isExpanded
* @returns {JSX.Element}
*/
NavigationList.prototype.asItemElement = function (item, $isGroup, $isFullModeEnabled, $isExpanded) {
var $label = this.asItemLabel(item);
return (React.createElement(link_1.Link, { to: item.link, key: this.asUniqueKey(item.link, 'link'), className: this.asItemClassName($isGroup, item.active, $isExpanded), title: $label },
this.asItemIconElement(item, !$isGroup && definition_1.NavigationListClassesEnum.NAVIGATION_LIST_ITEM_SECTION_ICON),
$isFullModeEnabled && $label));
};
/**
* @stable [14.05.2020]
* @param {INavigationListItemEntity} item
* @param {string} extraClassName
* @returns {JSX.Element}
*/
NavigationList.prototype.asItemIconElement = function (item, extraClassName) {
return this.uiFactory.makeIcon({
type: item.icon || definition_1.IconsEnum.LIST_UL,
className: util_1.ClsUtils.joinClassName(definition_1.NavigationListClassesEnum.NAVIGATION_LIST_SECTION_ICON, extraClassName),
});
};
/**
* @stable [14.05.2020]
* @param {boolean} $isExpanded
* @returns {JSX.Element}
*/
NavigationList.prototype.asItemExpandIconElement = function ($isExpanded) {
return this.uiFactory.makeIcon({
type: $isExpanded ? definition_1.IconsEnum.CHEVRON_UP : definition_1.IconsEnum.CHEVRON_DOWN,
className: definition_1.NavigationListClassesEnum.NAVIGATION_LIST_EXPAND_ICON,
});
};
/**
* @stable [14.05.2020]
* @returns {HTMLElement}
*/
NavigationList.prototype.asPopupMenuAnchorElement = function () {
return this.itemsRefsMap.get(this.state.activeGroup.value).current;
};
/**
* @stable [14.05.2020]
* @param {boolean} $isGroup
* @param {boolean} $isActive
* @param {boolean} $isExpanded
* @returns {string}
*/
NavigationList.prototype.asItemClassName = function ($isGroup, $isActive, $isExpanded) {
return (util_1.ClsUtils.joinClassName(definition_1.NavigationListClassesEnum.NAVIGATION_LIST_SECTION, $isGroup
? definition_1.NavigationListClassesEnum.NAVIGATION_LIST_GROUP_SECTION
: definition_1.NavigationListClassesEnum.NAVIGATION_LIST_ITEM_SECTION, $isActive
? definition_1.NavigationListClassesEnum.NAVIGATION_LIST_ACTIVE_SECTION
: ($isExpanded ? definition_1.NavigationListClassesEnum.NAVIGATION_LIST_EXPANDED_SECTION : '')));
};
/**
* @stable [14.05.2020]
* @param {INavigationListProps} $mergedProps
* @returns {string}
*/
NavigationList.prototype.asClassName = function ($mergedProps) {
return (util_1.ClsUtils.joinClassName(definition_1.NavigationListClassesEnum.NAVIGATION_LIST, !this.isFullLayoutModeEnabled($mergedProps) && definition_1.NavigationListClassesEnum.MINI_NAVIGATION_LIST, util_1.WrapperUtils.isFull($mergedProps) && definition_1.NavigationListClassesEnum.FULL_NAVIGATION_LIST));
};
/**
* @stable [14.05.2020]
* @param {INavigationListProps} $mergedProps
* @returns {boolean}
*/
NavigationList.prototype.isFullLayoutModeEnabled = function ($mergedProps) {
return $mergedProps.mode === definition_1.LayoutModesEnum.FULL;
};
/**
* @stable [06.10.2020]
* @param item
*/
NavigationList.prototype.asItemLabel = function (item) {
var _this = this;
return util_1.ConditionUtils.ifNotNilThanValue(item.label, function (label) { return _this.t(util_1.CalcUtils.calc(label)); });
};
/**
* @stable [06.10.2020]
* @param link
* @param prefix
*/
NavigationList.prototype.asUniqueKey = function (link, prefix) {
return "navigation-list-key-" + link + "-" + prefix;
};
Object.defineProperty(NavigationList.prototype, "componentsSettingsProps", {
/**
* @stable [06.10.2020]
*/
get: function () {
return this.componentsSettings.navigationList;
},
enumerable: false,
configurable: true
});
return NavigationList;
}(enhanced_generic_component_1.EnhancedGenericComponent));
exports.NavigationList = NavigationList;
//# sourceMappingURL=navigation-list.component.js.map