@up-group-ui/react-controls
Version:
Up shared react controls
148 lines • 8.16 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.UpNumber = void 0;
var tslib_1 = require("tslib");
var jsx_runtime_1 = require("react/jsx-runtime");
var Input_1 = (0, tslib_1.__importDefault)(require("../Input"));
var BaseControl_1 = require("../_Common/BaseControl/BaseControl");
var TypeNumberControl_1 = (0, tslib_1.__importDefault)(require("../_Common/Validation/TypeNumberControl"));
var Box_1 = (0, tslib_1.__importDefault)(require("../../Containers/Box"));
var withTheme_1 = (0, tslib_1.__importDefault)(require("../../../Common/theming/withTheme"));
var theming_1 = (0, tslib_1.__importDefault)(require("../../../Common/theming"));
var UpButton_1 = (0, tslib_1.__importDefault)(require("../Button/UpButton"));
var eventListener_1 = require("../../../Common/utils/eventListener");
var classnames_1 = (0, tslib_1.__importDefault)(require("classnames"));
var styles_1 = require("./styles");
var UpNumber = (function (_super) {
(0, tslib_1.__extends)(UpNumber, _super);
function UpNumber(p, c) {
var _this = _super.call(this, p, c) || this;
_this.isValueMatched = function (value) {
var seperatorForDecimalNumbers = _this.props.seperatorForDecimalNumbers;
if (value != null) {
switch (seperatorForDecimalNumbers) {
case 'comma':
return value.match(/^(\d+([,]\d*)?)?$/);
case 'point':
return value.match(/^(\d+([.]\d*)?)?$/);
default:
return value.match(/^(\d+([,.]\d*)?)?$/);
}
}
};
_this.displayDecimalWithComma = function (numberAsString) {
return numberAsString.replace('.', ',');
};
_this.applyDecimalPlace = function (value) {
if (value == null || isNaN(parseFloat(value.replace(',', '.')))) {
return '';
}
if (_this.props.decimalPlace != null) {
var _value = parseFloat(value.replace(',', '.'));
return _value.toFixed(_this.props.decimalPlace);
}
return value;
};
_this.handleNumericChange = function (event, valueAsString) {
if (_this.isValueMatched(valueAsString)) {
var currentValue = valueAsString.replace(',', '.');
if ((_this.props.max && parseFloat(currentValue)) > _this.props.max ||
(_this.props.min && parseFloat(currentValue)) < _this.props.min) {
return null;
}
_this.handleChangeEvent(event, valueAsString);
}
};
_this.handleNumericBlur = function (event) {
var value = event.target.value.replace(',', '.');
if (_this.isValueMatched(value)) {
value = _this.displayDecimalWithComma(_this.applyDecimalPlace(value));
event.target.value = value;
_this.handleChangeEvent(event, value);
}
};
_this.increment = function () {
var newValue = parseFloat((_this.currentValue || 0).toString().replace(',', '.'));
var newValueAsString = newValue.toString();
if (isNaN(newValue)) {
newValue = 0;
}
newValue += _this.props.stepSize ? _this.props.stepSize : 1;
if (_this.props.max != null && newValue > _this.props.max) {
newValue = _this.props.max;
}
if (_this.props.decimalPlace != null) {
newValueAsString = _this.applyDecimalPlace(newValue.toString());
}
else {
newValueAsString = Number(newValue.toFixed(10)).toString();
}
newValueAsString = _this.displayDecimalWithComma(newValueAsString);
_this.setState({ value: newValueAsString }, function () {
_this.handleChangeEvent((0, eventListener_1.eventFactory)(_this.props.name, _this.state.value), _this.state.value);
});
};
_this.decrement = function () {
var newValue = parseFloat((_this.currentValue || 0).toString().replace(',', '.'));
var newValueAsString = newValue.toString();
if (isNaN(newValue)) {
newValue = 0;
}
newValue -= _this.props.stepSize ? _this.props.stepSize : 1;
if (_this.props.min != null && newValue < _this.props.min) {
newValue = _this.props.min;
}
if (_this.props.decimalPlace != null) {
newValueAsString = _this.applyDecimalPlace(newValue.toString());
}
else {
newValueAsString = Number(newValue.toFixed(10)).toString();
}
newValueAsString = _this.displayDecimalWithComma(newValueAsString);
_this.setState({ value: newValueAsString }, function () {
_this.handleChangeEvent((0, eventListener_1.eventFactory)(_this.props.name, _this.state.value), _this.state.value);
});
};
_this.state = {
value: p.value,
};
_this._validationManager.addControl(new TypeNumberControl_1.default(_this.props.decimalPlace === 0, _this.props.min, _this.props.max));
return _this;
}
UpNumber.prototype.getValue = function (value) {
return value;
};
UpNumber.prototype.showError = function () {
return this.props.showError !== undefined
? typeof this.props.showError === 'function'
? this.props.showError(this.state)
: this.props.showError === true
: this.hasError;
};
UpNumber.prototype.showSuccess = function () {
return false;
};
UpNumber.prototype.renderControl = function () {
var _this = this;
var _a = this.props, className = _a.className, isRequired = _a.isRequired, theme = _a.theme, readonly = _a.readonly, tooltip = _a.tooltip, placeholder = _a.placeholder, name = _a.name, autoFocus = _a.autoFocus, floatingLabel = _a.floatingLabel, autocomplete = _a.autocomplete;
return ((0, jsx_runtime_1.jsxs)("div", (0, tslib_1.__assign)({ className: (0, classnames_1.default)((0, styles_1.wrapperNumberStyles)(this.props), 'up-number') }, { children: [(0, jsx_runtime_1.jsx)(Input_1.default, { className: className, floatingLabel: floatingLabel, placeholder: placeholder, name: name, tabIndex: this.props.tabIndex, tooltip: tooltip, readonly: readonly, isRequired: isRequired, autoFocus: autoFocus, autocomplete: autocomplete, value: this.currentValue != null ? this.currentValue.toString() : '', onChange: function (event, value) {
event.persist();
_this.handleNumericChange(event, value);
}, onFocus: this.props.onFocus, onBlur: function (event) {
if (_this.props.onBlur)
_this.props.onBlur(event);
event.persist();
_this.handleNumericBlur(event);
} }, void 0), !this.props.hideButtons && ((0, jsx_runtime_1.jsxs)(Box_1.default, (0, tslib_1.__assign)({ className: (0, styles_1.wrapperNumberButtonsStyles)(this.props), flexDirection: theme.inputBorderLess ? 'row' : 'column-reverse' }, { children: [(0, jsx_runtime_1.jsx)(UpButton_1.default, { intent: 'primary', borderless: true, width: 'icon', iconSize: 9, height: 'xsmall', onClick: this.decrement, iconName: 'arrow-down' }, void 0), (0, jsx_runtime_1.jsx)(UpButton_1.default, { intent: 'primary', borderless: true, width: 'icon', iconSize: 9, height: 'xsmall', onClick: this.increment, iconName: 'arrow-up' }, void 0)] }), void 0))] }), void 0));
};
UpNumber.defaultProps = {
showError: true,
max: Infinity,
min: -Infinity,
theme: theming_1.default,
};
return UpNumber;
}(BaseControl_1.BaseControlComponent));
exports.UpNumber = UpNumber;
exports.default = (0, withTheme_1.default)(UpNumber);
//# sourceMappingURL=UpNumber.js.map