@cloud-ru/uikit-product-fields-predefined 3.0.0 → 3.0.1-preview-d01a0cca.0

package/dist/esm/components/FieldCode/hooks/index.d.ts

@@ -0,0 +1,4 @@
+export * from './useCodeInput';
+export * from './useFieldCodeValidate';
+export * from './useFocusCell';
+export * from './useFieldHelpers';

package/dist/esm/components/FieldCode/hooks/index.js

@@ -0,0 +1,4 @@
+export * from './useCodeInput';
+export * from './useFieldCodeValidate';
+export * from './useFocusCell';
+export * from './useFieldHelpers';

package/dist/esm/components/FieldCode/hooks/useCodeInput.d.ts

@@ -0,0 +1,22 @@
+import { ClipboardEvent, KeyboardEvent } from 'react';
+export type UseCodeInputParams = {
+    /** Количество цифр в коде (ожидается целое ≥ 1) */
+    codeLength: number;
+    /** Значение кода */
+    value?: string;
+    /** Колбек изменения значения */
+    onChange?: (code: string) => void;
+    /** Функция фокуса */
+    moveFocus: (index: number) => void;
+    /** Колбек достижения ввода всех символов кода */
+    onComplete?: (code: string) => void;
+};
+export declare function useCodeInput(params: UseCodeInputParams): {
+    code: string[];
+    cellHandlers: {
+        onKeyDown: (e: KeyboardEvent<HTMLInputElement>, index: number) => void;
+        onPaste: (e: ClipboardEvent<HTMLInputElement>) => void;
+        onChange: (code: string, index: number) => void;
+    };
+    onChangeCode: (value: any, ...args: any[]) => any | void;
+};

package/dist/esm/components/FieldCode/hooks/useCodeInput.js

@@ -0,0 +1,95 @@
+import { useRefState } from '@siberiacancode/reactuse';
+import { useCallback, useEffect } from 'react';
+import { useValueControl } from '@snack-uikit/utils';
+import { ZERO_WIDTH_SPACE } from '../constants';
+import { isNumberChar, isStringCodeLength, isZeroWidthSpace } from '../utils';
+const buildCodeArray = (str, codeLength) => Array.from({ length: codeLength }, (_, idx) => str[idx] || ZERO_WIDTH_SPACE);
+export function useCodeInput(params) {
+    const { value: valueProp, onChange: onChangeProp, codeLength, moveFocus, onComplete } = params;
+    const [value = '', onChange] = useValueControl({
+        value: valueProp,
+        onChange: onChangeProp,
+        defaultValue: '',
+    });
+    const codeRef = useRefState(buildCodeArray(value, codeLength));
+    const updateCodeByIndex = useCallback((index, newChar) => {
+        codeRef.current[index] = newChar;
+        onChange === null || onChange === void 0 ? void 0 : onChange(codeRef.current.join(''));
+    }, [codeRef, onChange]);
+    const updateFullCode = useCallback((newCode) => {
+        codeRef.current = newCode.split('');
+        onChange === null || onChange === void 0 ? void 0 : onChange(newCode);
+        moveFocus(codeLength - 1);
+        onComplete === null || onComplete === void 0 ? void 0 : onComplete(newCode);
+    }, [codeLength, codeRef, moveFocus, onChange, onComplete]);
+    const handleAfterCellUpdate = useCallback((index) => {
+        const normalizedCode = codeRef.current.join('');
+        const isLastInput = index === codeLength - 1;
+        const isAllInputsFilled = isStringCodeLength(normalizedCode, codeLength);
+        if (!isLastInput) {
+            moveFocus(index + 1);
+        }
+        else if (isAllInputsFilled) {
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete(normalizedCode);
+        }
+    }, [codeLength, codeRef, moveFocus, onComplete]);
+    const deleteChar = useCallback((index) => {
+        if (codeRef.current[index] && !isZeroWidthSpace(codeRef.current[index])) {
+            updateCodeByIndex(index, ZERO_WIDTH_SPACE);
+        }
+        else if (index > 0) {
+            moveFocus(index - 1);
+        }
+    }, [codeRef, moveFocus, updateCodeByIndex]);
+    const onAutoCompleteInput = useCallback((code, index) => {
+        if (isStringCodeLength(code, codeLength)) {
+            updateFullCode(code);
+            return;
+        }
+        if (!isNumberChar(code)) {
+            return;
+        }
+        updateCodeByIndex(index, code);
+        handleAfterCellUpdate(index);
+    }, [codeLength, handleAfterCellUpdate, updateCodeByIndex, updateFullCode]);
+    const onKeyDown = useCallback((e, index) => {
+        switch (e.key) {
+            case 'ArrowLeft':
+                moveFocus(index - 1);
+                break;
+            case 'ArrowRight':
+                moveFocus(index + 1);
+                break;
+            case 'Backspace':
+                deleteChar(index);
+                break;
+            default:
+                if (isNumberChar(e.key)) {
+                    e.preventDefault();
+                    updateCodeByIndex(index, e.key);
+                    handleAfterCellUpdate(index);
+                }
+                break;
+        }
+    }, [deleteChar, handleAfterCellUpdate, moveFocus, updateCodeByIndex]);
+    const onPaste = useCallback((e) => {
+        var _a;
+        const codeInput = (_a = e === null || e === void 0 ? void 0 : e.clipboardData.getData('text')) !== null && _a !== void 0 ? _a : '';
+        if (!isStringCodeLength(codeInput, codeLength)) {
+            return;
+        }
+        updateFullCode(codeInput);
+    }, [codeLength, updateFullCode]);
+    useEffect(() => {
+        codeRef.current = buildCodeArray(value, codeLength);
+    }, [codeLength, codeRef, value]);
+    return {
+        code: codeRef.current,
+        cellHandlers: {
+            onKeyDown,
+            onPaste,
+            onChange: onAutoCompleteInput,
+        },
+        onChangeCode: onChange,
+    };
+}

