@alfalab/core-components-number-input 1.0.1 → 1.0.3

package/Component.d.ts

@@ -1,126 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
-import { ChangeEvent, InputHTMLAttributes, MouseEvent, ReactNode } from "react";
-type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type" | "value" | "defaultValue" | "onChange" | "onClick" | "onMouseDown" | "enterKeyHint"> & {
-    /**
-     * Значение поля ввода
-     */
-    value?: string;
-    /**
-     * Начальное значение поля
-     */
-    defaultValue?: string;
-    /**
-     * Растягивает компонент на ширину контейнера
-     */
-    block?: boolean;
-    /**
-     * Крестик для очистки поля
-     */
-    clear?: boolean;
-    /**
-     * Размер компонента
-     */
-    size?: "s" | "m" | "l" | "xl";
-    /**
-     * Набор цветов для компонента
-     */
-    colors?: "default" | "inverted";
-    /**
-     * Отображение ошибки
-     */
-    error?: ReactNode | boolean;
-    /**
-     * Отображение иконки успеха
-     */
-    success?: boolean;
-    /**
-     * Текст подсказки
-     */
-    hint?: ReactNode;
-    /**
-     * Лейбл компонента
-     */
-    label?: React.ReactNode;
-    /**
-     * Вид лейбла внутри / снаружи
-     */
-    labelView?: "inner" | "outer";
-    /**
-     * Атрибут type
-     */
-    type?: "number" | "card" | "email" | "money" | "password" | "tel" | "text";
-    /**
-     * Ref для обертки input
-     */
-    wrapperRef?: React.Ref<HTMLDivElement>;
-    /**
-     * Слот слева
-     */
-    leftAddons?: React.ReactNode;
-    /**
-     * Слот справа
-     */
-    rightAddons?: React.ReactNode;
-    /**
-     * Слот под инпутом
-     */
-    bottomAddons?: React.ReactNode;
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Дополнительный класс для поля
-     */
-    fieldClassName?: string;
-    /**
-     * Дополнительный класс инпута
-     */
-    inputClassName?: string;
-    /**
-     * Дополнительный класс для лейбла
-     */
-    labelClassName?: string;
-    /**
-     * Дополнительный класс для аддонов
-     */
-    addonsClassName?: string;
-    /**
-     * Класс, который будет установлен при фокусе
-     */
-    focusedClassName?: string;
-    /**
-     * Класс, который будет установлен, если в поле есть значение
-     */
-    filledClassName?: string;
-    /**
-     * Обработчик поля ввода
-     */
-    onChange?: (event: ChangeEvent<HTMLInputElement>, payload: {
-        value: string;
-    }) => void;
-    /**
-     * Обработчик нажатия на кнопку очистки
-     */
-    onClear?: (event: MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * Обработчик клика по полю
-     */
-    onClick?: (event: MouseEvent<HTMLDivElement>) => void;
-    /**
-     * Обработчик MouseDown по полю
-     */
-    onMouseDown?: (event: MouseEvent<HTMLDivElement>) => void;
-    /**
-     * Обработчик MouseUp по полю
-     */
-    onMouseUp?: (event: MouseEvent<HTMLDivElement>) => void;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-};
+import { InputProps } from "@alfalab/core-components-input";
 type NumberInputProps = Omit<InputProps, 'value' | 'onChange' | 'type'> & {
     /**
      * Значение поля ввода
@@ -164,7 +44,7 @@ declare const NumberInput: React.ForwardRefExoticComponent<Omit<InputProps, "typ
     /**
      * Разделитель ',' или '.'
      */
-    separator?: "." | "," | undefined;
+    separator?: "," | "." | undefined;
     /**
      * Количество символов после разделителя
      */

package/Component.js

@@ -1,55 +1,18 @@
 'use strict';
 
+var tslib = require('tslib');
 var React = require('react');
 var mergeRefs = require('react-merge-refs');
-var coreComponentsMaskedInput = require('@alfalab/core-components-masked-input');
+var coreComponentsInput = require('@alfalab/core-components-input');
+var utils = require('./utils.js');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-var __assign = function () {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s)
-                if (Object.prototype.hasOwnProperty.call(s, p))
-                    t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-function __rest(s, e) {
-    var t = {};
-    for (var p in s)
-        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-            t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-}
-
 var NumberInput = React__default.default.forwardRef(function (_a, ref) {
-    var propValue = _a.value, onChange = _a.onChange, onBlur = _a.onBlur, _b = _a.allowSigns, allowSigns = _b === void 0 ? true : _b, _c = _a.separator, separator = _c === void 0 ? ',' : _c, fractionLength = _a.fractionLength, defaultValue = _a.defaultValue, restProps = __rest(_a, ["value", "onChange", "onBlur", "allowSigns", "separator", "fractionLength", "defaultValue"]);
+    var propValue = _a.value, onChange = _a.onChange, onBlur = _a.onBlur, _b = _a.allowSigns, allowSigns = _b === void 0 ? true : _b, _c = _a.separator, separator = _c === void 0 ? ',' : _c, fractionLength = _a.fractionLength, defaultValue = _a.defaultValue, restProps = tslib.__rest(_a, ["value", "onChange", "onBlur", "allowSigns", "separator", "fractionLength", "defaultValue"]);
     var uncontrolled = propValue === undefined;
     var inputRef = React.useRef(null);
     var _d = React.useState(defaultValue || ''), value = _d[0], setValue = _d[1];
@@ -59,72 +22,59 @@ var NumberInput = React__default.default.forwardRef(function (_a, ref) {
         }
         return parseFloat(valueString);
     };
-    var handleChange = function (event, payload) {
-        var input = event.target;
-        var positionСursor = input.selectionStart || 0;
-        if (input.value[positionСursor] === separator) {
-            var index = input.selectionStart + 1;
-            input.selectionStart = index;
-        }
-        if (onChange) {
-            onChange(event, {
-                value: getNumberValueFromStr(input.value),
-                valueString: input.value,
-            });
-        }
-        if (uncontrolled) {
-            setValue(payload.value);
+    var getNumberRegExp = function () {
+        var reStr = '[0-9]+';
+        if (fractionLength !== 0) {
+            reStr = "".concat(reStr, "[").concat(utils.SEPARATORS.map(function (s) { return "\\".concat(s); }).join(''), "]?[0-9]{0,").concat(fractionLength || Number.MAX_SAFE_INTEGER, "}");
         }
+        return new RegExp("^".concat(reStr, "$"));
     };
-    var formatSeparatorValue = function (separator, rawValue) {
-        var singsRegexp = /\W+/;
-        var sings = singsRegexp.exec(rawValue);
-        if (sings && sings[0] !== ',' && sings[0] !== '.') {
-            return rawValue.replace(sings[0], '');
-        }
-        var separatorRegexp = /\.|,/;
-        if (rawValue.length === 1 && separatorRegexp.test(rawValue))
-            return '';
-        if (separator === ',') {
-            return rawValue.replace('.', ',');
-        }
-        if (separator === '.') {
-            return rawValue.replace(',', '.');
+    var restoreCaret = function (target) {
+        var input = target;
+        var positionCursor = input.selectionStart || 0;
+        var isEndPosition = input.value.length === positionCursor;
+        var enteredSign = utils.SIGNS.some(function (s) { return s === input.value[positionCursor - 1]; });
+        var enteredSeparator = utils.SEPARATORS.filter(function (s) { return s !== separator; }).some(function (s) { return s === input.value[positionCursor - 1]; });
+        var shouldRestore = enteredSeparator || enteredSign;
+        if (!isEndPosition && shouldRestore) {
+            setTimeout(function () {
+                input.selectionStart = positionCursor;
+                input.selectionEnd = positionCursor;
+            });
         }
-        return rawValue;
     };
-    var handleBeforeDisplay = function (conformedValue, _a) {
-        var rawValue = _a.rawValue, previousConformedValue = _a.previousConformedValue;
-        var isTwoSign = rawValue.length - conformedValue.length >= 1;
-        var isOneSign = rawValue.length - conformedValue.length === 1;
-        var signRegexp = /\.|,/;
-        if (fractionLength === 0 && signRegexp.test(rawValue)) {
-            return previousConformedValue;
-        }
-        var zeroRegexp = /^[+|-]?00+$/;
-        if (zeroRegexp.test(rawValue)) {
-            var index = rawValue.search(/[+|-]/) !== -1 ? 2 : 1;
-            return rawValue.slice(0, index);
-        }
-        if (isTwoSign && previousConformedValue) {
-            if (rawValue.length !== conformedValue.length && fractionLength) {
-                var valueLength = conformedValue.length - fractionLength;
-                var sign = separator === ',' ? '.' : ',';
-                if (rawValue.indexOf(sign) !== valueLength &&
-                    rawValue.indexOf(sign) !== conformedValue.length) {
-                    return previousConformedValue;
-                }
+    var handleChange = function (event) {
+        var input = event.target;
+        var numberRe = getNumberRegExp();
+        var testedValue = allowSigns && utils.SIGNS.some(function (s) { return s === input.value[0]; })
+            ? input.value.slice(1)
+            : input.value;
+        if (testedValue === '' || numberRe.test(testedValue)) {
+            var newValue = input.value.replace(utils.createSeparatorsRegExp(), separator);
+            if (onChange) {
+                onChange(event, {
+                    value: getNumberValueFromStr(newValue),
+                    valueString: newValue,
+                });
             }
-            var hasSign = conformedValue.includes(separator);
-            if (!hasSign && isOneSign) {
-                return formatSeparatorValue(separator, rawValue);
+            if (uncontrolled) {
+                setValue(newValue);
             }
-            return previousConformedValue;
+            restoreCaret(input);
         }
-        if (isOneSign && !uncontrolled) {
-            return formatSeparatorValue(separator, rawValue);
+    };
+    var handleKeyDown = function (event) {
+        var disallowedSymbols = /[/|?!@#$%^&*()_=A-Za-zА-Яа-яЁё ]/;
+        var oneKeyPress = !event.altKey && !event.metaKey && !event.ctrlKey && !event.shiftKey;
+        // Запрещаем вводить неразрешенные символы за исключением комбинций клавиш
+        if (oneKeyPress && event.key.length === 1 && disallowedSymbols.test(event.key)) {
+            event.preventDefault();
+        }
+        // Запрещаем вводить второй сепаратор
+        if (utils.SEPARATORS.some(function (s) { return s === event.key; }) &&
+            (event.target.value.match(utils.createSeparatorsRegExp()) || []).length) {
+            event.preventDefault();
         }
-        return conformedValue;
     };
     var handleBlur = function (event) {
         var valueBlur = event.target.value.replace(new RegExp("\\".concat(separator, "$")), '');
@@ -140,25 +90,8 @@ var NumberInput = React__default.default.forwardRef(function (_a, ref) {
         if (onBlur)
             onBlur(event);
     };
-    var handleMask = function (valueInput) {
-        var mask = allowSigns ? [/[+-\d]/] : [/\d/];
-        if (valueInput.length <= 1)
-            return mask;
-        mask.push.apply(mask, Array(valueInput.length - 1).fill(/\d/));
-        var dotIndex = valueInput.indexOf(separator);
-        var signRegexp = new RegExp("[\\d".concat(separator, "]"));
-        var startWithDigit = signRegexp.test(valueInput[0]);
-        if (dotIndex > (startWithDigit ? 0 : 1)) {
-            mask[dotIndex] = signRegexp;
-        }
-        if (fractionLength && dotIndex !== -1) {
-            var endMaskLength = dotIndex + fractionLength + 1;
-            mask = mask.slice(0, endMaskLength);
-        }
-        return mask;
-    };
     var visibleValue = uncontrolled ? value : propValue === null || propValue === void 0 ? void 0 : propValue.toString();
-    return (React__default.default.createElement(coreComponentsMaskedInput.MaskedInput, __assign({ ref: mergeRefs__default.default([ref, inputRef]), mask: handleMask, value: visibleValue, onBlur: handleBlur, onChange: handleChange, inputMode: 'decimal', onBeforeDisplay: handleBeforeDisplay }, restProps)));
+    return (React__default.default.createElement(coreComponentsInput.Input, tslib.__assign({ ref: mergeRefs__default.default([ref, inputRef]), value: visibleValue, onBlur: handleBlur, onChange: handleChange, onKeyDown: handleKeyDown, inputMode: 'decimal' }, restProps)));
 });
 
 exports.NumberInput = NumberInput;

package/cssm/Component.d.ts

@@ -1,126 +1,6 @@
 /// <reference types="react" />
 import React from 'react';
-import { ChangeEvent, InputHTMLAttributes, MouseEvent, ReactNode } from "react";
-type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type" | "value" | "defaultValue" | "onChange" | "onClick" | "onMouseDown" | "enterKeyHint"> & {
-    /**
-     * Значение поля ввода
-     */
-    value?: string;
-    /**
-     * Начальное значение поля
-     */
-    defaultValue?: string;
-    /**
-     * Растягивает компонент на ширину контейнера
-     */
-    block?: boolean;
-    /**
-     * Крестик для очистки поля
-     */
-    clear?: boolean;
-    /**
-     * Размер компонента
-     */
-    size?: "s" | "m" | "l" | "xl";
-    /**
-     * Набор цветов для компонента
-     */
-    colors?: "default" | "inverted";
-    /**
-     * Отображение ошибки
-     */
-    error?: ReactNode | boolean;
-    /**
-     * Отображение иконки успеха
-     */
-    success?: boolean;
-    /**
-     * Текст подсказки
-     */
-    hint?: ReactNode;
-    /**
-     * Лейбл компонента
-     */
-    label?: React.ReactNode;
-    /**
-     * Вид лейбла внутри / снаружи
-     */
-    labelView?: "inner" | "outer";
-    /**
-     * Атрибут type
-     */
-    type?: "number" | "card" | "email" | "money" | "password" | "tel" | "text";
-    /**
-     * Ref для обертки input
-     */
-    wrapperRef?: React.Ref<HTMLDivElement>;
-    /**
-     * Слот слева
-     */
-    leftAddons?: React.ReactNode;
-    /**
-     * Слот справа
-     */
-    rightAddons?: React.ReactNode;
-    /**
-     * Слот под инпутом
-     */
-    bottomAddons?: React.ReactNode;
-    /**
-     * Дополнительный класс
-     */
-    className?: string;
-    /**
-     * Дополнительный класс для поля
-     */
-    fieldClassName?: string;
-    /**
-     * Дополнительный класс инпута
-     */
-    inputClassName?: string;
-    /**
-     * Дополнительный класс для лейбла
-     */
-    labelClassName?: string;
-    /**
-     * Дополнительный класс для аддонов
-     */
-    addonsClassName?: string;
-    /**
-     * Класс, который будет установлен при фокусе
-     */
-    focusedClassName?: string;
-    /**
-     * Класс, который будет установлен, если в поле есть значение
-     */
-    filledClassName?: string;
-    /**
-     * Обработчик поля ввода
-     */
-    onChange?: (event: ChangeEvent<HTMLInputElement>, payload: {
-        value: string;
-    }) => void;
-    /**
-     * Обработчик нажатия на кнопку очистки
-     */
-    onClear?: (event: MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * Обработчик клика по полю
-     */
-    onClick?: (event: MouseEvent<HTMLDivElement>) => void;
-    /**
-     * Обработчик MouseDown по полю
-     */
-    onMouseDown?: (event: MouseEvent<HTMLDivElement>) => void;
-    /**
-     * Обработчик MouseUp по полю
-     */
-    onMouseUp?: (event: MouseEvent<HTMLDivElement>) => void;
-    /**
-     * Идентификатор для систем автоматизированного тестирования
-     */
-    dataTestId?: string;
-};
+import { InputProps } from "@alfalab/core-components-input";
 type NumberInputProps = Omit<InputProps, 'value' | 'onChange' | 'type'> & {
     /**
      * Значение поля ввода
@@ -164,7 +44,7 @@ declare const NumberInput: React.ForwardRefExoticComponent<Omit<InputProps, "typ
     /**
      * Разделитель ',' или '.'
      */
-    separator?: "." | "," | undefined;
+    separator?: "," | "." | undefined;
     /**
      * Количество символов после разделителя
      */