UNPKG

react-application-core

Version:

A react-based application core for the business applications.

770 lines 29 kB
"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); }; var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } return new (P || (P = Promise))(function (resolve, reject) { function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } step((generator = generator.apply(thisArg, _arguments || [])).next()); }); }; var __generator = (this && this.__generator) || function (thisArg, body) { var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g; return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; function verb(n) { return function (v) { return step([n, v]); }; } function step(op) { if (f) throw new TypeError("Generator is already executing."); while (_) try { if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; if (y = 0, t) op = [op[0] & 2, t.value]; switch (op[0]) { case 0: case 1: t = op; break; case 4: _.label++; return { value: op[1], done: false }; case 5: _.label++; y = op[1]; op = [0]; continue; case 7: op = _.ops.pop(); _.trys.pop(); continue; default: if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } if (t[2]) _.ops.pop(); _.trys.pop(); continue; } op = body.call(thisArg, _); } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; } }; 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.BaseSelect = void 0; var React = require("react"); var R = require("ramda"); var ts_smart_logger_1 = require("ts-smart-logger"); var util_1 = require("../../../util"); var base_text_field_component_1 = require("../text-field/base-text-field.component"); var menu_component_1 = require("../../menu/menu.component"); var inline_option_1 = require("../../inline-option"); var definition_1 = require("../../../definition"); var BaseSelect = /** @class */ (function (_super) { __extends(BaseSelect, _super); /** * @stable [10.08.2020] * @param originalProps */ function BaseSelect(originalProps) { var _this = _super.call(this, originalProps) || this; _this.menuRef = React.createRef(); _this.onDropDownClick = _this.onDropDownClick.bind(_this); _this.onInlineOptionClick = _this.onInlineOptionClick.bind(_this); _this.onMenuFilterChange = _this.onMenuFilterChange.bind(_this); _this.onOptionsLoadDone = _this.onOptionsLoadDone.bind(_this); _this.onSelect = _this.onSelect.bind(_this); _this.openMenu = _this.openMenu.bind(_this); if (_this.isExpandActionRendered) { _this.defaultActions = __spreadArrays([ { type: _this.mergedProps.icon || definition_1.FieldActionTypesEnum.DROP_DOWN, onClick: _this.onDropDownClick, } ], _this.defaultActions); } if (_this.isQuickSearchEnabled) { _this.quickFilterQueryTask = new util_1.DelayedTask(_this.doFilterChange.bind(_this), _this.delayTimeout); } return _this; } /** * @stable [19.10.2020] * @param event */ BaseSelect.prototype.onChange = function (event) { return __awaiter(this, void 0, void 0, function () { return __generator(this, function (_a) { switch (_a.label) { case 0: return [4 /*yield*/, _super.prototype.onChange.call(this, event)]; case 1: _a.sent(); this.onQueryTaskStart(); return [2 /*return*/]; } }); }); }; /** * @stable [10.08.2020] * @param prevProps * @param prevState */ BaseSelect.prototype.componentDidUpdate = function (prevProps, prevState) { _super.prototype.componentDidUpdate.call(this, prevProps, prevState); var originalProps = this.originalProps; if (this.state.progress && !originalProps.waitingForOptions && prevProps.waitingForOptions) { // We can't use progress props because it is reserved // The new data have come this.setState({ progress: false }, this.onOptionsLoadDone); } this.tryResetCachedValue(originalProps, prevProps); }; /** * @stable [10.08.2020] */ BaseSelect.prototype.componentWillUnmount = function () { _super.prototype.componentWillUnmount.call(this); this.cancelQueryFilterTask(); }; /** * @stable [30.01.2020] */ BaseSelect.prototype.clearValue = function () { return __awaiter(this, void 0, void 0, function () { return __generator(this, function (_a) { switch (_a.label) { case 0: return [4 /*yield*/, _super.prototype.clearValue.call(this)]; case 1: _a.sent(); if (this.isPlainValueApplied) { this.clearCachedValue(); } return [2 /*return*/]; } }); }); }; /** * @stable [14.10.2020] * @param event * @protected */ BaseSelect.prototype.onKeyEscape = function (event) { _super.prototype.onKeyEscape.call(this, event); this.hideMenu(); }; /** * @stable [09.08.2020] */ BaseSelect.prototype.openMenu = function () { if (this.isBusy || this.isMenuAlreadyOpened) { return; } var areLocalOptionsUsed = this.areLocalOptionsUsed; var doOptionsExist = this.doOptionsExist; var isForceReload = this.isForceReload; var isQuickSearchEnabled = this.isQuickSearchEnabled; BaseSelect.logger.debug('[$BaseSelect][openMenu] isForceReload:', isForceReload, ', doOptionsExist:', doOptionsExist, ', areLocalOptionsUsed:', areLocalOptionsUsed, ', isQuickSearchEnabled:', isQuickSearchEnabled); if ((isForceReload || !doOptionsExist) && !areLocalOptionsUsed) { if (isQuickSearchEnabled) { this.doFilterChange(); } else { this.onFilterChange(); } } else { this.showMenu(); } }; /** * @stable [09.08.2020] * @param event */ BaseSelect.prototype.onKeyEnter = function (event) { if (this.onQueryTaskStart(true)) { this.domAccessor.cancelEvent(event); } _super.prototype.onKeyEnter.call(this, event); }; BaseSelect.prototype.deleteItem = function (item) { // Do nothing }; /** * @stable [14.10.2020] * @param event * @protected */ BaseSelect.prototype.onClick = function (event) { _super.prototype.onClick.call(this, event); this.openMenu(); }; Object.defineProperty(BaseSelect.prototype, "attachmentBodyElement", { /** * @stable [16.10.2020] * @protected */ get: function () { var _this = this; var _a = this.originalProps, inlineOptionClassName = _a.inlineOptionClassName, inlineOptions = _a.inlineOptions; if (R.isNil(inlineOptions)) { return null; } var options = this.options; if (R.isEmpty(options)) { return null; } var currentValue = this.value; return (React.createElement(React.Fragment, null, options.map(function (option) { var id = _this.fromSelectValueToId(option); var isInlineOptionSelected = _this.isInlineOptionSelected(id, currentValue); return (React.createElement(inline_option_1.InlineOption, { key: "inline-option-key-" + id, option: option, selected: isInlineOptionSelected, className: util_1.ClsUtils.joinClassName(inlineOptionClassName, definition_1.SelectClassesEnum.BASE_SELECT_INLINE_OPTION), onClick: function () { return _this.onInlineOptionClick(option, isInlineOptionSelected); } })); }))); }, enumerable: false, configurable: true }); Object.defineProperty(BaseSelect.prototype, "inputAttachmentElement", { /** * @stable [22.12.2020] * @protected */ get: function () { var _this = this; return util_1.ConditionUtils.orNull(this.isMenuRendered, // To improve a performance function () { return (React.createElement(menu_component_1.Menu, __assign({ ref: _this.menuRef, anchorElement: util_1.ConditionUtils.orNull(_this.isMenuAnchored, function () { return _this.menuAnchorElement; }), width: util_1.ConditionUtils.orNull(_this.isMenuAnchored, function () { return _this.menuWidth; }), progress: _this.isBusy, options: _this.getFilteredOptions(), onSelect: _this.onSelect, onFilterChange: _this.onMenuFilterChange }, _this.getMenuProps()))); }); }, enumerable: false, configurable: true }); /** * @stable [08.08.2020] * @protected */ BaseSelect.prototype.getMenuProps = function () { var menuConfiguration = this.originalProps.menuConfiguration; return util_1.FilterUtils.defValuesFilter(__assign({ filter: util_1.ConditionUtils.orUndef(this.isRemoteFilterUsed, function () { return null; }) }, menuConfiguration)); }; /** * @stable [08.08.2020] * @param filter * @protected */ BaseSelect.prototype.getFilteredOptions = function (filter) { var _this = this; var value = this.value; var actualFilter = filter; var doesFilterExist = util_1.TypeUtils.isFn(filter); if (this.isQuickSearchEnabled && !this.isRemoteFilterUsed && !this.isValueObject(value) && util_1.ObjectUtils.isObjectNotEmpty(value)) { var queryFilter_1 = function (option) { return util_1.FilterUtils.queryFilter(value, _this.fromSelectValueToDisplayValue(option)); }; actualFilter = doesFilterExist ? function (option) { return queryFilter_1(option) && filter(option); } : queryFilter_1; } return util_1.TypeUtils.isFn(actualFilter) ? this.options.filter(actualFilter) : this.options; }; Object.defineProperty(BaseSelect.prototype, "isBusy", { /** * @stable [14.10.2020] * @protected */ get: function () { return this.state.progress; }, enumerable: false, configurable: true }); /** * @stable [10.08.2020] * @protected */ BaseSelect.prototype.getFieldClassName = function () { return util_1.ClsUtils.joinClassName(_super.prototype.getFieldClassName.call(this), definition_1.SelectClassesEnum.BASE_SELECT); }; /** * @stable [28.01.2020] * @param {IPresetsSelectOptionEntity} option */ BaseSelect.prototype.onSelect = function (option) { var _this = this; if (this.isPlainValueApplied) { this.saveCachedValue(util_1.CloneUtils.shallowClone(option), function () { return _this.doSelectOption(option); }); } else { this.doSelectOption(option); } }; /** * @stable [10.08.2020] * @param option * @param isInlineOptionSelected * @protected */ BaseSelect.prototype.onInlineOptionClick = function (option, isInlineOptionSelected) { this.onSelect(option); }; /** * @stable [10.08.2020] * @param id * @param currentValue * @protected */ BaseSelect.prototype.isInlineOptionSelected = function (id, currentValue) { return this.fromSelectValueToId(currentValue) === id; }; /** * @stable [05.09.2020] * @param option * @protected */ BaseSelect.prototype.notifySelectOption = function (option) { var onSelect = this.originalProps.onSelect; if (!util_1.TypeUtils.isDef(option) || !util_1.TypeUtils.isFn(onSelect)) { return; } onSelect(option); }; /** * @stable [28.01.2020] * @param {SelectValueT} value * @returns {AnyT} */ BaseSelect.prototype.getDecoratedDisplayValue = function (value) { var _this = this; var $$cachedValue = this.$$cashedValue; var hasCachedValue = !R.isNil($$cachedValue); if (!hasCachedValue && (!this.isQuickSearchEnabled || this.isValueObject(value))) { var id_1 = this.fromSelectValueToId(value); value = util_1.NvlUtils.nvl(R.find(function (option) { return _this.fromSelectValueToId(option) === id_1; }, this.options), value); } return _super.prototype.getDecoratedDisplayValue.call(this, hasCachedValue ? $$cachedValue : value, hasCachedValue); }; /** * @stable [10.08.2020] * @param value * @protected */ BaseSelect.prototype.decorateDisplayValue = function (value) { return this.fromSelectValueToDisplayValue(value); }; Object.defineProperty(BaseSelect.prototype, "options", { /** * @stable [10.08.2020] * @protected */ get: function () { return util_1.NvlUtils.nvl(this.originalProps.options, []); }, enumerable: false, configurable: true }); Object.defineProperty(BaseSelect.prototype, "isExpandActionRendered", { /** * @stable [10.08.2020] * @protected */ get: function () { return util_1.WrapperUtils.isExpandActionRendered(this.mergedProps); }, enumerable: false, configurable: true }); Object.defineProperty(BaseSelect.prototype, "isAllowEmptyFilterValue", { /** * @stable [08.08.2020] * @protected */ get: function () { return util_1.WrapperUtils.isAllowEmptyFilterValue(this.originalProps); }, enumerable: false, configurable: true }); /** * @stable [10.08.2020] * @param value * @protected */ BaseSelect.prototype.fromSelectValueToId = function (value) { return this.fieldConverter.fromSelectValueToId(value); }; /** * @stable [10.08.2020] * @protected */ BaseSelect.prototype.getComponentsSettingsProps = function () { return util_1.PropsUtils.mergeWithSystemProps(_super.prototype.getComponentsSettingsProps.call(this), this.componentsSettings.baseSelect); }; /** * @stable [14.08.2020] */ BaseSelect.prototype.doFilterChange = function () { this.onFilterChange(this.decoratedDisplayValue); }; /** * @stable [09.08.2020] * @param event * @private */ BaseSelect.prototype.onDropDownClick = function (event) { this.domAccessor.cancelEvent(event); this.openMenu(); this.setFocus(); }; /** * @stable [10.08.2020] * @param noDelay * @private */ BaseSelect.prototype.onQueryTaskStart = function (noDelay) { if (noDelay === void 0) { noDelay = false; } if (this.isBusy) { return false; } if (this.isRemoteFilterUsed) { this.hideMenu(); if (noDelay) { this.cancelQueryFilterTask(); this.doFilterChange(); } else { this.quickFilterQueryTask.start(); } } else { this.showMenu(); } return true; }; /** * @stable [10.08.2020] * @private */ BaseSelect.prototype.onMenuFilterChange = function (query) { if (!this.isRemoteFilterUsed) { // In case of "API init data + a local filter" BaseSelect.logger.debug('[$BaseSelect][onMenuFilterChange] The remote filter is down. Do nothing..'); return; } this.onFilterChange(query); }; /** * @stable [13.08.2020] * @param query */ BaseSelect.prototype.onFilterChange = function (query) { var _this = this; var onDictionaryChange = this.originalProps.onDictionaryChange; if (!util_1.TypeUtils.isFn(onDictionaryChange)) { BaseSelect.logger.debug('[$BaseSelect][onFilterChange] The onDictionaryChange callback is not defined. Do nothing..'); return; } if (this.isQuickSearchEnabled) { var isQueryEmpty = !util_1.ObjectUtils.isObjectNotEmpty(query); if (isQueryEmpty && !this.isAllowEmptyFilterValue) { BaseSelect.logger.debug('[$BaseSelect][onFilterChange] The query is empty. Do nothing...'); return; } } this.setState({ progress: true }, function () { BaseSelect.logger.debug('[$BaseSelect][onFilterChange] The onDictionaryChange callback is being called. Query:', query); onDictionaryChange(_this.dictionary, { payload: util_1.FilterUtils.defValuesFilter({ query: query }), }); }); }; /** * @stable [11.08.2020] * @private */ BaseSelect.prototype.onOptionsLoadDone = function () { var filteredOptions = this.getFilteredOptions(); BaseSelect.logger.debug('[$BaseSelect][onOptionsLoadDone] The options have been loaded successfully. The options:', filteredOptions); this.showMenu(filteredOptions); util_1.ConditionUtils.ifNotNilThanValue(this.originalProps.onDictionaryLoad, function (onDictionaryLoad) { return onDictionaryLoad(filteredOptions); }); }; /** * @stable [10.08.2020] * @param option * @private */ BaseSelect.prototype.doSelectOption = function (option) { this.onChangeManually(this.isPlainValueApplied ? this.fromSelectValueToId(option) : option); this.notifySelectOption(option); this.setFocus(); }; /** * @stable [29.01.2020] * @param {TProps} props * @param {TProps} previousProps */ BaseSelect.prototype.tryResetCachedValue = function (props, previousProps) { if (!this.isPlainValueApplied) { return; } var newValue = props.value; if (!R.equals(newValue, previousProps.value)) { // The value has changed // TODO Pass cached value inside a constructor var $$cachedValue = this.$$cashedValue; if (!R.isNil($$cachedValue) && !R.equals($$cachedValue.value, newValue)) { // Need to reset the previous cached display value if the value has been cleared or replaced this.clearCachedValue(); } } }; /** * @stable [09.08.2020] * @private */ BaseSelect.prototype.cancelQueryFilterTask = function () { util_1.ConditionUtils.ifNotNilThanValue(this.quickFilterQueryTask, function (task) { return task.stop(); }); }; /** * @stable [11.08.2020] * @param filteredOptions * @private */ BaseSelect.prototype.showMenu = function (filteredOptions) { var _this = this; if (this.isMenuAlreadyOpened) { return; } if (!R.isEmpty(filteredOptions || this.getFilteredOptions())) { this.setState({ menuRendered: true }, function () { return _this.menu.show(); }); BaseSelect.logger.debug('[$BaseSelect][showMenu] The menu has been shown.'); } else { BaseSelect.logger.debug('[$BaseSelect][showMenu] The options are empty. The menu does not show.'); } }; /** * @stable [09.08.2020] * @private */ BaseSelect.prototype.hideMenu = function () { if (!this.isMenuAlreadyOpened) { return; } this.setState({ menuRendered: false }); }; /** * @stable [30.01.2020] * @param {() => void} callback */ BaseSelect.prototype.clearCachedValue = function (callback) { this.saveCachedValue(null, callback); }; /** * @stable [30.01.2020] * @param {IPresetsSelectOptionEntity} value * @param {() => void} callback */ BaseSelect.prototype.saveCachedValue = function (value, callback) { this.setState({ $$cachedValue: value }, callback); }; /** * @stable [15.10.2020] * @param value * @private */ BaseSelect.prototype.fromSelectValueToDisplayValue = function (value) { return this.fieldConverter.fromSelectValueToDisplayValue(value); }; Object.defineProperty(BaseSelect.prototype, "originalEmptyValue", { /** * @stable [15.10.2020] * @protected */ get: function () { return definition_1.FieldConstants.VALUE_TO_RESET; }, enumerable: false, configurable: true }); Object.defineProperty(BaseSelect.prototype, "isQuickSearchEnabled", { /** * @stable [15.10.2020] * @private */ get: function () { return !this.isFocusPrevented; }, enumerable: false, configurable: true }); Object.defineProperty(BaseSelect.prototype, "delayTimeout", { /** * @stable [15.10.2020] * @private */ get: function () { return util_1.NvlUtils.nvl(this.mergedProps.delayTimeout, 1000); }, enumerable: false, configurable: true }); Object.defineProperty(BaseSelect.prototype, "areLocalOptionsUsed", { /** * @stable [15.10.2020] * @private */ get: function () { return util_1.TypeUtils.isUndef(this.originalProps.waitingForOptions); }, enumerable: false, configurable: true }); Object.defineProperty(BaseSelect.prototype, "isMenuAnchored", { /** * @stable [15.10.2020] * @private */ get: function () { return this.originalProps.anchored; }, enumerable: false, configurable: true }); Object.defineProperty(BaseSelect.prototype, "menuAnchorElement", { /** * @stable [15.10.2020] * @private */ get: function () { return util_1.CalcUtils.calc(this.originalProps.menuAnchorElement) || this.input; }, enumerable: false, configurable: true }); Object.defineProperty(BaseSelect.prototype, "$$cashedValue", { /** * @stable [30.01.2020] * @returns {IPresetsSelectOptionEntity} */ get: function () { return this.state.$$cachedValue; }, enumerable: false, configurable: true }); Object.defineProperty(BaseSelect.prototype, "dictionary", { /** * @stable [15.10.2020] * @private */ get: function () { return this.originalProps.dictionary; }, enumerable: false, configurable: true }); Object.defineProperty(BaseSelect.prototype, "doOptionsExist", { /** * @stable [15.10.2020] * @private */ get: function () { return !R.isNil(this.originalProps.options); }, enumerable: false, configurable: true }); Object.defineProperty(BaseSelect.prototype, "isMenuAlreadyOpened", { /** * @stable [15.10.2020] * @private */ get: function () { return util_1.ConditionUtils.ifNotNilThanValue(this.menu, function (menu) { return menu.isOpen(); }, false); }, enumerable: false, configurable: true }); Object.defineProperty(BaseSelect.prototype, "isForceReload", { /** * @stable [15.10.2020] * @private */ get: function () { return this.originalProps.forceReload; }, enumerable: false, configurable: true }); Object.defineProperty(BaseSelect.prototype, "isRemoteFilterUsed", { /** * @stable [15.10.2020] * @private */ get: function () { return this.originalProps.remoteFilter && !this.areLocalOptionsUsed; }, enumerable: false, configurable: true }); Object.defineProperty(BaseSelect.prototype, "isMenuRendered", { /** * @stable [15.10.2020] * @private */ get: function () { return this.state.menuRendered; }, enumerable: false, configurable: true }); Object.defineProperty(BaseSelect.prototype, "menuWidth", { /** * @stable [15.10.2020] * @private */ get: function () { return this.domAccessor.getWidth(this.actualRef.current); }, enumerable: false, configurable: true }); Object.defineProperty(BaseSelect.prototype, "menu", { /** * @stable [15.10.2020] * @private */ get: function () { return this.menuRef.current; }, enumerable: false, configurable: true }); BaseSelect.defaultProps = util_1.PropsUtils.mergeWithParentDefaultProps({ forceReload: true, remoteFilter: true, }, base_text_field_component_1.BaseTextField); BaseSelect.logger = ts_smart_logger_1.LoggerFactory.makeLogger('BaseSelect'); return BaseSelect; }(base_text_field_component_1.BaseTextField)); exports.BaseSelect = BaseSelect; //# sourceMappingURL=base-select.component.js.map