@dvrd/dvr-controls 1.0.82 → 1.0.83

package/index.ts

@@ -47,7 +47,7 @@ import Media from './src/js/media/media';
 import DvrdButton, {DvrdButtonProps} from './src/js/button/dvrdButton';
 import DvrdDatePicker, {DVRDDatePickerRef} from './src/js/date/dvrdDatePicker';
 import DvrdInputController from './src/js/textField/dvrdInputController';
-import DvrdNumberInput from './src/js/textField/dvrdNumberInput';
+import DVRDNumberInput from './src/js/textField/dvrdNumberInput';
 import DVRDPasswordInput from './src/js/textField/dvrdPasswordInput';
 import Link from './src/js/link/link';
 import DvrdOptionsList from './src/js/optionsList/dvrdOptionsList';
@@ -98,7 +98,7 @@ export {
     DvrdDatePicker,
     DVRDDatePickerRef,
     DvrdInputController as DvrdInput,
-    DvrdNumberInput,
+    DVRDNumberInput,
     DVRDPasswordInput,
     Link,
     DvrdOptionsList,

package/package.json

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

package/src/js/pdf/settings/invoiceTable/pdfInvoiceTableSettings.tsx

@@ -8,8 +8,8 @@ import PdfInvoiceTable from "../../invoiceTable/pdfInvoiceTable";
 import {debug} from "../../../util/miscUtil";
 import {ElementPosition} from "../../../util/interfaces";
 import {fontItems} from "../../../util/pdfUtil";
-import {ColorPicker, DvrdNumberInput, DvrdSelect} from "../../../../../index";
 import IconButton, {IconButtonType} from "../buttons/iconButton";
+import {ColorPicker, DVRDNumberInput, DvrdSelect} from "../../../../../index";
 
 interface Props {
     element: PdfInvoiceTable;
@@ -116,7 +116,7 @@ export default class PdfInvoiceTableSettings extends PureComponent<Props, State>
     renderWidth = (value: number, index: number) => {
         const title = TITLES[index];
         return (
-            <DvrdNumberInput key={index} value={value.toString()} onChange={this.onChangeWidth(index)} label={title}
+            <DVRDNumberInput key={index} value={value.toString()} onChange={this.onChangeWidth(index)} label={title}
                          ornaments={{
                              element: <span style={{cursor: 'text'}}>%</span>,
                              placement: ElementPosition.RIGHT,
@@ -145,7 +145,7 @@ export default class PdfInvoiceTableSettings extends PureComponent<Props, State>
                 <label className='settings-label'>Tekstgrootte</label>
                 <DvrdSelect items={fontItems} value={settings.font} onChange={element.changeSetting('font')}
                             label='Lettertype' optionsContainerHeight='15rem' unControlled/>
-                <DvrdNumberInput value={settings.fontSize} onChange={element.changeSetting('fontSize')}
+                <DVRDNumberInput value={settings.fontSize} onChange={element.changeSetting('fontSize')}
                                  asNumber
                                  ornaments={{
                                      element: <span style={{cursor: 'text'}}>px</span>,

package/src/js/pdf/settings/text/pdfTextSettings.tsx

@@ -14,7 +14,7 @@ import {
     PDFTextVariables,
     SelectItemShape
 } from "../../../util/interfaces";
-import {ColorPicker, DvrdNumberInput, DvrdSelect, fontItems, getPdfVariables} from "../../../../../index";
+import {ColorPicker, DVRDNumberInput, DvrdSelect, fontItems, getPdfVariables} from "../../../../../index";
 import classNames from 'classnames';
 import IconButton, {IconButtonType} from "../buttons/iconButton";
 
@@ -177,7 +177,7 @@ export default class PdfTextSettings extends PureComponent<Props, State> {
                 <div className='font-settings'>
                     <DvrdSelect items={fontItems} value={settings.font} onChange={element.changeSetting('font')}
                                 label='Lettertype' optionsContainerHeight='15rem' unControlled/>
-                    <DvrdNumberInput value={settings.fontSize} onChange={element.changeSetting('fontSize')}
+                    <DVRDNumberInput value={settings.fontSize} onChange={element.changeSetting('fontSize')}
                                      label='Tekstgrootte' className='font-size'
                                      ornaments={{
                                          element: <span style={{cursor: 'text'}}>px</span>,

package/src/js/textField/dvrdNumberInput.tsx

@@ -2,10 +2,12 @@
  * Copyright (c) 2024. Dave van Rijn Development
  */
 
-import React, {FocusEventHandler, InputHTMLAttributes, KeyboardEventHandler, PureComponent} from 'react';
+import React, {FocusEventHandler, InputHTMLAttributes, KeyboardEventHandler, useEffect, useRef, useState} from 'react';
+import {generateComponentId} from '../util/componentUtil';
 import {ChangeFunction, ErrorType, OrnamentShape} from '../util/interfaces';
 import {roundTo} from '../util/miscUtil';
 import DvrdInputController from "./dvrdInputController";
+import {isPasting, positionIsAfterComma, textIsSelected} from "../util/inputUtil";
 
 interface Props {
     onChange: ChangeFunction<string | number>;
@@ -28,130 +30,114 @@ interface Props {
     error?: ErrorType;
     id?: string;
     placeholder?: string;
-    multipleSeparators: boolean;
-    wholeNumbers: boolean;
+    multipleSeparators?: boolean;
+    wholeNumbers?: boolean;
     asNumber?: boolean;
-    asCurrency: boolean;
+    asCurrency?: boolean;
     autoSelect?: boolean;
     unControlled?: boolean;
+    disableSymbols?: boolean;
 }
 
-// TODO Add option to disable symbols (+,-)
+export default function DVRDNumberInput(props: Props) {
+    const {
+        onKeyDown, inputProps, asCurrency, asNumber, wholeNumbers, disableSymbols, onChange, value, unControlled
+    } = props;
+    const [innerValue, setInnerValue] = useState(value);
+    const id = useRef(generateComponentId(props.id));
 
-interface State {
-    value: number | string;
-}
+    function _onKeyDown(evt: React.KeyboardEvent<HTMLInputElement>) {
+        const {key} = evt,
+            numValue = Number(value);
+        // Allow only number and simple edit keys
+        const editKeys = /\d|Backspace|ArrowRight|ArrowLeft|ArrowUp|ArrowDown|Escape|Esc|Enter|[,.\-+]|Tab/;
+        if (!editKeys.test(key) && !isPasting(evt))
+            evt.preventDefault();
 
-export default class DvrdNumberInput extends PureComponent<Props, State> {
-    static defaultProps = {
-        asCurrency: false,
-        wholeNumbers: false,
-        multipleSeparators: false,
-    }
+        // Handle Arrow events
+        if (['ArrowUp', 'ArrowDown'].includes(key)) {
+            evt.preventDefault();
+            if (!isNaN(numValue))
+                return onArrowEvent(evt, numValue);
+        }
 
-    constructor(props: Props) {
-        super(props);
-        this.state = {
-            value: props.value,
-        };
+        // Handle event if no selected text
+        onKeyDownSelected(evt);
+
+        if (onKeyDown)
+            onKeyDown(evt);
     }
 
+    function onArrowEvent(evt: React.KeyboardEvent<HTMLInputElement>, numValue: number) {
+        const {key} = evt,
+            step = Number(inputProps?.step || asCurrency ? .01 : 1);
+        if (key === 'ArrowUp')
+            numValue += step;
+        else if (key === 'ArrowDown')
+            numValue -= step;
+        let stringValue = numValue.toString();
+        if (asCurrency) stringValue = roundTo(numValue, 2);
+        if (asNumber) change(Number(stringValue));
+        else change(stringValue);
+    }
 
-    onKeyDown = (evt: React.KeyboardEvent) => {
-        const {onKeyDown, asCurrency, wholeNumbers, inputProps, asNumber, multipleSeparators} = this.props;
-        const {value} = this.state;
-        const {key, target} = evt;
-        let numValue = Number(value);
-        // Allow only number and simple edit keys
-        if (!/\d|Backspace|ArrowRight|ArrowLeft|ArrowUp|ArrowDown|Escape|Esc|Enter|[,.\-+]|Tab|Delete|Del/.test(key) &&
-            !this.isPasting(evt))
+    function onKeyDownSelected(evt: React.KeyboardEvent<HTMLInputElement>) {
+        if (textIsSelected(evt)) return;
+        const {currentTarget, key} = evt,
+            position = currentTarget.selectionStart;
+        if (/[,.]/.test(key) && /[,.]/.test(value.toString()) && asCurrency)
+            // Prevent double points or commas
             evt.preventDefault();
 
-        if (key === 'ArrowUp') {
+        if (wholeNumbers && /[.,]/.test(key))
             evt.preventDefault();
-            if (!isNaN(numValue)) {
-                const step = Number(inputProps?.step || asCurrency ? .01 : 1);
-                numValue += step;
-                let stringValue = numValue.toString();
-                if (asCurrency) stringValue = roundTo(numValue, 2);
-                if (asNumber) this.change(Number(stringValue), evt);
-                else this.change(stringValue, evt);
-            }
-            return;
-        }
-        if (key === 'ArrowDown') {
+        else if (asCurrency && /[.,]\d{2}/.test(value.toString()) && /\d/.test(key) &&
+            positionIsAfterComma(position, value.toString()))
+            // Prevent more than 2 decimals when working with currencies
             evt.preventDefault();
-            if (!isNaN(numValue)) {
-                const step = Number(inputProps?.step || asCurrency ? .01 : 1);
-                numValue -= step;
-                let stringValue = numValue.toString();
-                if (asCurrency) stringValue = roundTo(numValue, 2);
-                if (asNumber) this.change(Number(stringValue), evt);
-                else this.change(stringValue, evt);
-            }
-            return;
-        }
 
-        const textIsSelected = this.textIsSelected(evt), position = (target as HTMLInputElement).selectionStart;
-        if (!textIsSelected) {
-            if (/[,.]/.test(key) && /[,.]/.test(value.toString()) && !multipleSeparators)
-                // Prevent double points or commas
-                evt.preventDefault();
-
-            if (wholeNumbers && /[.,]/.test(key))
-                evt.preventDefault();
-            else if (asCurrency && /[.,]\d{2}/.test(value.toString()) && /\d/.test(key) &&
-                this.positionIsAfterComma(position, value.toString()))
-                // Prevent more than 2 decimals when working with currencies
-                evt.preventDefault();
-
-            if ((position && position !== 0) && /[\-+]/.test(key))
-                // Prevent - or + sign after first position
-                evt.preventDefault();
-        }
-
-        if (onKeyDown !== undefined && onKeyDown !== null)
-            onKeyDown(evt);
-    };
+        if (/[\-+]/.test(key) && (disableSymbols || (position && position !== 0)))
+            // Prevent - or + sign completely or after first position
+            evt.preventDefault();
+    }
 
-    onChange = (value: string, evt: React.ChangeEvent) => {
-        const {asNumber} = this.props;
+    function _onChange(value: string, evt: React.ChangeEvent<HTMLInputElement>) {
+        value = value.replace(/ /g, '');
         if (!/^-?[\d.,]*$/.test(value)) evt.preventDefault();
         else {
-            let changeValue: string | number = value;
-            if (value.startsWith('.') || value.startsWith(',')) value = 0 + value;
-            if (asNumber) changeValue = Number(value.replace(',', '.'));
-            this.change(changeValue, evt);
+            if (value.startsWith('.') || value.startsWith(',')) value = '0' + value;
+            if (wholeNumbers)
+                // Only allow numbers and minus sign for negative numbers
+                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);
         }
-    };
-
-    change = (value: string | number, evt: React.ChangeEvent | React.KeyboardEvent) => {
-        this.setState({value}, () => {
-            this.props.onChange(value, evt as React.ChangeEvent);
-        })
-    };
-
-    isPasting = (evt: React.KeyboardEvent) => {
-        return (evt.metaKey || evt.ctrlKey) && evt.key === 'v';
-    };
-
-    positionIsAfterComma = (position: number | null, value: string) => {
-        if (position === null) return true;
-        if (value.includes('.')) return position > value.indexOf('.');
-        if (value.includes(',')) return position > value.indexOf(',');
-        return false;
-    };
-
-    textIsSelected = (evt: React.KeyboardEvent) => {
-        const target = evt.target as HTMLInputElement, start = target.selectionStart, end = target.selectionEnd;
-        return start != end;
-    };
-
-    render = () => {
-        const value = this.props.unControlled ? this.state.value : this.props.value;
-        return (
-            <DvrdInputController {...this.props} value={value} onChange={this.onChange} onKeyDown={this.onKeyDown}
-                                 unControlled={false}/>
-        );
+        return value;
+    }
+
+    function change(value: number | string, evt?: React.ChangeEvent<HTMLInputElement>) {
+        setInnerValue(value);
+        onChange(value, evt);
+    }
+
+    function focusInput() {
+        document.getElementById(id.current + '-input')?.focus();
     }
+
+    useEffect(() => {
+        if (!unControlled) setInnerValue(value);
+    }, [value]);
+
+    useEffect(() => {
+        if (!props.disabled && props.autoFocus)
+            focusInput();
+    }, [props.disabled, props.autoFocus]);
+
+    return (
+        <DvrdInputController {...props} id={id.current} onChange={_onChange} onKeyDown={_onKeyDown} value={innerValue}/>
+    );
 }

package/src/js/util/inputUtil.ts

@@ -0,0 +1,21 @@
+/*
+ * Copyright (c) 2024. Dave van Rijn Development
+ */
+
+export function isPasting(evt: React.KeyboardEvent): boolean {
+    return (evt.metaKey || evt.ctrlKey) && evt.key === 'v';
+}
+
+export function textIsSelected(evt: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>): boolean {
+    const {currentTarget} = evt,
+        start = currentTarget.selectionStart,
+        end = currentTarget.selectionEnd;
+    return start != end;
+}
+
+export function positionIsAfterComma(position: number | null, value: string): boolean {
+    if (position === null) return true;
+    if (value.includes('.')) return position > value.indexOf('.');
+    if (value.includes(',')) return position > value.indexOf(',');
+    return false;
+}