react-application-core
Version:
A react-based application core for the business applications.
201 lines • 7.53 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.Slider = void 0;
var React = require("react");
var noUiSlider = require("nouislider");
var definition_1 = require("../../definition");
var util_1 = require("../../util");
var definitions_interface_1 = require("../../definitions.interface");
var generic_component_1 = require("../base/generic.component");
var numberfield_component_1 = require("../field/numberfield/numberfield.component");
/**
* @component-impl
* @stable [16.10.2020]
*/
var Slider = /** @class */ (function (_super) {
__extends(Slider, _super);
/**
* @stable [16.10.2020]
* @param originalProps
*/
function Slider(originalProps) {
var _this = _super.call(this, originalProps) || this;
_this.attachmentRef = React.createRef();
_this.state = {};
_this.onMaxValueChange = _this.onMaxValueChange.bind(_this);
_this.onMinValueChange = _this.onMinValueChange.bind(_this);
return _this;
}
/**
* @stable [16.10.2020]
*/
Slider.prototype.render = function () {
var className = this.originalProps.className;
return (React.createElement("div", { ref: this.actualRef, className: util_1.ClsUtils.joinClassName(definition_1.SliderClassesEnum.SLIDER, util_1.CalcUtils.calc(className)) },
this.valuesElement,
React.createElement("div", { ref: this.attachmentRef })));
};
/**
* @stable [16.10.2020]
*/
Slider.prototype.componentDidMount = function () {
var _this = this;
var _a = this.mergedProps, max = _a.max, min = _a.min, step = _a.step;
var minMaxEntity = this.minMaxEntity;
this.slider = noUiSlider.create(this.attachmentRef.current, {
start: [util_1.NvlUtils.nvl(minMaxEntity.min, min), util_1.NvlUtils.nvl(minMaxEntity.max, max)],
connect: true,
step: step,
range: {
'max': max,
'min': min,
},
});
this.slider.on('change.one', function (data) { return _this.onChangeValues(_this.nc.asNumber(data[0]), _this.nc.asNumber(data[1])); });
this.slider.on('update.one', function (data) { return _this.onUpdateValues(_this.nc.asNumber(data[0]), _this.nc.asNumber(data[1])); });
};
/**
* @stable [16.10.2020]
*/
Slider.prototype.componentWillUnmount = function () {
this.slider = null;
};
Object.defineProperty(Slider.prototype, "componentsSettingsProps", {
/**
* @stable [16.10.2020]
* @protected
*/
get: function () {
return this.componentsSettings.slider;
},
enumerable: false,
configurable: true
});
Object.defineProperty(Slider.prototype, "valuesElement", {
/**
* @stable [15.10.2020]
* @protected
*/
get: function () {
var minMaxEntity = this.minMaxEntity;
var fieldConfiguration = this.mergedProps.fieldConfiguration;
return (React.createElement("div", { className: definition_1.SliderClassesEnum.SLIDER_FIELDS_WRAPPER },
React.createElement(numberfield_component_1.NumberField, __assign({ errorMessageRendered: false, full: false }, fieldConfiguration, { value: minMaxEntity.min, onChange: this.onMinValueChange })),
React.createElement(numberfield_component_1.NumberField, __assign({ errorMessageRendered: false, full: false }, fieldConfiguration, { value: minMaxEntity.max, onChange: this.onMaxValueChange }))));
},
enumerable: false,
configurable: true
});
Object.defineProperty(Slider.prototype, "minMaxEntity", {
/**
* @stable [16.10.2020]
* @protected
*/
get: function () {
var _a = this.state, max = _a.max, min = _a.min;
var minValue = min;
var maxValue = max;
util_1.ConditionUtils.ifNotNilThanValue(this.currentValue, function ($value) {
minValue = util_1.NvlUtils.nvl(minValue, $value.min);
maxValue = util_1.NvlUtils.nvl(maxValue, $value.max);
});
return {
max: maxValue,
min: minValue,
};
},
enumerable: false,
configurable: true
});
/**
* @stable [15.10.2020]
* @param min
* @param max
* @private
*/
Slider.prototype.onChangeValues = function (min, max) {
var _this = this;
this.setState({
min: definitions_interface_1.UNDEF,
max: definitions_interface_1.UNDEF,
}, function () { return _this.onChangeManually({ min: min, max: max }); });
};
/**
* @stable [16.10.2020]
* @param value
* @private
*/
Slider.prototype.onMinValueChange = function (value) {
var min = value;
var max = this.minMaxEntity.max;
this.slider.set([min, max]);
this.onChangeValues(min, max);
};
/**
* @stable [16.10.2020]
* @param value
* @private
*/
Slider.prototype.onMaxValueChange = function (value) {
var min = this.minMaxEntity.min;
var max = value;
this.slider.set([min, max]);
this.onChangeValues(min, max);
};
/**
* @stable [16.10.2020]
* @param entity
* @private
*/
Slider.prototype.onChangeManually = function (entity) {
util_1.ConditionUtils.ifNotNilThanValue(this.originalProps.onChange, function (onChange) { return onChange(entity); });
};
/**
* @stable [15.10.2020]
* @param min
* @param max
* @private
*/
Slider.prototype.onUpdateValues = function (min, max) {
this.setState({ min: min, max: max });
};
Object.defineProperty(Slider.prototype, "currentValue", {
/**
* @stable [15.10.2020]
* @private
*/
get: function () {
return this.originalProps.value;
},
enumerable: false,
configurable: true
});
Slider.defaultProps = __assign({}, definition_1.DefaultEntities.SLIDER_ENTITY);
return Slider;
}(generic_component_1.GenericComponent));
exports.Slider = Slider;
//# sourceMappingURL=slider.component.js.map