@try-at-software/input-elements
Version:
A package providing different input elements that are extensible and easily configurable for your custom needs.
108 lines (107 loc) • 5.29 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.NumberInput = void 0;
const React = require("react");
const react_1 = require("@fluentui/react");
const Components_1 = require("../../Components");
const delimiter = '.';
class NumberInput extends React.Component {
constructor() {
var _a;
super(...arguments);
this.state = {
intermediateValue: (_a = this.props.value) === null || _a === void 0 ? void 0 : _a.toString(),
customWarning: ''
};
this.handleChange = (event) => {
const newValue = event.target.value;
const value = NumberInput.normalizeData(newValue);
const { isRequired } = this.props;
if (!isRequired && !value) {
this.setState({ intermediateValue: '', customWarning: '' });
this.props.onChange(undefined);
return;
}
if (!value || isNaN(Number(value))) {
this.setState({ intermediateValue: value, customWarning: 'The provided value is not a valid number.' });
this.props.invalidateInput();
return;
}
const numericValue = NumberInput.getNumericValue(value);
this.handleUserInput(numericValue, value);
};
this.handleIncrement = (value) => {
let numericValue = NumberInput.getNumericValue(value);
numericValue += this.getStep();
this.handleUserInput(numericValue, numericValue.toString());
};
this.handleDecrement = (value) => {
let numericValue = NumberInput.getNumericValue(value);
numericValue -= this.getStep();
this.handleUserInput(numericValue, numericValue.toString());
};
}
render() {
var _a;
if (!this.props)
return null;
const { dynamicProps, errorMessage, operativeProps } = this.props;
const { customWarning } = this.state;
return (React.createElement(React.Fragment, null,
React.createElement(Components_1.LabelRenderer, { label: this.props.label, required: !!this.props.renderRequiredIndicator }),
React.createElement(react_1.SpinButton, { "data-automationid": "number-input", inputProps: {
autoFocus: !!operativeProps.autoFocus,
placeholder: operativeProps.placeholder,
disabled: !!dynamicProps.isDisabled,
onChange: this.handleChange
}, value: (_a = this.state.intermediateValue) !== null && _a !== void 0 ? _a : '', onIncrement: this.handleIncrement, onDecrement: this.handleDecrement }),
React.createElement(Components_1.ErrorRenderer, { error: errorMessage, messageBarType: react_1.MessageBarType.warning }),
React.createElement(Components_1.ErrorRenderer, { error: customWarning, messageBarType: react_1.MessageBarType.warning })));
}
handleUserInput(value, intermediateValue) {
const consistencyWarning = this.ensureValueConsistency(value);
this.setState({ customWarning: consistencyWarning, intermediateValue: intermediateValue });
if (consistencyWarning === undefined)
this.props.onChange(value);
else
this.props.invalidateInput();
}
ensureValueConsistency(value) {
var _a, _b, _c, _d, _e;
const { operativeProps } = this.props;
const maxValue = this.getMaxValue();
const minValue = this.getMinValue();
if (value > maxValue)
return (_b = (_a = operativeProps.getMaxErrorMessage) === null || _a === void 0 ? void 0 : _a.call(operativeProps, minValue, maxValue)) !== null && _b !== void 0 ? _b : `The maximum value is ${maxValue}`;
if (value < minValue)
return (_d = (_c = operativeProps.getMinErrorMessage) === null || _c === void 0 ? void 0 : _c.call(operativeProps, minValue, maxValue)) !== null && _d !== void 0 ? _d : `The minimum value is ${minValue}`;
if (!operativeProps.handleDecimalValues && value % 1 !== 0)
return (_e = operativeProps.decimalErrorMessage) !== null && _e !== void 0 ? _e : 'Decimal values are not allowed';
return undefined;
}
getMaxValue() {
var _a;
const { operativeProps } = this.props;
return (_a = operativeProps.max) !== null && _a !== void 0 ? _a : Number.MAX_SAFE_INTEGER;
}
getMinValue() {
var _a;
const { operativeProps } = this.props;
return (_a = operativeProps.min) !== null && _a !== void 0 ? _a : Number.MIN_SAFE_INTEGER;
}
getStep() {
var _a;
const { operativeProps } = this.props;
return (_a = operativeProps.step) !== null && _a !== void 0 ? _a : 1;
}
static getNumericValue(value) {
const number = Number(NumberInput.normalizeData(value));
if (Number.isNaN(number))
return 0;
return number;
}
static normalizeData(value) {
return value === null || value === void 0 ? void 0 : value.replace(',', delimiter);
}
}
exports.NumberInput = NumberInput;