@dvrd/dvr-controls 1.0.81 → 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.81",
+  "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/select/dvrdGroupedSelect.tsx

@@ -8,6 +8,7 @@ import {ErrorType, GroupedSelectItem, SelectValueType} from "../util/interfaces"
 import classNames from 'classnames';
 import AwesomeIcon from "../icon/awesomeIcon";
 import defer from 'lodash.defer';
+import {stopPropagation} from "../util/controlUtil";
 
 
 interface Props {
@@ -27,6 +28,7 @@ interface Props {
     maxItemsHeight?: number | string;
     highlightSelected?: true;
     placeholder?: string;
+    searchable?: boolean;
 }
 
 export type GroupedSelectRef = { open: VoidFunction; close: VoidFunction; toggle: (forcedValue?: boolean) => void };
@@ -42,12 +44,19 @@ function findInItems(items: Array<GroupedSelectItem>, value: string | number): G
     return null;
 }
 
+function itemMatchesSearch(item: GroupedSelectItem, search: string): boolean {
+    if (!search) return true;
+    return item.label.toString().toLowerCase().includes(search.toLowerCase());
+}
+
 function DVRDGroupedSelect(props: Props, ref: ForwardedRef<GroupedSelectRef>) {
     const {
         className, label, labelClassName, value, placeholder, valueClassName, error, itemContainerClassName,
-        onChange, items, itemClassName, disabled, errorClassName, highlightSelected
+        onChange, items, itemClassName, disabled, errorClassName, highlightSelected, searchable
     } = props;
     const [open, setOpen] = useState(false);
+    const [search, setSearch] = useState('');
+    const [searchActive, setSearchActive] = useState(false);
     const maxItemsHeight: string | undefined = useMemo(() => {
         const {maxItemsHeight} = props;
         if (maxItemsHeight) {
@@ -71,8 +80,36 @@ function DVRDGroupedSelect(props: Props, ref: ForwardedRef<GroupedSelectRef>) {
                 longest = item.label.toString();
         return longest;
     }, [items]);
+    const availableItems = useMemo(() => {
+        if (!searchable || !search.trim()) return items;
+        const _items: Array<GroupedSelectItem> = [];
+        for (const item of items) {
+            if (itemMatchesSearch(item, search)) _items.push(item);
+            else if (item.children) {
+                if (!!item.children.find((child: GroupedSelectItem) => itemMatchesSearch(child, search)))
+                    _items.push(item);
+            }
+        }
+        return _items;
+    }, [items, searchable, search]);
     const itemsContainer = useRef<HTMLDivElement>(null);
 
+    function onChangeSearch(evt: React.ChangeEvent<HTMLInputElement>) {
+        const {value} = evt.target;
+        setSearch(value);
+    }
+
+    function onFocusSearch() {
+        if (searchable) {
+            setSearchActive(true);
+            setOpen(true);
+        }
+    }
+
+    function onBlurSearch() {
+        if (searchable) setSearchActive(false);
+    }
+
     function onSelectItem(item: GroupedSelectItem) {
         return function (evt: React.MouseEvent) {
             evt.stopPropagation();
@@ -122,36 +159,61 @@ function DVRDGroupedSelect(props: Props, ref: ForwardedRef<GroupedSelectRef>) {
     }
 
     function renderValue() {
-        const hasValue = selectedLabel !== null;
-        const canRender = hasValue && !['string', 'number'].includes(typeof selectedLabel)
         const chevIcon = itemsPosition === 'bottom' ? 'chevron-down' : 'chevron-up';
-        const placeholderHidden = !placeholder?.length;
         return (
-            <div className={classNames('grouped-select-value-container', valueClassName)}>
-                {hasValue ?
-                    canRender ? renderCustomValue(selectedLabel as React.ReactElement) :
-                        <label className='grouped-select-value'>{selectedLabel}</label> :
-                    <label className={classNames('grouped-select-placeholder', placeholderHidden && 'hidden')}>
-                        {placeholderHidden ? 'placeholder' : placeholder}</label>
-                }
+            <div className={classNames('grouped-select-value-container', searchable && 'searchable', valueClassName)}>
+                {renderValueInput()}
+                {renderValueCustom()}
+                {renderValueLabel()}
+                {renderValuePlaceholder()}
                 <AwesomeIcon name={chevIcon} className='chev-icon'/>
                 <div style={{height: 0, visibility: 'hidden'}}>{longestValue}</div>
             </div>
         );
     }
 
-    function renderCustomValue(value: React.ReactElement) {
-        return React.cloneElement(value, {
-            ...value.props,
-            className: classNames(value.props?.className, 'grouped-select-value')
+    function renderValueInput() {
+        if (!searchable) return null;
+        const _value = searchActive ? search : selectedLabel?.toString();
+        return (
+            <input onChange={onChangeSearch} value={_value} onFocus={onFocusSearch}
+                   onBlur={onBlurSearch} className='dvrd-grouped-select-search' disabled={disabled}
+                   onClick={stopPropagation} placeholder={placeholder}/>
+        )
+    }
+
+    function renderValueCustom() {
+        if (selectedLabel === null || searchable) return null; // Nothing selected, or using a search input
+        if (['string', 'number'].includes(typeof selectedLabel)) return null; // Not a custom element
+        const element = selectedLabel as React.ReactElement;
+        return React.cloneElement(element, {
+            ...element.props,
+            className: classNames(element.props?.className, 'grouped-select-value')
         });
     }
 
+    function renderValueLabel() {
+        if (selectedLabel === null || searchable) return null; // Nothing selected, or using a search input
+        if (!['string', 'number'].includes(typeof selectedLabel)) return null; // A custom element
+        return (
+            <label className='grouped-select-value'>{selectedLabel}</label>
+        );
+    }
+
+    function renderValuePlaceholder() {
+        if (selectedLabel !== null || searchable) return null; // Something is selected, or we are using a search input
+        const placeholderHidden = !placeholder?.length;
+        return (
+            <label className={classNames('grouped-select-placeholder', placeholderHidden && 'hidden')}>
+                {placeholderHidden ? 'placeholder' : placeholder}</label>
+        );
+    }
+
     function renderItemsContainer() {
         return (
             <div className={classNames('grouped-select-items', itemContainerClassName)}
                  style={{maxHeight: maxItemsHeight}} ref={itemsContainer}>
-                {items.map(renderItem())}
+                {availableItems.map(renderItem())}
             </div>
         )
     }

package/src/js/select/style/dvrdGroupedSelect.scss

@@ -33,6 +33,16 @@
       cursor: pointer;
       background-color: white;
 
+      .dvrd-grouped-select-search {
+        width: 100%;
+        outline: none;
+        border: none;
+        padding: .75rem;
+        color: #2A435F;
+        border-radius: inherit;
+        font-family: avenir-light, sans-serif;
+      }
+
       .grouped-select-placeholder, .grouped-select-value {
         user-select: none;
         vertical-align: middle;
@@ -55,6 +65,10 @@
         transition: transform .2s ease-in-out;
         color: $color-gray-3;
       }
+
+      &.searchable {
+        padding: 0 .75rem 0 0;
+      }
     }
 
     .grouped-select-items {

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;
+}