@telsystems/inputs
Version:
238 lines • 11.4 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
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) || 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;
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
t[p[i]] = s[p[i]];
return t;
};
import * as React from 'react';
import update from 'react-addons-update';
import { TextInput } from '../TextInput';
import { numbers } from '@telsystems/helpers';
import { fractionFormatter, integerFormatter } from './formatters';
import theme from '@telsystems/design/dist/themes/default/Inputs.scss';
import { Icon } from '@telsystems/design';
import cn from 'classnames';
var DEFAULT_INTEGER_MASK = '#';
var DEFAULT_FRACTION_DIGITS = 0;
var presetIntegerMaskParams = { reverse: true };
var NumericInput = (function (_super) {
__extends(NumericInput, _super);
function NumericInput() {
var args = [];
for (var _i = 0; _i < arguments.length; _i++) {
args[_i] = arguments[_i];
}
var _this = _super.apply(this, args) || this;
_this.onKeyDown = function (e) {
_this.setState({ caretNow: e.target.selectionStart });
var onKeyDown = _this.props.onKeyDown;
if (typeof onKeyDown === 'function') {
onKeyDown(e);
}
};
_this.onFocus = function (e) {
var transformedValue = e.target.value.replace(',', '.').split(' ').join('');
if (transformedValue && Number(transformedValue) === 0) {
var onChange = _this.props.onChange;
if (typeof onChange === 'function') {
onChange('', e);
}
}
_this.setState({ isBlured: false, isFocused: true });
var onFocus = _this.props.onFocus;
if (typeof onFocus === 'function') {
onFocus(e);
}
};
_this.onChange = function (value, e) {
var _a = _this.props, nullable = _a.nullable, max = _a.max, onChange = _a.onChange;
if (!value && nullable) {
if (typeof onChange === 'function') {
onChange(value, e);
}
return;
}
var transformedValue = value.replace(',', '.').split(' ').join('');
if (!numbers.isNumber(transformedValue)) {
return;
}
if (max && max < Number(transformedValue)) {
return;
}
if (!nullable && !transformedValue && !document.activeElement.isEqualNode(_this.ref)) {
transformedValue = '0';
}
if (transformedValue && transformedValue[0] === '.') {
transformedValue = "0" + transformedValue;
}
var indexOfDot = transformedValue.indexOf('.');
var length = indexOfDot >= 0 ? indexOfDot : transformedValue.length;
var withoutZero = _this.removeZeros(transformedValue) + transformedValue.substring(length, transformedValue.length);
if (typeof onChange === 'function') {
onChange(withoutZero, e);
}
_this.setState({ caretNow: e.target.selectionStart, value: withoutZero });
};
_this.onBlur = function (e) {
var _a = _this.props, min = _a.min, nullable = _a.nullable, onChange = _a.onChange;
var transformedValue = e.target.value.replace(',', '.').split(' ').join('');
if (min && min > Number(transformedValue)) {
if (nullable && (transformedValue.length || !nullable)) {
if (typeof onChange === 'function') {
onChange(min.toString(), e);
}
return;
}
}
if (!nullable && !transformedValue) {
if (typeof onChange === 'function') {
onChange('0', e);
}
return;
}
if (typeof onChange === 'function') {
onChange(transformedValue, e);
}
_this.setState({
isBlured: true,
isFocused: false
});
};
_this.removeZeros = function (value) {
var integer = value.split('.')[0];
if (Number(integer) === 0) {
return '0';
}
while (integer.indexOf('0') === 0) {
integer = integer.toString().substring(1, integer.length);
}
return integer;
};
_this.getRef = function (input) {
var getRef = _this.props.getRef;
_this.ref = input;
if (typeof getRef === 'function') {
return getRef(input);
}
};
_this.increment = function () {
var intValue = parseInt(_this.state.value, 10);
_this.setState({
value: (isNaN(intValue) ? 0 : intValue + 1).toString()
});
};
_this.decrement = function () {
var intValue = parseInt(_this.state.value, 10);
_this.setState({
value: (isNaN(intValue) ? 0 : intValue - 1).toString()
});
};
var nullable = _this.props.nullable;
var value = _this.props.value;
value = value || nullable ? '' : 0;
_this.state = {
value: value.toString(),
caretNow: 0,
isFocused: false,
isBlured: false,
};
return _this;
}
NumericInput.prototype.componentWillReceiveProps = function (nextProps) {
var nullable = nextProps.nullable;
var _a = nextProps.value, value = _a === void 0 ? (nullable ? '' : 0) : _a;
if (Number(value) !== Number(this.state.value)) {
var newState = update(this.state, { value: { $set: value.toString() } });
if (!value) {
newState.caretNow = nullable ? 0 : 1;
}
this.setState(newState);
}
};
NumericInput.prototype.componentDidUpdate = function (prevProps, prevState) {
var caretNow = this.state.caretNow;
if (prevState.caretNow !== caretNow) {
var caretPosition = caretNow;
if (prevState.value && this.state.value) {
var prevMaskedInteger = this.formatValue(prevState.value.toString().split('.')[0]);
var currentMaskedInteger = this.formatValue(this.state.value.toString().split('.')[0]);
if (prevMaskedInteger !== currentMaskedInteger) {
if (prevMaskedInteger.length < currentMaskedInteger.length) {
caretPosition += currentMaskedInteger.length - prevMaskedInteger.length - '.'.length;
}
if (caretPosition > currentMaskedInteger.length) {
caretPosition = currentMaskedInteger.length;
}
}
}
if (this.props.value === '0.') {
caretPosition = this.props.value.length;
}
if (this.ref.selectionStart) {
this.ref.focus();
this.ref.setSelectionRange(caretPosition, caretPosition);
}
}
};
NumericInput.prototype.render = function () {
var _a = this.props, className = _a.className, textAlignRight = _a.textAlignRight, incremental = _a.incremental, rest = __rest(_a, ["className", "textAlignRight", "incremental"]);
var value = this.state.value;
var transformedValue = value.toString().replace(',', '.').split(' ').join('');
var maskedValue = this.formatValue(transformedValue);
return (React.createElement(TextInput, __assign({}, rest, { getRef: this.getRef, onChange: this.onChange, onBlur: this.onBlur, onKeyDown: this.onKeyDown, onFocus: this.onFocus, value: maskedValue, className: className, textAlignRight: textAlignRight }), incremental
? React.createElement("div", { className: cn(theme['icon'], theme['chevrons-icons']) },
React.createElement("div", { className: cn(theme['chevron-up-icon']) },
React.createElement(Icon, { id: "chevron_up", onClick: this.increment })),
React.createElement("div", { className: cn(theme['chevron-down-icon']) },
React.createElement(Icon, { id: "chevron_down", onClick: this.decrement })))
: null));
};
NumericInput.prototype.formatValue = function (value) {
var _a = this.props, _b = _a.fractionDigits, fractionDigits = _b === void 0 ? DEFAULT_FRACTION_DIGITS : _b, nullable = _a.nullable, _c = _a.fractionMask, fractionMask = _c === void 0 ? true : _c, _d = _a.integerMask, integerMask = _d === void 0 ? DEFAULT_INTEGER_MASK : _d, _e = _a.integerMaskParams, integerMaskParams = _e === void 0 ? presetIntegerMaskParams : _e;
var needDot = (value.toString().indexOf('.') > -1 && !!fractionDigits);
var autofillFractionPart = false;
if (this.state.isBlured) {
needDot = !!fractionDigits && (!nullable || (value.toString().length && nullable));
autofillFractionPart = true;
}
var _f = value.toString().split('.'), integer = _f[0], fraction = _f[1];
var integerValue = integerFormatter(integer, integerMask, integerMaskParams);
var fractionValue = fractionFormatter(fraction, fractionDigits, fractionMask && autofillFractionPart);
integerValue = integerValue || (!this.props.nullable && fractionValue ? '0' : integerValue);
return "" + (needDot && !integerValue ? '0' : integerValue) + (needDot ? '.' : '') + (needDot ? fractionValue : '');
};
NumericInput.defaultProps = {
incremental: false,
separateThousands: true,
textAlignRight: true,
nullable: true,
fractionDigits: DEFAULT_FRACTION_DIGITS,
fractionMask: true,
integerMask: DEFAULT_INTEGER_MASK,
integerMaskParams: presetIntegerMaskParams
};
return NumericInput;
}(React.Component));
export { NumericInput };
//# sourceMappingURL=NumericInput.js.map