@alfalab/core-components-number-input 1.3.0 → 2.0.1

package/src/components/number-input/Component.tsx

@@ -1,20 +1,52 @@
-import React, { ChangeEvent, FocusEvent, KeyboardEvent, useRef, useState } from 'react';
+import React, {
+    ChangeEvent,
+    FC,
+    FocusEvent,
+    forwardRef,
+    Ref,
+    useEffect,
+    useMemo,
+    useState,
+} from 'react';
 import mergeRefs from 'react-merge-refs';
+import { MaskitoOptions, maskitoTransform } from '@maskito/core';
+import { useMaskito } from '@maskito/react';
+import cn from 'classnames';
 
 import type { InputProps } from '@alfalab/core-components-input';
+import { fnUtils, os } from '@alfalab/core-components-shared';
+
+import {
+    createMaskOptions,
+    MAX_DIGITS,
+    MAX_SAFE_INTEGER,
+    MIN_SAFE_INTEGER,
+    MINUS_SIGN,
+    parseNumber,
+    stringifyNumberWithoutExp,
+} from '../../utils';
+import { Steppers } from '../steppers';
+
+import defaultColors from './default.module.css';
+import styles from './index.module.css';
+import invertedColors from './inverted.module.css';
+
+const colorStyles = {
+    default: defaultColors,
+    inverted: invertedColors,
+};
 
-import { createSeparatorsRegExp, getAllowedValue, SEPARATORS, SIGNS } from '../../utils';
-
-export type NumberInputProps = Omit<InputProps, 'value' | 'onChange' | 'type'> & {
+export interface NumberInputProps
+    extends Omit<InputProps, 'value' | 'onChange' | 'type' | 'defaultValue'> {
     /**
      * Значение поля ввода
      */
     value?: string | number | null;
 
     /**
-     * Учитывать знаки '+' и '-'
+     *  Значение по-умолчанию
      */
-    allowSigns?: boolean;
+    defaultValue?: string | number | null;
 
     /**
      * Разделитель ',' или '.'
@@ -23,178 +55,222 @@ export type NumberInputProps = Omit<InputProps, 'value' | 'onChange' | 'type'> &
 
     /**
      * Количество символов после разделителя
+     * Если указан проп step, то всегда 0
      */
     fractionLength?: number;
 
+    /**
+     *  Шаг инкремента/декремента. Используйте только целочисленные значения
+     */
+    step?: number;
+
+    /**
+     * Минимальное значение
+     * @default Number.MIN_SAFE_INTEGER
+     */
+    min?: number;
+
+    /**
+     * Максимальное значение
+     * @default Number.MAX_SAFE_INTEGER
+     */
+    max?: number;
+
+    /**
+     * Отображение компонента в мобильном или десктопном виде
+     */
+    view?: 'desktop' | 'mobile';
+
     /**
      *  Компонент инпута
      */
-    Input: React.FC<InputProps & { ref?: React.Ref<HTMLInputElement> }>;
+    Input: FC<InputProps & { ref?: Ref<HTMLInputElement> }>;
 
     /**
      * Обработчик события изменения значения
      */
-    onChange?: (
-        e: React.ChangeEvent<HTMLInputElement>,
-        payload: {
-            /**
-             * Числовое значение инпута
-             */
-            value: number | null;
-            /**
-             * Строковое значение инпута
-             * Используйте для изменения значения инпута
-             */
-            valueString: string;
-        },
-    ) => void;
-};
+    onChange?: (e: ChangeEvent<HTMLInputElement> | null, payload: { value: number | null }) => void;
+}
 