package/dist/esm/components/FieldCode/hooks/useFieldCodeValidate.d.ts

@@ -0,0 +1,8 @@
+export type UseFieldCodeValidateParams = {
+    /** Ожидаемая длина кода (цифр) */
+    codeLength: number;
+};
+/**
+ * Возвращает функцию валидации значения кода (пусто / неполный код).
+ */
+export declare function useFieldCodeValidate(params: UseFieldCodeValidateParams): (value?: string | number) => string | undefined;

package/dist/esm/components/FieldCode/hooks/useFieldCodeValidate.js

@@ -0,0 +1,21 @@
+import { useCallback } from 'react';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { isNumberChar } from '../utils';
+/**
+ * Возвращает функцию валидации значения кода (пусто / неполный код).
+ */
+export function useFieldCodeValidate(params) {
+    const { codeLength } = params;
+    const { t } = useLocale('FieldsPredefined');
+    return useCallback((value) => {
+        const str = value != null ? String(value) : '';
+        const digits = str.split('').filter(isNumberChar).join('');
+        if (digits.length === 0) {
+            return t('FieldCode.required');
+        }
+        if (digits.length < codeLength) {
+            return t('FieldCode.minLength', { count: codeLength });
+        }
+        return undefined;
+    }, [codeLength, t]);
+}

package/dist/esm/components/FieldCode/hooks/useFieldHelpers.d.ts

@@ -0,0 +1,13 @@
+import { type FieldCodeFocusEffect } from '../constants';
+type UseFieldHelpersParams = {
+    onChangeCode: (code: string) => void;
+    moveFocus: (index: number) => void;
+    focusEffects: readonly FieldCodeFocusEffect[];
+    showEmptyChars?: boolean;
+    code: readonly string[];
+    codeLength: number;
+};
+export declare function useFieldHelpers(params: UseFieldHelpersParams): {
+    resetCode: () => void;
+};
+export {};

package/dist/esm/components/FieldCode/hooks/useFieldHelpers.js

