@arche-mc2/arche-controls
Version:
We know that there are a ton of react UI library projects to choose from. Our hope with this one is to provide the next generation of react components that you can use to bootstrap your next project, or as a reference for building a UIKit. Read on to get
147 lines • 7.71 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Input_1 = require("../Input");
var BaseControl_1 = require("../_Common/BaseControl/BaseControl");
var TypeNumberControl_1 = require("../_Common/Validation/TypeNumberControl");
var Box_1 = require("../../Containers/Box");
var withTheme_1 = require("../../../Common/theming/withTheme");
var theming_1 = require("../../../Common/theming");
var UpButton_1 = require("../Button/UpButton");
var eventListener_1 = require("../../../Common/utils/eventListener");
var classnames = require("classnames");
var styles_1 = require("./styles");
var UpNumber = (function (_super) {
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(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(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 ? 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;
return (React.createElement("div", { className: classnames(styles_1.wrapperNumberStyles(this.props), 'up-number', className) },
React.createElement(Input_1.default, { floatingLabel: floatingLabel, placeholder: placeholder, name: name, tabIndex: this.props.tabIndex, tooltip: tooltip, readonly: readonly, isRequired: isRequired, autoFocus: autoFocus, value: this.currentValue != null ? this.currentValue.toString() : '', onChange: function (event, value) {
event.persist();
_this.handleNumericChange(event, value);
}, disabled: this.props.disabled, onFocus: this.props.onFocus, onBlur: function (event) {
if (_this.props.onBlur)
_this.props.onBlur(event);
event.persist();
_this.handleNumericBlur(event);
} }),
!this.props.hideButtons &&
React.createElement(Box_1.default, { className: styles_1.wrapperNumberButtonsStyles(this.props), flexDirection: theme.inputBorderLess ? 'row' : 'column-reverse' },
React.createElement(UpButton_1.default, { intent: 'primary', borderless: true, width: 'icon', iconSize: 9, height: 'xsmall', onClick: this.decrement, iconName: 'arrow-down' }),
React.createElement(UpButton_1.default, { intent: 'primary', borderless: true, width: 'icon', iconSize: 9, height: 'xsmall', onClick: this.increment, iconName: 'arrow-up' }))));
};
UpNumber.defaultProps = {
showError: true,
max: Infinity,
min: -Infinity,
theme: theming_1.default,
};
return UpNumber;
}(BaseControl_1.BaseControlComponent));
exports.UpNumber = UpNumber;
exports.default = withTheme_1.default(UpNumber);
//# sourceMappingURL=UpNumber.js.map