react-application-core
Version:
A react-based application core for the business applications.
372 lines • 15.7 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.Menu = void 0;
var React = require("react");
var R = require("ramda");
var definitions_interface_1 = require("../../definitions.interface");
var util_1 = require("../../util");
var definition_1 = require("../../definition");
var basic_component_1 = require("../base/basic.component");
var basic_list_component_1 = require("../list/basic/basic-list.component");
var button_component_1 = require("../button/button.component");
var dialog_component_1 = require("../dialog/dialog.component");
var generic_component_1 = require("../base/generic.component");
var inline_option_component_1 = require("../inline-option/inline-option.component");
var list_item_component_1 = require("../list/item/list-item.component");
var perfect_scroll_plugin_1 = require("../plugin/perfect-scroll.plugin");
var text_field_1 = require("../field/text-field");
var Menu = /** @class */ (function (_super) {
__extends(Menu, _super);
/**
* @stable [08.08.2020]
* @param originalProps
*/
function Menu(originalProps) {
var _this = _super.call(this, originalProps) || this;
_this.dialogRef = React.createRef();
_this.fieldRef = React.createRef();
_this.listElementRef = React.createRef();
_this.hide = _this.hide.bind(_this);
_this.onDialogActivate = _this.onDialogActivate.bind(_this);
_this.onDialogAfterDestroy = _this.onDialogAfterDestroy.bind(_this);
_this.onDialogAfterRender = _this.onDialogAfterRender.bind(_this);
_this.onDialogDeactivate = _this.onDialogDeactivate.bind(_this);
_this.onFilterValueChange = _this.onFilterValueChange.bind(_this);
_this.onSelect = _this.onSelect.bind(_this);
_this.scrollEventCallbackCondition = _this.scrollEventCallbackCondition.bind(_this);
_this.state = { opened: false };
if (_this.isFilterUsed) {
_this.filterQueryTask = new util_1.DelayedTask(_this.notifyFilterChange.bind(_this), originalProps.delayTimeout);
}
return _this;
}
/**
* @stable [24.01.2020]
* @returns {JSX.Element}
*/
Menu.prototype.render = function () {
var _this = this;
var _a = this.originalProps, anchorElement = _a.anchorElement, className = _a.className, heightRestricted = _a.heightRestricted, inline = _a.inline, positionConfiguration = _a.positionConfiguration, width = _a.width;
var opened = this.state.opened;
return util_1.ConditionUtils.orNull(opened, function () { return (React.createElement(dialog_component_1.Dialog, { ref: _this.dialogRef, closable: false, acceptable: false, default: false, scrollable: false, inline: inline, width: width, positionConfiguration: positionConfiguration, anchorElement: anchorElement, className: util_1.ClsUtils.joinClassName(definition_1.MenuClassesEnum.MENU, util_1.CalcUtils.calc(className), heightRestricted && definition_1.MenuClassesEnum.MENU_HEIGHT_RESTRICTED), onActivate: _this.onDialogActivate, onDeactivate: _this.onDialogDeactivate },
!_this.isAnchored && (React.createElement(React.Fragment, null,
_this.closeActionElement,
_this.inlineOptionsElement,
_this.isFilterUsed && _this.filterElement)),
_this.listElement,
!_this.isAnchored && _this.applyActionsElement)); });
};
/**
* @stable [18.06.2019]
*/
Menu.prototype.componentWillUnmount = function () {
this.clearAll();
this.filterQueryTask = null;
};
/**
* @stable [31.01.2020]
* @param {() => void} callback
*/
Menu.prototype.show = function (callback) {
var _this = this;
this.setState({ filter: definitions_interface_1.UNDEF, opened: true }, function () {
if (util_1.TypeUtils.isFn(callback)) {
callback();
}
_this.onDialogAfterRender();
});
};
/**
* @stable [09.08.2020]
*/
Menu.prototype.hide = function () {
this.clearAll();
this.setState({ opened: false }, this.onDialogAfterDestroy);
};
/**
* @stable [08.08.2020]
*/
Menu.prototype.isOpen = function () {
return this.state.opened;
};
/**
* @stable [07.08.2020]
* @private
*/
Menu.prototype.notifyFilterChange = function () {
var onFilterChange = this.originalProps.onFilterChange;
if (util_1.TypeUtils.isFn(onFilterChange)) {
onFilterChange(this.state.filter);
}
};
/**
* @stable [08.08.2020]
* @param filter
* @private
*/
Menu.prototype.onFilterValueChange = function (filter) {
var _this = this;
this.setState({ filter: filter }, function () { return util_1.ConditionUtils.ifNotNilThanValue(_this.filterQueryTask, function (task) { return task.start(); }); });
};
/**
* @stable [09.08.2020]
* @param option
* @private
*/
Menu.prototype.onSelect = function (option) {
var originalProps = this.originalProps;
var multi = originalProps.multi, onSelect = originalProps.onSelect;
if (util_1.TypeUtils.isFn(onSelect)) {
onSelect(option);
}
if (multi && this.items.length > 1) {
// Because a "Flux Cycle", to prevent empty list after updating
return;
}
this.hide();
};
/**
* @stable [09.08.2020]
* @private
*/
Menu.prototype.onDialogActivate = function () {
util_1.ConditionUtils.ifNotNilThanValue(this.field, function (field) { return field.setFocus(); });
};
/**
* @stable [08.08.2020]
* @private
*/
Menu.prototype.onDialogDeactivate = function () {
this.setState({ opened: false });
};
/**
* @stable [25.01.2020]
*/
Menu.prototype.onDialogAfterRender = function () {
util_1.ConditionUtils.ifNotNilThanValue(this.dialog, function (dialog) { return dialog.activate(); });
if (this.isAnchored) {
this.clearAll();
this.scrollEventUnsubscriber = this.eventEmitter.subscribe({
autoUnsubscribing: true,
callback: this.hide,
condition: this.scrollEventCallbackCondition,
eventName: definition_1.SyntheticEmitterEventsEnum.SCROLL,
});
this.resizeUnsubscriber = this.domAccessor.captureEvent({
autoUnsubscribing: true,
callback: this.hide,
eventName: definition_1.EventsEnum.RESIZE,
});
}
};
/**
* @stable [25.01.2020]
*/
Menu.prototype.onDialogAfterDestroy = function () {
var props = this.props;
if (util_1.TypeUtils.isFn(props.onClose)) {
props.onClose();
}
};
Object.defineProperty(Menu.prototype, "listElement", {
/**
* @stable [24.01.2020]
* @returns {JSX.Element}
*/
get: function () {
var _this = this;
var NO_DATA = this.settings.messages.NO_DATA;
var maxCount = this.originalProps.maxCount;
var items = util_1.ArrayUtils.subArray(this.items, maxCount);
return (React.createElement(basic_list_component_1.BasicList, { forwardedRef: this.listElementRef, full: !this.isAnchored, plugins: perfect_scroll_plugin_1.PerfectScrollPlugin },
items.map(function (option, index) { return _this.asItemElement(option, index, items.length); }),
!items.length && (React.createElement("div", { className: definition_1.MenuClassesEnum.MENU_EMPTY_MESSAGE }, NO_DATA))));
},
enumerable: false,
configurable: true
});
/**
* @stable [18.08.2020]
* @param option
* @param index
* @param length
*/
Menu.prototype.asItemElement = function (option, index, length) {
var _a = this.originalProps, renderer = _a.renderer, tpl = _a.tpl;
var disabled = option.disabled, icon = option.icon, iconLeftAligned = option.iconLeftAligned, value = option.value;
return (React.createElement(list_item_component_1.ListItem, __assign({}, definition_1.DefaultEntities.SELECTABLE_LIST_ITEM_ENTITY, { key: "menu-item-key-" + value, disabled: disabled, entity: option, highlightOdd: !this.isAnchored, icon: icon, iconLeftAligned: iconLeftAligned, index: index, last: index === length - 1, renderer: renderer, tpl: tpl, onClick: this.onSelect }), this.fieldConverter.fromSelectValueToDisplayValue(option)));
};
Object.defineProperty(Menu.prototype, "inlineOptionsElement", {
/**
* @stable [09.08.2020]
* @private
*/
get: function () {
var _this = this;
var _a = this.originalProps, inlineOptions = _a.inlineOptions, onInlineOptionClose = _a.onInlineOptionClose;
return util_1.ConditionUtils.ifNotNilThanValue(inlineOptions, function () { return (React.createElement(basic_component_1.BasicComponent, { plugins: perfect_scroll_plugin_1.PerfectScrollPlugin, className: definition_1.MenuClassesEnum.MENU_INLINE_OPTIONS }, inlineOptions.map(function (option) { return (React.createElement(inline_option_component_1.InlineOption, { key: "inline-option-key-" + _this.fieldConverter.fromSelectValueToId(option), option: option, onClose: onInlineOptionClose })); }))); });
},
enumerable: false,
configurable: true
});
Object.defineProperty(Menu.prototype, "applyActionsElement", {
/**
* @stable [09.08.2020]
* @private
*/
get: function () {
var _this = this;
var _a = this.originalProps, inlineOptions = _a.inlineOptions, multi = _a.multi;
return util_1.ConditionUtils.orNull(multi, function () { return (React.createElement(button_component_1.Button, { raised: true, disabled: !util_1.ObjectUtils.isObjectNotEmpty(inlineOptions), icon: definition_1.IconsEnum.CHECK_CIRCLE, text: _this.settings.messages.APPLY, className: definition_1.MenuClassesEnum.MENU_APPLY_ACTION, onClick: _this.hide })); });
},
enumerable: false,
configurable: true
});
Object.defineProperty(Menu.prototype, "filterElement", {
/**
* @stable [09.08.2020]
* @private
*/
get: function () {
var filterPlaceholder = this.originalProps.filterPlaceholder;
var filter = this.state.filter;
return (React.createElement(text_field_1.TextField, { ref: this.fieldRef, value: filter, errorMessageRendered: false, full: false, className: definition_1.MenuClassesEnum.MENU_FILTER, placeholder: filterPlaceholder || this.settings.messages.SEARCH, onChange: this.onFilterValueChange }));
},
enumerable: false,
configurable: true
});
Object.defineProperty(Menu.prototype, "closeActionElement", {
/**
* @stable [08.08.2020]
* @private
*/
get: function () {
return this.uiFactory.makeIcon({
type: definition_1.IconsEnum.TIMES,
className: definition_1.MenuClassesEnum.MENU_ICON_CLOSE,
onClick: this.hide,
});
},
enumerable: false,
configurable: true
});
/**
* @stable [08.08.2020]
* @param element
* @private
*/
Menu.prototype.scrollEventCallbackCondition = function (element) {
return element !== this.listElementRef.current;
};
/**
* @stable [08.08.2020]
*/
Menu.prototype.clearAll = function () {
this.unsubscribeAllEvents();
util_1.ConditionUtils.ifNotNilThanValue(this.filterQueryTask, function (task) { return task.stop(); });
};
/**
* @stable [08.08.2020]
*/
Menu.prototype.unsubscribeAllEvents = function () {
if (util_1.TypeUtils.isFn(this.scrollEventUnsubscriber)) {
this.scrollEventUnsubscriber();
this.scrollEventUnsubscriber = null;
}
if (util_1.TypeUtils.isFn(this.resizeUnsubscriber)) {
this.resizeUnsubscriber();
this.resizeUnsubscriber = null;
}
};
Object.defineProperty(Menu.prototype, "items", {
/**
* @stable [09.08.2020]
* @private
*/
get: function () {
var _a = this.originalProps, filter = _a.filter, options = _a.options;
var query = this.state.filter;
return this.isFilterUsed && util_1.TypeUtils.isFn(filter)
? options.filter(function (option) { return filter(query, option); })
: options;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Menu.prototype, "isFilterUsed", {
/**
* @stable [08.08.2020]
* @private
*/
get: function () {
return this.originalProps.useFilter;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Menu.prototype, "isAnchored", {
/**
* @stable [08.08.2020]
* @private
*/
get: function () {
return !R.isNil(this.originalProps.anchorElement);
},
enumerable: false,
configurable: true
});
Object.defineProperty(Menu.prototype, "field", {
/**
* @stable [08.08.2020]
* @private
*/
get: function () {
return this.fieldRef.current;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Menu.prototype, "dialog", {
/**
* @stable [08.08.2020]
* @private
*/
get: function () {
return this.dialogRef.current;
},
enumerable: false,
configurable: true
});
Menu.defaultProps = {
delayTimeout: 1000,
filter: function (query, entity) { return util_1.FilterUtils.queryFilter(query, entity.label || entity.value); },
heightRestricted: true,
};
return Menu;
}(generic_component_1.GenericComponent));
exports.Menu = Menu;
//# sourceMappingURL=menu.component.js.map