@try-at-software/input-elements 1.2.2 → 1.2.4

package/lib/SingleValueInputElements/ISingleValueInputElementProps.d.ts

@@ -5,6 +5,7 @@ export interface IInvalidationOptions {
 export interface ISingleValueInputElementProps<TValue> {
     value: TValue;
     label: FormText;
+    isRequired: boolean;
     renderRequiredIndicator: boolean;
     errorMessage: FormText;
     onChange: (newValue: TValue) => void;

package/lib/SingleValueInputElements/NumberInputElement/INumberInputProps.d.ts

@@ -1,7 +1,11 @@
+import { FormText } from '../../Components';
 import { IBaseInputElementProps } from '../IBaseInputElementProps';
 export interface INumberInputProps extends IBaseInputElementProps {
     handleDecimalValues?: boolean;
     min?: number;
     max?: number;
     step?: number;
+    getMinErrorMessage?: (min: number, max: number | undefined) => FormText;
+    getMaxErrorMessage?: (min: number | undefined, max: number) => FormText;
+    decimalErrorMessage?: FormText;
 }

package/lib/SingleValueInputElements/NumberInputElement/NumberInput.d.ts

@@ -12,6 +12,9 @@ interface INumberInputState {
 export declare class NumberInput extends React.Component<ISingleValueInputElementProps<number> & IOperativeProps<INumberInputProps> & IDynamicProps<IBaseInputElementDynamicProps>, INumberInputState> {
     state: INumberInputState;
     render(): JSX.Element;
+    private handleChange;
+    private handleIncrement;
+    private handleDecrement;
     private handleUserInput;
     private ensureValueConsistency;
     private getMaxValue;

package/lib/SingleValueInputElements/NumberInputElement/NumberInput.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NumberInput = void 0;
-const react_1 = require("@fluentui/react");
 const React = require("react");
+const react_1 = require("@fluentui/react");
 const Components_1 = require("../../Components");
 const delimiter = '.';
 class NumberInput extends React.Component {
@@ -13,63 +13,72 @@ class NumberInput extends React.Component {
             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;
+            console.log(isRequired, value);
+            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, operativeProps } = this.props;
+        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: (event) => {
-                        const newValue = event.target.value;
-                        const value = NumberInput.normalizeData(newValue);
-                        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);
-                    }
-                }, value: (_a = this.state.intermediateValue) !== null && _a !== void 0 ? _a : '', onIncrement: (value) => {
-                    let numericValue = NumberInput.getNumericValue(value);
-                    numericValue += this.getStep();
-                    this.handleUserInput(numericValue, numericValue.toString());
-                }, onDecrement: (value) => {
-                    let numericValue = NumberInput.getNumericValue(value);
-                    numericValue -= this.getStep();
-                    this.handleUserInput(numericValue, numericValue.toString());
-                } }),
-            React.createElement(Components_1.ErrorRenderer, { error: this.props.errorMessage, messageBarType: react_1.MessageBarType.warning }),
-            React.createElement(Components_1.ErrorRenderer, { error: this.state.customWarning, messageBarType: react_1.MessageBarType.warning })));
+                    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 changeResult = this.ensureValueConsistency(value);
-        this.setState({ customWarning: changeResult.warning, intermediateValue: intermediateValue });
-        if (changeResult.newValue !== undefined)
-            this.props.onChange(changeResult.newValue);
+        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();
-        if (value > maxValue)
-            return { warning: `The maximum value is ${maxValue}`, newValue: undefined };
         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 { warning: `The minimum value is ${minValue}`, newValue: undefined };
-        const { operativeProps } = this.props;
+            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 {
-                warning: 'Decimal values are not allowed',
-                newValue: undefined
-            };
-        return { warning: '', newValue: value };
+            return (_e = operativeProps.decimalErrorMessage) !== null && _e !== void 0 ? _e : 'Decimal values are not allowed';
+        return undefined;
     }
     getMaxValue() {
         var _a;

package/lib/SingleValueInputElements/SingleValueInputElement.js

@@ -102,7 +102,8 @@ class SingleValueInputElement extends ExtendedInputElement_1.ExtendedInputElemen
                 React.createElement(SingleValueInputElementWrapper_1.SingleValueInputElementWrapper, { internalComponent: this.componentToRender, renderErrors: (_b = this._configuration) === null || _b === void 0 ? void 0 : _b.renderErrors, loadingIndicator: (_c = this._configuration) === null || _c === void 0 ? void 0 : _c.loadingComponent, inputProps: {
                         label: (_d = this._configuration) === null || _d === void 0 ? void 0 : _d.label,
                         value: this.value,
-                        renderRequiredIndicator: ((_e = this._configuration) === null || _e === void 0 ? void 0 : _e.renderRequiredIndicator) && ((_f = this._configuration) === null || _f === void 0 ? void 0 : _f.isRequired),
+                        isRequired: this._configuration.isRequired,
+                        renderRequiredIndicator: ((_e = this._configuration) === null || _e === void 0 ? void 0 : _e.isRequired) && ((_f = this._configuration) === null || _f === void 0 ? void 0 : _f.renderRequiredIndicator),
                         errorMessage: this.errorMessage,
                         onChange: (newValue) => this.setValue(newValue),
                         invalidateInput: this.invalidateInput

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@try-at-software/input-elements",
-    "version": "1.2.2",
+    "version": "1.2.4",
     "description": "A package providing different input elements that are extensible and easily configurable for your custom needs.",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",