@@ -0,0 +1,31 @@
+import { useCallback, useEffect, useMemo } from 'react';
+import { getFirstEmptyCellIndex } from '../utils';
+export function useFieldHelpers(params) {
+    const { onChangeCode, moveFocus, focusEffects: focusEffectsProp, showEmptyChars, code, codeLength } = params;
+    const focusEffectsKey = [...focusEffectsProp].sort().join(',');
+    const focusEffects = useMemo(() => [...focusEffectsProp], 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [focusEffectsKey]);
+    const resetCode = useCallback(() => {
+        onChangeCode('');
+        if (focusEffects.includes('firstCellOnReset')) {
+            moveFocus(0);
+        }
+    }, [focusEffects, moveFocus, onChangeCode]);
+    useEffect(() => {
+        if (focusEffects.includes('firstCellOnMount')) {
+            moveFocus(0);
+        }
+    }, [focusEffects, moveFocus]);
+    useEffect(() => {
+        if (!focusEffects.includes('firstCellWhenShowEmptyChars') || !showEmptyChars) {
+            return;
+        }
+        const emptyIndex = getFirstEmptyCellIndex(code);
+        if (emptyIndex >= 0) {
+            moveFocus(emptyIndex);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [showEmptyChars, focusEffects, moveFocus, codeLength]);
+    return { resetCode };
+}

package/dist/esm/components/FieldCode/hooks/useFocusCell.d.ts

@@ -0,0 +1,5 @@
+export declare function useFocusCell(codeLength: number): {
+    inputsRef: import("react").MutableRefObject<HTMLInputElement[]>;
+    moveFocus: (newIndex: number) => void;
+    blurFields: () => void;
+};

package/dist/esm/components/FieldCode/hooks/useFocusCell.js

@@ -0,0 +1,19 @@
+import { useCallback, useRef } from 'react';
+export function useFocusCell(codeLength) {
+    const inputsRef = useRef([]);
+    const focusInput = useCallback((index) => {
+        var _a;
+        (_a = inputsRef.current[index]) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [inputsRef]);
+    const moveFocus = useCallback((newIndex) => {
+        if (newIndex >= 0 && newIndex < codeLength) {
+            focusInput(newIndex);
+        }
+    }, [codeLength, focusInput]);
+    const blurFields = useCallback(() => {
+        inputsRef.current.forEach(input => {
+            input === null || input === void 0 ? void 0 : input.blur();
+        });
+    }, [inputsRef]);
+    return { inputsRef, moveFocus, blurFields };
+}

package/dist/esm/components/FieldCode/index.d.ts

@@ -0,0 +1,2 @@
+export * from './FieldCode';
+export { useFieldCodeValidate, type UseFieldCodeValidateParams } from './hooks/useFieldCodeValidate';

package/dist/esm/components/FieldCode/index.js

@@ -0,0 +1,2 @@
+export * from './FieldCode';
+export { useFieldCodeValidate } from './hooks/useFieldCodeValidate';

package/dist/esm/components/FieldCode/styles.module.css

@@ -0,0 +1,37 @@
+.fieldCode{
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  gap:8px;
+}
+.fieldCode[data-stretch-cells]{
+  width:100%;
+}
+
+.fieldDecorator{
+  width:unset;
+}
+
+.codeContainer{
+  display:flex;
+  justify-content:center;
+}
+.codeContainer[data-size=s]{
+  gap:8px;
+}
+.codeContainer[data-size=m]{
+  gap:8px;
+}
+.codeContainer[data-size=l]{
+  gap:12px;
+}
+
+.cellSpacing[data-size=s]{
+  margin-right:8px;
+}
+.cellSpacing[data-size=m]{
+  margin-right:8px;
+}
+.cellSpacing[data-size=l]{
+  margin-right:12px;
+}

package/dist/esm/components/FieldCode/utils.d.ts

@@ -0,0 +1,6 @@
+import { FieldTextProps } from '@snack-uikit/fields';
+export declare const isNumberChar: (char: string) => boolean;
+export declare const isStringCodeLength: (input: string, codeLength: number) => boolean;
+export declare const isZeroWidthSpace: (value: string) => value is "​";
+export declare function getFirstEmptyCellIndex(code: readonly string[]): number;
+export declare const getCellValidationState: (value: string, showEmptyChars?: boolean, error?: boolean) => FieldTextProps["validationState"];

package/dist/esm/components/FieldCode/utils.js

@@ -0,0 +1,13 @@
+import { ZERO_WIDTH_SPACE } from './constants';
+export const isNumberChar = (char) => /^\d$/.test(char);
+export const isStringCodeLength = (input, codeLength) => new RegExp(`^\\d{${codeLength}}$`).test(input);
+export const isZeroWidthSpace = (value) => value === ZERO_WIDTH_SPACE;
+export function getFirstEmptyCellIndex(code) {
+    return code.findIndex(isZeroWidthSpace);
+}
+export const getCellValidationState = (value, showEmptyChars, error) => {
+    if (showEmptyChars) {
+        return isZeroWidthSpace(value) ? 'error' : 'default';
+    }
+    return error ? 'error' : 'default';
+};

package/dist/esm/components/index.d.ts

@@ -5,3 +5,4 @@ export * from './AIDisclaimer';
 export * from './FieldName';
 export * from './FieldDescription';
 export * from './FieldMask';
+export * from './FieldCode';

package/dist/esm/components/index.js

@@ -5,3 +5,4 @@ export * from './AIDisclaimer';
 export * from './FieldName';
 export * from './FieldDescription';
 export * from './FieldMask';
+export * from './FieldCode';