@cloud-ru/uikit-product-fields-predefined 2.4.3 → 2.4.4-preview-347b88f7.0

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

@@ -0,0 +1,60 @@
+var __rest = (this && this.__rest) || function (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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import cn from 'classnames';
+import { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
+import { FieldDecorator, FieldText } from '@snack-uikit/fields';
+import { useCodeInput, useCodeInputEffects, useFocusFields } from './hooks';
+import styles from './styles.module.css';
+import { getValidationState, ZERO_WIDTH_SPACE } from './utils';
+export const FieldCode = forwardRef(function FieldCode(_a, ref) {
+    var { codeLength, className, showEmptyChars, incorrectCodeState, loading, onChange: onChangeProp, onComplete, withoutFocus, value: valueProp, fieldClassName, withoutErrorFocus = false, size = 'l', spacing } = _a, decoratorProps = __rest(_a, ["codeLength", "className", "showEmptyChars", "incorrectCodeState", "loading", "onChange", "onComplete", "withoutFocus", "value", "fieldClassName", "withoutErrorFocus", "size", "spacing"]);
+    const inputsRef = useRef([]);
+    const moveFocus = useFocusFields({ inputsRef, codeLength });
+    const { code, setCode, buildCodeArray, handleInputChange, handleKeyDown, handlePaste } = useCodeInput({
+        codeLength,
+        value: valueProp,
+        onChange: onChangeProp,
+        onComplete,
+        moveFocus,
+    });
+    const blurFields = () => {
+        inputsRef.current.forEach(input => input === null || input === void 0 ? void 0 : input.blur());
+    };
+    useImperativeHandle(ref, () => ({
+        blur: blurFields,
+    }));
+    useCodeInputEffects({
+        codeLength,
+        code,
+        valueProp,
+        loading,
+        incorrectCodeState,
+        showEmptyChars,
+        withoutFocus,
+        withoutErrorFocus,
+        buildCodeArray,
+        setCode,
+        onChange: onChangeProp,
+        moveFocus,
+        inputsRef,
+    });
+    const resolvedDecoratorProps = Object.assign(Object.assign({}, decoratorProps), { size });
+    // Определяем индексы полей, после которых нужен отступ (0-based индексы)
+    const spacingIndices = useMemo(() => {
+        if (!spacing || spacing.length === 0) {
+            return new Set();
+        }
+        return new Set(spacing.filter(pos => pos >= 0 && pos < codeLength - 1));
+    }, [spacing, codeLength]);
+    return (_jsx(FieldDecorator, Object.assign({}, resolvedDecoratorProps, { className: className, children: _jsx("div", { className: styles.codeContainer, "data-size": size, children: code.map((char, index) => (_jsx(FieldText, { inputMode: 'numeric', autoComplete: 'one-time-code', className: cn(styles.codeInput, spacingIndices.has(index) && styles.codeInputWithSpacing, fieldClassName), "data-size": size, showClearButton: false, value: char === ZERO_WIDTH_SPACE ? '' : char, validationState: getValidationState({ char, incorrectCodeState, showEmptyChars }), ref: ref => (inputsRef.current[index] = ref), onKeyDown: e => handleKeyDown(e, index), onChange: code => handleInputChange(code, index), onPaste: e => handlePaste({ e }), size: resolvedDecoratorProps.size, disabled: resolvedDecoratorProps.disabled, readonly: resolvedDecoratorProps.readonly }, index))) }) })));
+});

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

@@ -0,0 +1,4 @@
+export * from './useCodeInput';
+export * from './useCodeInputEffects';
+export * from './useFocusFields';
+export * from './useStateWithRef';

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

@@ -0,0 +1,4 @@
+export * from './useCodeInput';
+export * from './useCodeInputEffects';
+export * from './useFocusFields';
+export * from './useStateWithRef';

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

@@ -0,0 +1,21 @@
+import { ClipboardEvent, KeyboardEvent } from 'react';
+type UseCodeInputParams = {
+    codeLength: number;
+    value?: string;
+    onChange?: (code: string) => void;
+    onComplete?: (code: string) => void;
+    moveFocus: (index: number) => void;
+};
+export declare function useCodeInput({ codeLength, value: valueProp, onChange: onChangeProp, onComplete, moveFocus, }: UseCodeInputParams): {
+    code: string[];
+    setCode: (newValue: string[] | ((prevValue: string[]) => string[])) => void;
+    codeRef: import("react").MutableRefObject<string[]>;
+    buildCodeArray: (str: string) => string[];
+    handleInputChange: (char: string, index: number) => void;
+    handleKeyDown: ({ key }: KeyboardEvent<HTMLInputElement>, index: number) => void;
+    handlePaste: ({ e, fullCode }: {
+        e?: ClipboardEvent<HTMLInputElement>;
+        fullCode?: string;
+    }) => void;
+};
+export {};

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

@@ -0,0 +1,126 @@
+import { useCallback, useRef } from 'react';
+import { useValueControl } from '@snack-uikit/utils';
+import { generateRangeWithStep, getCleanValue, getPaddedValue, isNumberChar, isOutsideAutoComplete, isStringCodeLength, isZeroWidthSpace, } from '../utils';
+import { useStateWithRef } from './useStateWithRef';
+export function useCodeInput({ codeLength, value: valueProp, onChange: onChangeProp, onComplete, moveFocus, }) {
+    const buildCodeArray = useCallback((str) => Array.from({ length: codeLength }, (_, idx) => { var _a; return (_a = str[idx]) !== null && _a !== void 0 ? _a : ''; }), [codeLength]);
+    const [value = '', onChange] = useValueControl({
+        value: valueProp,
+        onChange: onChangeProp,
+        defaultValue: '',
+    });
+    const [code, setCode, codeRef] = useStateWithRef(buildCodeArray(value));
+    const pasteFlag = useRef(false);
+    const keyInputFlag = useRef(false);
+    const updateCode = useCallback((index, newChar) => {
+        const updatedCode = [...codeRef.current];
+        updatedCode[index] = newChar;
+        setCode(updatedCode);
+        const normalizedCode = getPaddedValue(updatedCode).join('');
+        onChange === null || onChange === void 0 ? void 0 : onChange(normalizedCode);
+        return updatedCode;
+    }, [codeRef, setCode, onChange]);
+    const handleAutoComplete = useCallback((char, charIndex) => {
+        for (const idx of generateRangeWithStep(1, charIndex)) {
+            updateCode(idx - 1, codeRef.current[idx]);
+        }
+        updateCode(charIndex, char);
+        const updatedCode = codeRef.current.join('');
+        if (isStringCodeLength(updatedCode, codeLength)) {
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete(updatedCode);
+        }
+    }, [codeLength, codeRef, onComplete, updateCode]);
+    const handlePaste = useCallback(({ e, fullCode }) => {
+        var _a;
+        if (e) {
+            pasteFlag.current = true;
+        }
+        const codeInput = (_a = (fullCode || (e === null || e === void 0 ? void 0 : e.clipboardData.getData('text')))) !== null && _a !== void 0 ? _a : '';
+        if (!isStringCodeLength(codeInput, codeLength)) {
+            return;
+        }
+        const codeArray = codeInput.split('');
+        setCode(codeArray);
+        onChange === null || onChange === void 0 ? void 0 : onChange(codeInput);
+        onComplete === null || onComplete === void 0 ? void 0 : onComplete(codeInput);
+        moveFocus(codeLength - 1);
+    }, [codeLength, moveFocus, onChange, onComplete, setCode]);
+    const deleteChar = useCallback((index) => {
+        if (codeRef.current[index] && !isZeroWidthSpace(codeRef.current[index])) {
+            updateCode(index, '');
+        }
+        else if (index > 0) {
+            moveFocus(index - 1);
+        }
+    }, [codeRef, moveFocus, updateCode]);
+    const handleInputChange = useCallback((char, index) => {
+        var _a;
+        if (pasteFlag.current || keyInputFlag.current) {
+            pasteFlag.current = false;
+            keyInputFlag.current = false;
+            return;
+        }
+        if (isStringCodeLength(char, codeLength)) {
+            handlePaste({ fullCode: char });
+            return;
+        }
+        // autocomplete если фокус был не на первой ячейке
+        if (isOutsideAutoComplete(char, index, codeRef.current)) {
+            handleAutoComplete((_a = char.at(-1)) !== null && _a !== void 0 ? _a : '', index);
+            return;
+        }
+        let lastChar = char;
+        if (char.length > 1) {
+            const prev = codeRef.current[index];
+            const candidates = Array.from(char);
+            const found = candidates.find(c => c !== prev && isNumberChar(c));
+            const newDigit = found !== null && found !== void 0 ? found : candidates[candidates.length - 1];
+            lastChar = isNumberChar(newDigit) ? newDigit : '';
+        }
+        if (char === '') {
+            deleteChar(index);
+            return;
+        }
+        if (!isNumberChar(lastChar)) {
+            return;
+        }
+        const updated = updateCode(index, lastChar);
+        const cleaned = getCleanValue(updated).join('');
+        const isLastInput = index === codeLength - 1;
+        const isAllInputsFilled = isStringCodeLength(cleaned, codeLength);
+        if (!isLastInput) {
+            moveFocus(index + 1);
+        }
+        else if (isAllInputsFilled) {
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete(cleaned);
+        }
+    }, [codeLength, codeRef, deleteChar, handleAutoComplete, handlePaste, moveFocus, onComplete, updateCode]);
+    const handleKeyDown = useCallback(({ key }, index) => {
+        switch (key) {
+            case 'ArrowLeft':
+                moveFocus(index - 1);
+                break;
+            case 'ArrowRight':
+                moveFocus(index + 1);
+                break;
+            case 'Backspace':
+                deleteChar(index);
+                break;
+            default:
+                if (isNumberChar(key)) {
+                    handleInputChange(key, index);
+                    keyInputFlag.current = true;
+                }
+                break;
+        }
+    }, [deleteChar, handleInputChange, moveFocus]);
+    return {
+        code,
+        setCode,
+        codeRef,
+        buildCodeArray,
+        handleInputChange,
+        handleKeyDown,
+        handlePaste,
+    };
+}

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

@@ -0,0 +1,17 @@
+type UseCodeInputEffectsParams = {
+    codeLength: number;
+    code: string[];
+    valueProp?: string;
+    loading?: boolean;
+    incorrectCodeState?: boolean;
+    showEmptyChars?: boolean;
+    withoutFocus?: boolean;
+    withoutErrorFocus?: boolean;
+    buildCodeArray: (str: string) => string[];
+    setCode: (code: string[]) => void;
+    onChange?: (code: string) => void;
+    moveFocus: (index: number) => void;
+    inputsRef: React.MutableRefObject<(HTMLInputElement | null)[]>;
+};
+export declare function useCodeInputEffects({ codeLength, code, valueProp, loading, incorrectCodeState, showEmptyChars, withoutFocus, withoutErrorFocus, buildCodeArray, setCode, onChange, moveFocus, inputsRef, }: UseCodeInputEffectsParams): void;
+export {};

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

@@ -0,0 +1,59 @@
+import { useCallback, useEffect } from 'react';
+import { getCleanValue, ZERO_WIDTH_SPACE } from '../utils';
+export function useCodeInputEffects({ codeLength, code, valueProp, loading, incorrectCodeState, showEmptyChars, withoutFocus, withoutErrorFocus, buildCodeArray, setCode, onChange, moveFocus, inputsRef, }) {
+    const blurFields = useCallback(() => {
+        inputsRef.current.forEach(input => input === null || input === void 0 ? void 0 : input.blur());
+    }, [inputsRef]);
+    // Фокус при загрузке
+    useEffect(() => {
+        if (withoutFocus || loading)
+            return;
+        requestAnimationFrame(() => {
+            moveFocus(0);
+        });
+    }, [loading, moveFocus, withoutFocus]);
+    // Фокус при ошибке (если withoutErrorFocus = false)
+    useEffect(() => {
+        var _a;
+        if (withoutErrorFocus)
+            return;
+        if (showEmptyChars) {
+            const idx = getCleanValue(code).findIndex(c => c === '');
+            const focusIndex = idx >= 0 ? idx : codeLength - 1;
+            (_a = inputsRef.current[focusIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [code, codeLength, incorrectCodeState, showEmptyChars, withoutErrorFocus, inputsRef]);
+    // Фокус при ошибке (если withoutErrorFocus = true)
+    useEffect(() => {
+        var _a;
+        if (incorrectCodeState) {
+            (_a = inputsRef.current[0]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [incorrectCodeState, inputsRef]);
+    // Блюр при ошибке (если withoutErrorFocus = true)
+    useEffect(() => {
+        if (!withoutErrorFocus)
+            return;
+        if (incorrectCodeState || showEmptyChars) {
+            blurFields();
+        }
+    }, [incorrectCodeState, showEmptyChars, withoutErrorFocus, blurFields]);
+    // Сброс кода при изменении длины
+    useEffect(() => {
+        setCode(Array(codeLength).fill(''));
+    }, [codeLength, setCode]);
+    // Обновление кода при изменении valueProp (только если valueProp не пустой)
+    useEffect(() => {
+        if (valueProp === null || valueProp === void 0 ? void 0 : valueProp.length) {
+            setCode(buildCodeArray(valueProp));
+        }
+    }, [buildCodeArray, setCode, valueProp]);
+    // Сброс кода при очистке valueProp
+    useEffect(() => {
+        if (!(valueProp === null || valueProp === void 0 ? void 0 : valueProp.length)) {
+            setCode(Array(codeLength).fill(''));
+            onChange === null || onChange === void 0 ? void 0 : onChange(ZERO_WIDTH_SPACE.repeat(codeLength));
+            moveFocus(0);
+        }
+    }, [valueProp, codeLength, moveFocus, setCode, onChange]);
+}

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

@@ -0,0 +1,7 @@
+import { MutableRefObject } from 'react';
+type UseFocusFields = {
+    inputsRef: MutableRefObject<(HTMLInputElement | null)[]>;
+    codeLength: number;
+};
+export declare function useFocusFields({ inputsRef, codeLength }: UseFocusFields): (newIndex: number) => void;
+export {};

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

@@ -0,0 +1,13 @@
+import { useCallback } from 'react';
+export function useFocusFields({ inputsRef, codeLength }) {
+    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]);
+    return moveFocus;
+}

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

@@ -0,0 +1,2 @@
+import { MutableRefObject } from 'react';
+export declare function useStateWithRef<T>(initialValue: T): [T, (newValue: T | ((prevValue: T) => T)) => void, MutableRefObject<T>];

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

@@ -0,0 +1,18 @@
+import { useCallback, useRef, useState } from 'react';
+export function useStateWithRef(initialValue) {
+    const [state, setState] = useState(initialValue);
+    const ref = useRef(state);
+    const setStateAndRef = useCallback((newValue) => {
+        if (typeof newValue === 'function') {
+            const updater = newValue;
+            const updatedValue = updater(ref.current);
+            setState(updatedValue);
+            ref.current = updatedValue;
+        }
+        else {
+            setState(newValue);
+            ref.current = newValue;
+        }
+    }, []);
+    return [state, setStateAndRef, ref];
+}

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

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

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

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

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

@@ -0,0 +1,42 @@
+.codeContainer{
+  display:flex;
+  justify-content:center;
+}
+.codeContainer[data-size=s]{
+  gap:6px;
+}
+.codeContainer[data-size=m]{
+  gap:8px;
+}
+.codeContainer[data-size=l]{
+  gap:12px;
+}
+
+.codeInputWithSpacing[data-size=s]{
+  margin-right:2px;
+}
+.codeInputWithSpacing[data-size=m]{
+  margin-right:8px;
+}
+.codeInputWithSpacing[data-size=l]{
+  margin-right:12px;
+}
+
+.codeInput{
+  width:100%;
+}
+.codeInput input{
+  text-align:center;
+}
+.codeInput input[data-size=s]{
+  font-size:16px;
+  line-height:22px;
+}
+.codeInput input[data-size=m]{
+  font-size:18px;
+  line-height:26px;
+}
+.codeInput input[data-size=l]{
+  font-size:20px;
+  line-height:28px;
+}

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

@@ -0,0 +1,13 @@
+export declare const ZERO_WIDTH_SPACE = "\u200B";
+export declare const getValidationState: ({ char, incorrectCodeState, showEmptyChars, }: {
+    char: string;
+    incorrectCodeState?: boolean;
+    showEmptyChars?: boolean;
+}) => "error" | "default";
+export declare const isNumberChar: (char: string) => boolean;
+export declare const isStringCodeLength: (input: string, codeLength: number) => boolean;
+export declare const isOutsideAutoComplete: (input: string, index: number, code: string[]) => boolean;
+export declare const getPaddedValue: (value: string[]) => string[];
+export declare const getCleanValue: (value: string[]) => string[];
+export declare const isZeroWidthSpace: (value: string) => value is "​";
+export declare const generateRangeWithStep: (start: number, end: number) => number[];

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

@@ -0,0 +1,22 @@
+export const ZERO_WIDTH_SPACE = '\u200B';
+export const getValidationState = ({ char, incorrectCodeState, showEmptyChars, }) => {
+    if (incorrectCodeState) {
+        return 'error';
+    }
+    if (!showEmptyChars) {
+        return 'default';
+    }
+    return char && char !== ZERO_WIDTH_SPACE ? 'default' : 'error';
+};
+const isStringCode = (input) => new RegExp(`^\\d+$`).test(input);
+export const isNumberChar = (char) => /^\d$/.test(char);
+export const isStringCodeLength = (input, codeLength) => new RegExp(`^\\d{${codeLength}}$`).test(input);
+export const isOutsideAutoComplete = (input, index, code) => input.length > 1 && isStringCode(input) && input.at(0) === code.at(index);
+export const getPaddedValue = (value) => value.map(char => (char === '' ? ZERO_WIDTH_SPACE : char));
+export const getCleanValue = (value) => value.map(char => (char !== ZERO_WIDTH_SPACE ? char : ''));
+export const isZeroWidthSpace = (value) => value === ZERO_WIDTH_SPACE;
+export const generateRangeWithStep = (start, end) => {
+    const step = start <= end ? 1 : -1;
+    const length = Math.abs(end - start) + 1;
+    return Array.from({ length }, (_, i) => start + i * step);
+};

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

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

package/dist/esm/components/index.js

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