@dvrd/dvr-controls 1.0.88 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dvrd/dvr-controls",
-  "version": "1.0.88",
+  "version": "1.1.0",
   "description": "Custom web controls",
   "main": "index.ts",
   "files": [

package/src/js/textField/dvrdInput.tsx

@@ -21,6 +21,7 @@ import {ElementPosition, ErrorType, OrnamentShape} from '../util/interfaces';
 import AwesomeIcon from '../icon/awesomeIcon';
 import {directTimeout} from '../util/componentUtil';
 import {stopPropagation} from "../util/controlUtil";
+import NumberString from "../util/numberString";
 
 interface Props {
     onChange: ChangeEventHandler;
@@ -29,7 +30,7 @@ interface Props {
     onKeyDown: KeyboardEventHandler;
     onKeyUp?: KeyboardEventHandler;
     onClearInput?: MouseEventHandler;
-    value: string | number;
+    value: string | number | NumberString;
     disabled?: boolean;
     autoFocus?: boolean;
     autoSelect?: boolean;
@@ -127,8 +128,8 @@ export default function DvrdInput(props: Props) {
 
     function renderInput() {
         const elementProps = {
-            ...inputProps, value, onChange, onFocus: onFocusInput, onBlur: onBlurInput, onKeyDown, disabled,
-            className: classNames('dvrd-input', inputClassName, noResize && 'no-resize'), id: `${id}-input`,
+            ...inputProps, value: value.toString(), onChange, onFocus: onFocusInput, onBlur: onBlurInput, onKeyDown,
+            disabled, className: classNames('dvrd-input', inputClassName, noResize && 'no-resize'), id: `${id}-input`,
             ref: inputRef, onKeyUp,
         };
         if (area) return <textarea {...elementProps}/>;

package/src/js/textField/dvrdInputController.tsx

@@ -16,6 +16,7 @@ import {generateComponentId} from '../util/componentUtil';
 import {enterPressed} from '../util/controlUtil';
 import {ErrorType, OrnamentShape} from '../util/interfaces';
 import DvrdInput from "./dvrdInput";
+import NumberString from "../util/numberString";
 
 export interface InputControllerProps {
     onChange: (value: string, evt: React.ChangeEvent) => void;
@@ -25,7 +26,7 @@ export interface InputControllerProps {
     onKeyUp?: KeyboardEventHandler;
     onEnter?: KeyboardEventHandler;
     onClearInput?: MouseEventHandler;
-    value: string | number;
+    value: string | number | NumberString;
     label?: string;
     ornaments?: OrnamentShape | OrnamentShape[];
     inputProps?: InputHTMLAttributes<any> & TextareaHTMLAttributes<any>;

package/src/js/textField/dvrdNumberInput.tsx

@@ -8,15 +8,16 @@ import {ChangeFunction, ErrorType, OrnamentShape} from '../util/interfaces';
 import {roundTo} from '../util/miscUtil';
 import DvrdInputController from "./dvrdInputController";
 import {isPasting, positionIsAfterComma, textIsSelected} from "../util/inputUtil";
+import NumberString from "../util/numberString";
 
 interface Props {
-    onChange: ChangeFunction<string | number>;
+    onChange: ChangeFunction<NumberString>;
     onFocus?: FocusEventHandler;
     onBlur?: FocusEventHandler;
     onKeyDown?: KeyboardEventHandler;
     onKeyUp?: KeyboardEventHandler;
     onEnter?: KeyboardEventHandler;
-    value: string | number;
+    value: string | number | NumberString;
     label?: string;
     ornaments?: OrnamentShape | OrnamentShape[];
     inputProps?: InputHTMLAttributes<any>;
@@ -32,7 +33,6 @@ interface Props {
     placeholder?: string;
     multipleSeparators?: boolean;
     wholeNumbers?: boolean;
-    asNumber?: boolean;
     asCurrency?: boolean;
     autoSelect?: boolean;
     unControlled?: boolean;
@@ -41,9 +41,9 @@ interface Props {
 
 export default function DVRDNumberInput(props: Props) {
     const {
-        onKeyDown, inputProps, asCurrency, asNumber, wholeNumbers, disableSymbols, onChange, value, unControlled
+        onKeyDown, inputProps, asCurrency, wholeNumbers, disableSymbols, onChange, value, unControlled
     } = props;
-    const [innerValue, setInnerValue] = useState(value);
+    const [innerValue, setInnerValue] = useState<NumberString>(new NumberString(value));
     const id = useRef(generateComponentId(props.id));
 
     function _onKeyDown(evt: React.KeyboardEvent<HTMLInputElement>) {
@@ -77,8 +77,7 @@ export default function DVRDNumberInput(props: Props) {
             numValue -= step;
         let stringValue = numValue.toString();
         if (asCurrency) stringValue = roundTo(numValue, 2);
-        if (asNumber) change(Number(stringValue));
-        else change(stringValue);
+        change(new NumberString(stringValue));
     }
 
     function onKeyDownSelected(evt: React.KeyboardEvent<HTMLInputElement>) {
@@ -111,15 +110,13 @@ export default function DVRDNumberInput(props: Props) {
                 value = value.replace(/[^0-9-]/g, '').trim();
             if (disableSymbols)
                 value = value.replace(/[\-+]/g, '').trim();
-            if (asNumber) {
-                const numValue = Number(value.replace(',', '.'));
-                change(numValue, evt);
-            } else change(value, evt);
+            const numValue = new NumberString(value);
+            change(numValue, evt);
         }
         return value;
     }
 
-    function change(value: number | string, evt?: React.ChangeEvent<HTMLInputElement>) {
+    function change(value: NumberString, evt?: React.ChangeEvent<HTMLInputElement>) {
         setInnerValue(value);
         onChange(value, evt);
     }
@@ -129,7 +126,7 @@ export default function DVRDNumberInput(props: Props) {
     }
 
     useEffect(() => {
-        if (!unControlled) setInnerValue(value);
+        if (!unControlled) setInnerValue(new NumberString(value));
     }, [value]);
 
     useEffect(() => {
@@ -138,6 +135,7 @@ export default function DVRDNumberInput(props: Props) {
     }, [props.disabled, props.autoFocus]);
 
     return (
-        <DvrdInputController {...props} id={id.current} onChange={_onChange} onKeyDown={_onKeyDown} value={innerValue}/>
+        <DvrdInputController {...props} id={id.current} onChange={_onChange} onKeyDown={_onKeyDown}
+                             value={innerValue}/>
     );
 }

package/src/js/util/numberString.ts

@@ -0,0 +1,41 @@
+import { nullify } from "./miscUtil";
+
+export default class NumberString {
+    private value: string;
+    private readonly zeroAsNull: boolean;
+
+    constructor(value?: string | number | NumberString, zeroAsNull: boolean = false) {
+        this.value = value?.toString() ?? '';
+        this.zeroAsNull = zeroAsNull;
+    }
+
+    get stringValue(): string {
+        return this.value;
+    }
+
+    get numberValue(): number {
+        const numValue = Number(this.value.replace(',', '.'));
+        return Number.isNaN(numValue) ? 0 : numValue;
+    }
+
+    get nullStringValue(): string | null {
+        return nullify(this.value);
+    }
+
+    get nullNumberValue(): number | null {
+        const nullString = this.nullStringValue;
+        if (!nullString) return null;
+        const numValue = Number(nullString.replace(',', '.'));
+        if (Number.isNaN(numValue)) return null;
+        return (this.zeroAsNull && !numValue) ? null : 0;
+    }
+
+    setValue = (value: string | number): NumberString => {
+        this.value = value.toString();
+        return this;
+    }
+
+    toString = () => {
+        return this.stringValue;
+    }
+}