-export const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
+export const NumberInput = forwardRef<HTMLInputElement, NumberInputProps>(
     (
         {
             value: propValue,
             onChange,
-            onBlur,
-            allowSigns = true,
             separator = ',',
-            fractionLength,
+            fractionLength = MAX_DIGITS,
             defaultValue,
             Input,
+            min: minProp,
+            max: maxProp,
+            rightAddons,
+            dataTestId,
+            disabled,
+            onBlur,
+            onFocus,
+            view,
+            step: stepProp,
+            size = 's',
+            disableUserInput,
+            clear: clearProp,
+            colors = 'default',
             ...restProps
         },
         ref,
     ) => {
-        const uncontrolled = propValue === undefined;
-        const inputRef = useRef<HTMLInputElement>(null);
-        const [value, setValue] = useState<string>(defaultValue || '');
+        const min = Math.max(MIN_SAFE_INTEGER, minProp ?? MIN_SAFE_INTEGER);
+        const max = Math.min(MAX_SAFE_INTEGER, maxProp ?? MAX_SAFE_INTEGER);
+        const withStepper = stepProp !== undefined;
+
+        const maskOptions: MaskitoOptions = useMemo(
+            () =>
+                createMaskOptions({
+                    separator,
+                    fractionLength: withStepper ? 0 : fractionLength,
+                    min,
+                    max,
+                }),
+            [separator, fractionLength, min, max, withStepper],
+        );
 
-        const getNumberValueFromStr = (valueString: string) => {
-            if (valueString === '') return null;
+        const [focused, setFocused] = useState(false);
+        const [value, setValue] = useState(() => {
+            if (defaultValue == null) {
+                return withStepper ? fnUtils.clamp(0, min, max).toString() : '';
+            }
 
-            if (valueString.includes(',')) {
-                return parseFloat(valueString.replace(',', '.'));
+            return fnUtils
+                .clamp(
+                    parseNumber(maskitoTransform(defaultValue.toString(), maskOptions)),
+                    min,
+                    max,
+                )
+                .toString();
+        });
+
+        const maskRef = useMaskito({ options: maskOptions });
+
+        useEffect(() => {
+            if (propValue !== undefined) {
+                setValue((prev) => {
+                    const parsedNumber = parseNumber(propValue);
+
+                    if (parsedNumber !== parseNumber(prev)) {
+                        return maskitoTransform(
+                            stringifyNumberWithoutExp(parsedNumber),
+                            maskOptions,
+                        );
+                    }
+
+                    return prev;
+                });
             }
+        }, [maskOptions, propValue, separator]);
 
-            return parseFloat(valueString);
-        };
+        const getMaxLength = (valueString: string) => {
+            const hasSeparator = valueString?.includes(separator);
+            const hasSigns = valueString?.startsWith(MINUS_SIGN);
 
-        const restoreCaret = (target: HTMLInputElement) => {
-            setTimeout(() => {
-                const input = target;
-                const positionCursor = input.selectionStart || 0;
-                const isEndPosition = input.value.length === positionCursor;
+            return MAX_DIGITS + (hasSeparator ? 1 : 0) + (hasSigns ? 1 : 0);
+        };
 
-                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 getStep = () => Math.round(stepProp ?? 1);
 
-                const shouldRestore = enteredSeparator || enteredSign;
+        const changeValue = (
+            event: ChangeEvent<HTMLInputElement> | null,
+            newValue: number | null,
+        ) => {
+            const isNaNValue = Number.isNaN(newValue);
+            const valueString = event?.target.value ?? newValue?.toString() ?? '';
 
-                if (!isEndPosition && shouldRestore) {
-                    input.selectionStart = positionCursor;
-                    input.selectionEnd = positionCursor;
-                }
-            });
-        };
+            setValue(valueString);
 
-        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 (valueString === '' || !isNaNValue) {
+                onChange?.(event, {
+                    value: isNaNValue ? null : newValue,
                 });
             }
-
-            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 handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+            const valueString = event.target.value;
 
-            const hasSeparator = (val.match(createSeparatorsRegExp()) || []).length > 0;
+            changeValue(event, parseNumber(valueString));
+        };
 
-            // Запрещаем вводить второй сепаратор
-            if (hasSeparator && SEPARATORS.some((s) => s === event.key)) {
-                return event.preventDefault();
-            }
+        const handleIncrement = () => {
+            const parsed = parseNumber(value);
+            const nextValue = maskitoTransform(
+                (Number.isNaN(parsed) ? min : parsed + getStep()).toString(),
+                maskOptions,
+            );
 
-            // Запрещаем вводить лишний знак
-            if (
-                (!allowSigns || SIGNS.some((s) => s === val[0])) &&
-                SIGNS.some((s) => s === event.key)
-            ) {
-                return event.preventDefault();
-            }
+            changeValue(null, parseNumber(nextValue));
+        };
 
-            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();
-            }
+        const handleDecrement = () => {
+            const parsed = parseNumber(value);
+            const nextValue = maskitoTransform(
+                (Number.isNaN(parsed) ? max : parsed - getStep()).toString(),
+                maskOptions,
+            );
 
-            return undefined;
+            changeValue(null, parseNumber(nextValue));
         };
 
-        const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
-            const valueBlur = event.target.value.replace(new RegExp(`\\${separator}$`), '');
-
-            if (onChange) {
-                onChange(event, {
-                    value: getNumberValueFromStr(valueBlur),
-                    valueString: valueBlur,
-                });
-            }
+        const handleFocus = (e: FocusEvent<HTMLInputElement>) => {
+            onFocus?.(e);
 
-            if (uncontrolled) {
-                setValue(valueBlur);
+            if (!disableUserInput) {
+                setFocused(true);
             }
-
-            if (onBlur) onBlur(event);
         };
 
-        const visibleValue = uncontrolled ? value : propValue?.toString();
+        const handleBlur = (e: FocusEvent<HTMLInputElement>) => {
+            onBlur?.(e);
+            setFocused(false);
+        };
 
         return (
             <Input
-                ref={mergeRefs([ref, inputRef])}
-                value={visibleValue}
-                onBlur={handleBlur}
-                onChange={handleChange}
-                onKeyDown={handleKeyDown}
-                inputMode='decimal'
+                maxLength={getMaxLength(value)}
                 {...restProps}
+                // В iOS в цифровой клавиатуре невозможно ввести минус.
+                inputMode={min < 0 && os.isIOS() ? 'text' : 'decimal'}
+                ref={mergeRefs([ref, maskRef])}
+                value={value}
+                onInput={handleChange}
+                dataTestId={dataTestId}
+                colors={colors}
+                disabled={disabled}
+                onFocus={handleFocus}
+                onBlur={handleBlur}
+                size={size}
+                disableUserInput={disableUserInput}
+                clear={clearProp && /\d/.test(value)}
+                rightAddons={
+                    withStepper ? (
+                        <React.Fragment>
+                            {rightAddons}
+                            <Steppers
+                                colors={colors}
+                                dataTestId={dataTestId}
+                                disabled={disabled}
+                                value={parseNumber(value)}
+                                min={min}
+                                max={max}
+                                className={cn(colorStyles[colors].steppers, styles[size], {
+                                    [colorStyles[colors].steppersFocused]: focused,
+                                    [colorStyles[colors].steppersDisabled]: disabled,
+                                })}
+                                onIncrement={handleIncrement}
+                                onDecrement={handleDecrement}
+                            />
+                        </React.Fragment>
+                    ) : (
+                        rightAddons
+                    )
+                }
             />
         );
     },

package/src/components/number-input/default.module.css

@@ -0,0 +1,10 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.steppers {
+    background-color: var(--color-light-neutral-1500-inverted);
+}
+
+.steppersFocused,
+.steppersDisabled {
+    background-color: var(--color-light-neutral-translucent-200);
+}

package/src/components/number-input/index.module.css

@@ -0,0 +1,9 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.s {
+    margin-right: var(--gap-xs-neg);
+}
+
+.m {
+    margin-right: var(--gap-2xs-neg);
+}

package/src/components/number-input/inverted.module.css

@@ -0,0 +1,10 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.steppers {
+    background-color: var(--color-light-neutral-1500);
+}
+
+.steppersFocused,
+.steppersDisabled {
+    background-color: var(--color-light-neutral-translucent-300-inverted);
+}

package/src/components/steppers/Component.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import cn from 'classnames';
+
+import { IconButton } from '@alfalab/core-components-icon-button';
+import { getDataTestId } from '@alfalab/core-components-shared';
+import { MinusMIcon } from '@alfalab/icons-glyph/MinusMIcon';
+import { PlusMediumMIcon } from '@alfalab/icons-glyph/PlusMediumMIcon';
+
+import defaultColors from './default.module.css';
+import styles from './index.module.css';
+import invertedColors from './inverted.module.css';
+
+export type SteppersProps = {
+    value: number;
+    min: number;
+    max: number;
+    className?: string;
+    disabled?: boolean;
+    onIncrement: () => void;
+    onDecrement: () => void;
+    dataTestId?: string;
+    colors: 'default' | 'inverted';
+};
+
+const colorStyles = {
+    default: defaultColors,
+    inverted: invertedColors,
+};
+
+function preventDefault(e: React.MouseEvent<HTMLElement>) {
+    e.preventDefault();
+}
+
+export const Steppers: React.FC<SteppersProps> = ({
+    className,
+    onIncrement,
+    onDecrement,
+    value,
+    min,
+    max,
+    disabled,
+    dataTestId,
+    colors,
+}) => {
+    const decButtonDisabled = disabled || value <= min;
+    const incButtonDisabled = disabled || value >= max;
+
+    return (
+        <div className={cn(styles.component, className)}>
+            <IconButton
+                colors={colors}
+                disabled={decButtonDisabled}
+                className={styles.button}
+                icon={<MinusMIcon />}
+                aria-label='уменьшить'
+                onMouseDown={preventDefault}
+                onClick={onDecrement}
+                dataTestId={getDataTestId(dataTestId, 'decrement-button')}
+                view='secondary'
+            />
+            <div className={cn(styles.separator, colorStyles[colors].separator)} />
+            <IconButton
+                colors={colors}
+                disabled={incButtonDisabled}
+                className={styles.button}
+                icon={<PlusMediumMIcon />}
+                aria-label='увеличить'
+                onMouseDown={preventDefault}
+                onClick={onIncrement}
+                dataTestId={getDataTestId(dataTestId, 'increment-button')}
+                view='secondary'
+            />
+        </div>
+    );
+};

package/src/components/steppers/default.module.css

@@ -0,0 +1,5 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.separator {
+    background-color: var(--color-light-neutral-translucent-300);
+}

package/src/components/steppers/index.module.css

@@ -0,0 +1,20 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.component {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    border-radius: 5px;
+    transition: background-color 0.2s ease;
+    overflow: visible;
+}
+
+.separator {
+    height: 18px;
+    width: 1px;
+}
+
+.button {
+    width: 40px;
+    height: 40px;
+}

package/src/components/steppers/index.ts

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

package/src/components/steppers/inverted.module.css

@@ -0,0 +1,5 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+.separator {
+    background-color: var(--color-light-neutral-translucent-300-inverted);
+}