@alfalab/core-components-number-input 1.0.16 → 1.1.0

package/Component.js

@@ -63,11 +63,12 @@ var NumberInput = React__default.default.forwardRef(function (_a, ref) {
     var handleKeyDown = function (event) {
         var disallowedSymbols = /[/|?!@#$%^&*()_=A-Za-zА-Яа-яЁё ]/;
         var oneKeyPress = !event.altKey && !event.metaKey && !event.ctrlKey;
+        var target = event.target;
         // Запрещаем вводить неразрешенные символы за исключением комбинаций клавиш
         if (oneKeyPress && event.key.length === 1 && disallowedSymbols.test(event.key)) {
             return event.preventDefault();
         }
-        var val = event.target.value;
+        var val = target.value;
         var hasSeparator = (val.match(utils.createSeparatorsRegExp()) || []).length > 0;
         // Запрещаем вводить второй сепаратор
         if (hasSeparator && utils.SEPARATORS.some(function (s) { return s === event.key; })) {
@@ -78,7 +79,7 @@ var NumberInput = React__default.default.forwardRef(function (_a, ref) {
             utils.SIGNS.some(function (s) { return s === event.key; })) {
             return event.preventDefault();
         }
-        var selectionStart = event.target.selectionStart || 0;
+        var selectionStart = target.selectionStart || 0;
         // Запрещаем вводить цифры в дробную часть, если кол-во цифр больше fractionLength
         if (hasSeparator &&
             fractionLength &&

package/cssm/Component.js

@@ -63,11 +63,12 @@ var NumberInput = React__default.default.forwardRef(function (_a, ref) {
     var handleKeyDown = function (event) {
         var disallowedSymbols = /[/|?!@#$%^&*()_=A-Za-zА-Яа-яЁё ]/;
         var oneKeyPress = !event.altKey && !event.metaKey && !event.ctrlKey;
+        var target = event.target;
         // Запрещаем вводить неразрешенные символы за исключением комбинаций клавиш
         if (oneKeyPress && event.key.length === 1 && disallowedSymbols.test(event.key)) {
             return event.preventDefault();
         }
-        var val = event.target.value;
+        var val = target.value;
         var hasSeparator = (val.match(utils.createSeparatorsRegExp()) || []).length > 0;
         // Запрещаем вводить второй сепаратор
         if (hasSeparator && utils.SEPARATORS.some(function (s) { return s === event.key; })) {
@@ -78,7 +79,7 @@ var NumberInput = React__default.default.forwardRef(function (_a, ref) {
             utils.SIGNS.some(function (s) { return s === event.key; })) {
             return event.preventDefault();
         }
-        var selectionStart = event.target.selectionStart || 0;
+        var selectionStart = target.selectionStart || 0;
         // Запрещаем вводить цифры в дробную часть, если кол-во цифр больше fractionLength
         if (hasSeparator &&
             fractionLength &&

package/esm/Component.js

@@ -54,11 +54,12 @@ var NumberInput = React.forwardRef(function (_a, ref) {
     var handleKeyDown = function (event) {
         var disallowedSymbols = /[/|?!@#$%^&*()_=A-Za-zА-Яа-яЁё ]/;
         var oneKeyPress = !event.altKey && !event.metaKey && !event.ctrlKey;
+        var target = event.target;
         // Запрещаем вводить неразрешенные символы за исключением комбинаций клавиш
         if (oneKeyPress && event.key.length === 1 && disallowedSymbols.test(event.key)) {
             return event.preventDefault();
         }
-        var val = event.target.value;
+        var val = target.value;
         var hasSeparator = (val.match(createSeparatorsRegExp()) || []).length > 0;
         // Запрещаем вводить второй сепаратор
         if (hasSeparator && SEPARATORS.some(function (s) { return s === event.key; })) {
@@ -69,7 +70,7 @@ var NumberInput = React.forwardRef(function (_a, ref) {
             SIGNS.some(function (s) { return s === event.key; })) {
             return event.preventDefault();
         }
-        var selectionStart = event.target.selectionStart || 0;
+        var selectionStart = target.selectionStart || 0;
         // Запрещаем вводить цифры в дробную часть, если кол-во цифр больше fractionLength
         if (hasSeparator &&
             fractionLength &&

package/modern/Component.js

@@ -52,11 +52,12 @@ const NumberInput = React.forwardRef(({ value: propValue, onChange, onBlur, allo
     const handleKeyDown = (event) => {
         const disallowedSymbols = /[/|?!@#$%^&*()_=A-Za-zА-Яа-яЁё ]/;
         const oneKeyPress = !event.altKey && !event.metaKey && !event.ctrlKey;
+        const target = event.target;
         // Запрещаем вводить неразрешенные символы за исключением комбинаций клавиш
         if (oneKeyPress && event.key.length === 1 && disallowedSymbols.test(event.key)) {
             return event.preventDefault();
         }
-        const val = event.target.value;
+        const val = target.value;
         const hasSeparator = (val.match(createSeparatorsRegExp()) || []).length > 0;
         // Запрещаем вводить второй сепаратор
         if (hasSeparator && SEPARATORS.some((s) => s === event.key)) {
@@ -67,7 +68,7 @@ const NumberInput = React.forwardRef(({ value: propValue, onChange, onBlur, allo
             SIGNS.some((s) => s === event.key)) {
             return event.preventDefault();
         }
-        const selectionStart = event.target.selectionStart || 0;
+        const selectionStart = target.selectionStart || 0;
         // Запрещаем вводить цифры в дробную часть, если кол-во цифр больше fractionLength
         if (hasSeparator &&
             fractionLength &&

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-number-input",
-    "version": "1.0.16",
+    "version": "1.1.0",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -14,7 +14,7 @@
         "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
     },
     "dependencies": {
-        "@alfalab/core-components-input": "^11.1.18",
+        "@alfalab/core-components-input": "^12.0.0",
         "react-merge-refs": "^1.1.0",
         "tslib": "^2.4.0"
     }

package/src/Component.tsx

@@ -0,0 +1,195 @@
+import React, { ChangeEvent, FocusEvent, KeyboardEvent, useRef, useState } from 'react';
+import mergeRefs from 'react-merge-refs';
+
+import { Input, InputProps } from '@alfalab/core-components-input';
+
+import { createSeparatorsRegExp, getAllowedValue, SEPARATORS, SIGNS } from './utils';
+
+export type NumberInputProps = Omit<InputProps, 'value' | 'onChange' | 'type'> & {
+    /**
+     * Значение поля ввода
+     */
+    value?: string | number | null;
+
+    /**
+     * Учитывать знаки '+' и '-'
+     */
+    allowSigns?: boolean;
+
+    /**
+     * Разделитель ',' или '.'
+     */
+    separator?: '.' | ',';
+
+    /**
+     * Количество символов после разделителя
+     */
+    fractionLength?: number;
+
+    /**
+     * Обработчик события изменения значения
+     */
+    onChange?: (
+        e: React.ChangeEvent<HTMLInputElement>,
+        payload: {
+            /**
+             * Числовое значение инпута
+             */
+            value: number | null;
+            /**
+             * Строковое значение инпута
+             * Используйте для изменения значения инпута
+             */
+            valueString: string;
+        },
+    ) => void;
+};
+
+export const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
+    (
+        {
+            value: propValue,
+            onChange,
+            onBlur,
+            allowSigns = true,
+            separator = ',',
+            fractionLength,
+            defaultValue,
+            ...restProps
+        },
+        ref,
+    ) => {
+        const uncontrolled = propValue === undefined;
+        const inputRef = useRef<HTMLInputElement>(null);
+        const [value, setValue] = useState<string>(defaultValue || '');
+
+        const getNumberValueFromStr = (valueString: string) => {
+            if (valueString === '') return null;
+
+            if (valueString.includes(',')) {
+                return parseFloat(valueString.replace(',', '.'));
+            }
+
+            return parseFloat(valueString);
+        };
+
+        const restoreCaret = (target: HTMLInputElement) => {
+            setTimeout(() => {
+                const input = target;
+                const positionCursor = input.selectionStart || 0;
+                const isEndPosition = input.value.length === positionCursor;
+
+                const enteredSign = SIGNS.some((s) => s === input.value[positionCursor - 1]);
+                const enteredSeparator = SEPARATORS.filter((s) => s !== separator).some(
+                    (s) => s === input.value[positionCursor - 1],
+                );
+
+                const shouldRestore = enteredSeparator || enteredSign;
+
+                if (!isEndPosition && shouldRestore) {
+                    input.selectionStart = positionCursor;
+                    input.selectionEnd = positionCursor;
+                }
+            });
+        };
+
+        const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+            const input = event.target;
+            const newValue = input.value.replace(createSeparatorsRegExp(), separator);
+
+            const allowedValue = getAllowedValue({
+                value: newValue,
+                fractionLength,
+                allowSigns,
+                separator,
+            });
+
+            if (onChange) {
+                onChange(event, {
+                    value: getNumberValueFromStr(allowedValue),
+                    valueString: allowedValue,
+                });
+            }
+
+            if (uncontrolled) {
+                setValue(allowedValue);
+            }
+
+            restoreCaret(input);
+        };
+
+        const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+            const disallowedSymbols = /[/|?!@#$%^&*()_=A-Za-zА-Яа-яЁё ]/;
+            const oneKeyPress = !event.altKey && !event.metaKey && !event.ctrlKey;
+            const target = event.target as HTMLInputElement;
+
+            // Запрещаем вводить неразрешенные символы за исключением комбинаций клавиш
+            if (oneKeyPress && event.key.length === 1 && disallowedSymbols.test(event.key)) {
+                return event.preventDefault();
+            }
+
+            const val = target.value;
+
+            const hasSeparator = (val.match(createSeparatorsRegExp()) || []).length > 0;
+
+            // Запрещаем вводить второй сепаратор
+            if (hasSeparator && SEPARATORS.some((s) => s === event.key)) {
+                return event.preventDefault();
+            }
+
+            // Запрещаем вводить лишний знак
+            if (
+                (!allowSigns || SIGNS.some((s) => s === val[0])) &&
+                SIGNS.some((s) => s === event.key)
+            ) {
+                return event.preventDefault();
+            }
+
+            const selectionStart = target.selectionStart || 0;
+
+            // Запрещаем вводить цифры в дробную часть, если кол-во цифр больше fractionLength
+            if (
+                hasSeparator &&
+                fractionLength &&
+                event.key.length === 1 &&
+                selectionStart > val.indexOf(separator) &&
+                val.split(separator)[1].length >= fractionLength
+            ) {
+                return event.preventDefault();
+            }
+
+            return undefined;
+        };
+
+        const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
+            const valueBlur = event.target.value.replace(new RegExp(`\\${separator}$`), '');
+
+            if (onChange) {
+                onChange(event, {
+                    value: getNumberValueFromStr(valueBlur),
+                    valueString: valueBlur,
+                });
+            }
+
+            if (uncontrolled) {
+                setValue(valueBlur);
+            }
+
+            if (onBlur) onBlur(event);
+        };
+
+        const visibleValue = uncontrolled ? value : propValue?.toString();
+
+        return (
+            <Input
+                ref={mergeRefs([ref, inputRef])}
+                value={visibleValue}
+                onBlur={handleBlur}
+                onChange={handleChange}
+                onKeyDown={handleKeyDown}
+                inputMode='decimal'
+                {...restProps}
+            />
+        );
+    },
+);

package/src/index.ts

@@ -0,0 +1 @@
+export * from './Component';

package/src/utils.ts

@@ -0,0 +1,46 @@
+export const SIGNS = ['-', '+'];
+export const SEPARATORS = [',', '.'];
+
+export function createSeparatorsRegExp() {
+    return new RegExp(`[${SEPARATORS.map((s) => `\\${s}`).join('')}]`, 'g');
+}
+
+const getNumberRegExp = (fractionLength?: number): RegExp => {
+    let reStr = '[0-9]+';
+
+    if (fractionLength !== 0) {
+        reStr = `${reStr}[${SEPARATORS.map((s) => `\\${s}`).join('')}]?[0-9]{0,${
+            fractionLength || Number.MAX_SAFE_INTEGER
+        }}`;
+    }
+
+    return new RegExp(`^${reStr}$`);
+};
+
+/**
+ * Проверка вводимых значений.
+ */
+export const getAllowedValue = ({
+    value = '',
+    fractionLength,
+    separator,
+    allowSigns,
+}: {
+    value: string;
+    fractionLength?: number;
+    separator: string;
+    allowSigns: boolean;
+}): string => {
+    const sign = allowSigns && SIGNS.some((s) => s === value[0]) ? value[0] : '';
+    const testedValue = sign ? value.slice(1) : value;
+
+    if (getNumberRegExp(fractionLength).test(testedValue)) {
+        return value;
+    }
+
+    const [majorPart, minorPart] = testedValue
+        .split(separator)
+        .map((v) => v.replace(/[^0-9]/g, ''));
+
+    return `${sign}${majorPart}${minorPart ? separator + minorPart.slice(0, fractionLength) : ''}`;
+};