@cloud-ru/uikit-product-fields-predefined 2.4.8-preview-df188565.0 → 2.4.8-preview-611dfd0c.0

package/README.md

@@ -355,13 +355,15 @@
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| codeLength* | `number` | - | Количество цифр в коде |
+| codeLength* | `number` | - | Количество цифр в коде (ожидается целое ≥ 1) |
 | className | `string` | - | CSS-класс компонента |
 | cellClassName | `string` | - | CSS-класс ячейки кода |
 | spacing | `number[]` | - | Позиции, после которых нужно вставить пробел (индексы символов, после которых будет пробел) |
-| showEmptyChars | `boolean` | - | Подсветить пустые символы кода |
+| showEmptyChars | `boolean` | - | Подсветить пустые символы кода. Если не задано, совпадает с `validate`. |
 | resendCode | `ResendCodeProps` | - | Компонент отправки нового кода |
 | focusEffects | `readonly FieldCodeFocusEffect[]` | - | Сценарии автофокуса; по умолчанию — первая ячейка при монтировании и после сброса (см. `FieldCodeFocusEffect`) |
+| validate | `boolean` | - | Встроенная валидация: пустое значение и неполный код |
+| invalidCode | `boolean` | - | Показать сообщение «неверный код» (учитывается, если нет своего `error` и нет ошибки валидации) |
 | value | `string` | - | Значение кода |
 | onChange | `(code: string) => void` | - | Колбек изменения значения |
 | onComplete | `(code: string) => void` | - | Колбек достижения ввода всех символов кода |

package/dist/cjs/components/FieldCode/FieldCode.d.ts

@@ -10,33 +10,29 @@ export type FieldCodeRef = {
     /** Сбросить значение кода */
     resetCode: () => void;
 };
-export type FieldCodeProps = {
+/** Собственные пропсы `FieldCode` */
+export type FieldCodeOwnProps = {
     /** CSS-класс компонента */
     className?: string;
     /** CSS-класс ячейки кода */
     cellClassName?: string;
     /** Позиции, после которых нужно вставить пробел (индексы символов, после которых будет пробел) */
     spacing?: number[];
-    /** Подсветить пустые символы кода */
+    /**
+     * Подсветить пустые символы кода.
+     * Если не задано, совпадает с `validate`.
+     */
     showEmptyChars?: boolean;
     /** Компонент отправки нового кода */
     resendCode?: ResendCodeProps;
     /** Сценарии автофокуса; по умолчанию — первая ячейка при монтировании и после сброса (см. `FieldCodeFocusEffect`) */
     focusEffects?: readonly FieldCodeFocusEffect[];
-} & Omit<UseCodeInputParams, 'moveFocus'> & Pick<FieldDecoratorProps, 'size' | 'disabled' | 'label' | 'error' | 'data-test-id'>;
-export declare const FieldCode: import("react").ForwardRefExoticComponent<{
-    /** CSS-класс компонента */
-    className?: string;
-    /** CSS-класс ячейки кода */
-    cellClassName?: string;
-    /** Позиции, после которых нужно вставить пробел (индексы символов, после которых будет пробел) */
-    spacing?: number[];
-    /** Подсветить пустые символы кода */
-    showEmptyChars?: boolean;
-    /** Компонент отправки нового кода */
-    resendCode?: ResendCodeProps;
-    /** Сценарии автофокуса; по умолчанию — первая ячейка при монтировании и после сброса (см. `FieldCodeFocusEffect`) */
-    focusEffects?: readonly FieldCodeFocusEffect[];
-} & Omit<UseCodeInputParams, "moveFocus"> & Pick<FieldDecoratorProps, "size" | "label" | "error" | "disabled" | "data-test-id"> & import("react").RefAttributes<FieldCodeRef>>;
+    /** Встроенная валидация: пустое значение и неполный код */
+    validate?: boolean;
+    /** Показать сообщение «неверный код» (учитывается, если нет своего `error` и нет ошибки валидации) */
+    invalidCode?: boolean;
+};
+export type FieldCodeProps = FieldCodeOwnProps & Omit<UseCodeInputParams, 'moveFocus'> & Pick<FieldDecoratorProps, 'size' | 'disabled' | 'label' | 'error' | 'data-test-id'>;
+export declare const FieldCode: import("react").ForwardRefExoticComponent<FieldCodeOwnProps & Omit<UseCodeInputParams, "moveFocus"> & Pick<FieldDecoratorProps, "size" | "label" | "error" | "disabled" | "data-test-id"> & import("react").RefAttributes<FieldCodeRef>>;
 export type { FieldCodeFocusEffect } from './constants';
 export { FIELD_CODE_DEFAULT_FOCUS_EFFECTS } from './constants';

package/dist/cjs/components/FieldCode/FieldCode.js

@@ -15,7 +15,8 @@ const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 const utils_1 = require("./utils");
 exports.FieldCode = (0, react_1.forwardRef)(function FieldCode(props, ref) {
     var _a;
-    const { codeLength, className, cellClassName, value, onChange, spacing, onComplete, size, disabled, label, error, showEmptyChars, resendCode, focusEffects = constants_1.FIELD_CODE_DEFAULT_FOCUS_EFFECTS, 'data-test-id': dataTestId, } = props;
+    const { codeLength, className, cellClassName, value, onChange, spacing, onComplete, size, disabled, label, error, validate = false, invalidCode = false, showEmptyChars: showEmptyCharsProp, resendCode, focusEffects = constants_1.FIELD_CODE_DEFAULT_FOCUS_EFFECTS, 'data-test-id': dataTestId, } = props;
+    const showEmptyChars = showEmptyCharsProp !== null && showEmptyCharsProp !== void 0 ? showEmptyCharsProp : validate;
     const { inputsRef, moveFocus, blurFields } = (0, hooks_1.useFocusCell)(codeLength);
     const { code, cellHandlers, onChangeCode } = (0, hooks_1.useCodeInput)({ value, onChange, codeLength, moveFocus, onComplete });
     const { resetCode } = (0, hooks_1.useFieldHelpers)({
@@ -31,17 +32,24 @@ exports.FieldCode = (0, react_1.forwardRef)(function FieldCode(props, ref) {
         blurFields,
         resetCode,
     }), [moveFocus, blurFields, resetCode]);
+    const resolvedError = (0, hooks_1.useFieldCodeError)({
+        validate,
+        value,
+        codeLength,
+        invalidCode,
+        error,
+    });
     const resolvedDecoratorProps = {
         label,
         disabled,
         size,
-        error,
+        error: resolvedError,
     };
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, classnames_1.default)(styles_module_scss_1.default.fieldCode, className) }, (dataTestId ? { 'data-test-id': dataTestId } : undefined), { children: [(0, jsx_runtime_1.jsx)(fields_1.FieldDecorator, Object.assign({}, resolvedDecoratorProps, { children: (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.codeContainer, "data-size": size, children: code.map((char, index) => ((0, jsx_runtime_1.jsx)(components_1.Cell, { ref: inputRef => {
                             if (inputRef) {
                                 inputsRef.current[index] = inputRef;
                             }
-                        }, className: (0, classnames_1.default)((spacing === null || spacing === void 0 ? void 0 : spacing.includes(index)) && styles_module_scss_1.default.cellSpacing, cellClassName), size: size, value: char, disabled: disabled, autoComplete: index === 0 ? 'one-time-code' : undefined, onKeyDown: e => cellHandlers.onKeyDown(e, index), onPaste: cellHandlers.onPaste, onChange: e => cellHandlers.onChange(e, index), validationState: (0, utils_1.getCellValidationState)(char, showEmptyChars, Boolean(error)) }, index))) }) })), resendCode ? (0, jsx_runtime_1.jsx)(components_1.ResendCode, Object.assign({}, resendCode, { size: (_a = resendCode.size) !== null && _a !== void 0 ? _a : size })) : null] })));
+                        }, className: (0, classnames_1.default)((spacing === null || spacing === void 0 ? void 0 : spacing.includes(index)) && styles_module_scss_1.default.cellSpacing, cellClassName), size: size, value: char, disabled: disabled, autoComplete: index === 0 ? 'one-time-code' : undefined, onKeyDown: e => cellHandlers.onKeyDown(e, index), onPaste: cellHandlers.onPaste, onChange: e => cellHandlers.onChange(e, index), validationState: (0, utils_1.getCellValidationState)(char, showEmptyChars, Boolean(resolvedError)) }, index))) }) })), resendCode ? (0, jsx_runtime_1.jsx)(components_1.ResendCode, Object.assign({}, resendCode, { size: (_a = resendCode.size) !== null && _a !== void 0 ? _a : size })) : null] })));
 });
 var constants_2 = require("./constants");
 Object.defineProperty(exports, "FIELD_CODE_DEFAULT_FOCUS_EFFECTS", { enumerable: true, get: function () { return constants_2.FIELD_CODE_DEFAULT_FOCUS_EFFECTS; } });

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

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

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

@@ -15,5 +15,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./useCodeInput"), exports);
+__exportStar(require("./useFieldCodeError"), exports);
 __exportStar(require("./useFocusCell"), exports);
 __exportStar(require("./useFieldHelpers"), exports);

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

@@ -1,6 +1,6 @@
 import { ClipboardEvent, KeyboardEvent } from 'react';
 export type UseCodeInputParams = {
-    /** Количество цифр в коде */
+    /** Количество цифр в коде (ожидается целое ≥ 1) */
     codeLength: number;
     /** Значение кода */
     value?: string;

package/dist/cjs/components/FieldCode/hooks/useFieldCodeError.d.ts

@@ -0,0 +1,14 @@
+/** Параметры хука разрешения текста ошибки: `error` > валидация (`validate`) > `invalidCode`. */
+export type UseFieldCodeErrorParams = {
+    /** Включить встроенную валидацию (пустое значение и неполный код) */
+    validate?: boolean;
+    /** Значение кода */
+    value?: string;
+    /** Ожидаемая длина кода */
+    codeLength: number;
+    /** Показать сообщение о неверном коде */
+    invalidCode?: boolean;
+    /** Ошибка снаружи */
+    error?: string;
+};
+export declare function useFieldCodeError(params: UseFieldCodeErrorParams): string | undefined;

package/dist/cjs/components/FieldCode/hooks/useFieldCodeError.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFieldCodeError = useFieldCodeError;
+const react_1 = require("react");
+const uikit_product_locale_1 = require("@cloud-ru/uikit-product-locale");
+const utils_1 = require("../utils");
+function useFieldCodeError(params) {
+    var _a;
+    const { validate = false, value, codeLength, invalidCode = false, error } = params;
+    const { t } = (0, uikit_product_locale_1.useLocale)('FieldsPredefined');
+    const validationMessage = (0, react_1.useMemo)(() => {
+        if (!validate) {
+            return undefined;
+        }
+        const digits = (value !== null && value !== void 0 ? value : '').split('').filter(utils_1.isNumberChar).join('');
+        if (digits.length === 0) {
+            return t('FieldCode.required');
+        }
+        if (digits.length < codeLength) {
+            return t('FieldCode.minLength', { count: codeLength });
+        }
+        return undefined;
+    }, [codeLength, t, validate, value]);
+    const invalidCodeMessage = invalidCode ? t('FieldCode.invalidCode') : undefined;
+    return (_a = error !== null && error !== void 0 ? error : validationMessage) !== null && _a !== void 0 ? _a : invalidCodeMessage;
+}

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

@@ -10,33 +10,29 @@ export type FieldCodeRef = {
     /** Сбросить значение кода */
     resetCode: () => void;
 };
-export type FieldCodeProps = {
+/** Собственные пропсы `FieldCode` */
+export type FieldCodeOwnProps = {
     /** CSS-класс компонента */
     className?: string;
     /** CSS-класс ячейки кода */
     cellClassName?: string;
     /** Позиции, после которых нужно вставить пробел (индексы символов, после которых будет пробел) */
     spacing?: number[];
-    /** Подсветить пустые символы кода */
+    /**
+     * Подсветить пустые символы кода.
+     * Если не задано, совпадает с `validate`.
+     */
     showEmptyChars?: boolean;
     /** Компонент отправки нового кода */
     resendCode?: ResendCodeProps;
     /** Сценарии автофокуса; по умолчанию — первая ячейка при монтировании и после сброса (см. `FieldCodeFocusEffect`) */
     focusEffects?: readonly FieldCodeFocusEffect[];
-} & Omit<UseCodeInputParams, 'moveFocus'> & Pick<FieldDecoratorProps, 'size' | 'disabled' | 'label' | 'error' | 'data-test-id'>;
-export declare const FieldCode: import("react").ForwardRefExoticComponent<{
-    /** CSS-класс компонента */
-    className?: string;
-    /** CSS-класс ячейки кода */
-    cellClassName?: string;
-    /** Позиции, после которых нужно вставить пробел (индексы символов, после которых будет пробел) */
-    spacing?: number[];
-    /** Подсветить пустые символы кода */
-    showEmptyChars?: boolean;
-    /** Компонент отправки нового кода */
-    resendCode?: ResendCodeProps;
-    /** Сценарии автофокуса; по умолчанию — первая ячейка при монтировании и после сброса (см. `FieldCodeFocusEffect`) */
-    focusEffects?: readonly FieldCodeFocusEffect[];
-} & Omit<UseCodeInputParams, "moveFocus"> & Pick<FieldDecoratorProps, "size" | "label" | "error" | "disabled" | "data-test-id"> & import("react").RefAttributes<FieldCodeRef>>;
+    /** Встроенная валидация: пустое значение и неполный код */
+    validate?: boolean;
+    /** Показать сообщение «неверный код» (учитывается, если нет своего `error` и нет ошибки валидации) */
+    invalidCode?: boolean;
+};
+export type FieldCodeProps = FieldCodeOwnProps & Omit<UseCodeInputParams, 'moveFocus'> & Pick<FieldDecoratorProps, 'size' | 'disabled' | 'label' | 'error' | 'data-test-id'>;
+export declare const FieldCode: import("react").ForwardRefExoticComponent<FieldCodeOwnProps & Omit<UseCodeInputParams, "moveFocus"> & Pick<FieldDecoratorProps, "size" | "label" | "error" | "disabled" | "data-test-id"> & import("react").RefAttributes<FieldCodeRef>>;
 export type { FieldCodeFocusEffect } from './constants';
 export { FIELD_CODE_DEFAULT_FOCUS_EFFECTS } from './constants';

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

@@ -4,12 +4,13 @@ import { forwardRef, useImperativeHandle } from 'react';
 import { FieldDecorator } from '@snack-uikit/fields';
 import { Cell, ResendCode } from './components';
 import { FIELD_CODE_DEFAULT_FOCUS_EFFECTS } from './constants';
-import { useCodeInput, useFieldHelpers, useFocusCell } from './hooks';
+import { useCodeInput, useFieldCodeError, useFieldHelpers, useFocusCell } from './hooks';
 import styles from './styles.module.css';
 import { getCellValidationState } from './utils';
 export const FieldCode = forwardRef(function FieldCode(props, ref) {
     var _a;
-    const { codeLength, className, cellClassName, value, onChange, spacing, onComplete, size, disabled, label, error, showEmptyChars, resendCode, focusEffects = FIELD_CODE_DEFAULT_FOCUS_EFFECTS, 'data-test-id': dataTestId, } = props;
+    const { codeLength, className, cellClassName, value, onChange, spacing, onComplete, size, disabled, label, error, validate = false, invalidCode = false, showEmptyChars: showEmptyCharsProp, resendCode, focusEffects = FIELD_CODE_DEFAULT_FOCUS_EFFECTS, 'data-test-id': dataTestId, } = props;
+    const showEmptyChars = showEmptyCharsProp !== null && showEmptyCharsProp !== void 0 ? showEmptyCharsProp : validate;
     const { inputsRef, moveFocus, blurFields } = useFocusCell(codeLength);
     const { code, cellHandlers, onChangeCode } = useCodeInput({ value, onChange, codeLength, moveFocus, onComplete });
     const { resetCode } = useFieldHelpers({
@@ -25,16 +26,23 @@ export const FieldCode = forwardRef(function FieldCode(props, ref) {
         blurFields,
         resetCode,
     }), [moveFocus, blurFields, resetCode]);
+    const resolvedError = useFieldCodeError({
+        validate,
+        value,
+        codeLength,
+        invalidCode,
+        error,
+    });
     const resolvedDecoratorProps = {
         label,
         disabled,
         size,
-        error,
+        error: resolvedError,
     };
     return (_jsxs("div", Object.assign({ className: cn(styles.fieldCode, className) }, (dataTestId ? { 'data-test-id': dataTestId } : undefined), { children: [_jsx(FieldDecorator, Object.assign({}, resolvedDecoratorProps, { children: _jsx("div", { className: styles.codeContainer, "data-size": size, children: code.map((char, index) => (_jsx(Cell, { ref: inputRef => {
                             if (inputRef) {
                                 inputsRef.current[index] = inputRef;
                             }
-                        }, className: cn((spacing === null || spacing === void 0 ? void 0 : spacing.includes(index)) && styles.cellSpacing, cellClassName), size: size, value: char, disabled: disabled, autoComplete: index === 0 ? 'one-time-code' : undefined, onKeyDown: e => cellHandlers.onKeyDown(e, index), onPaste: cellHandlers.onPaste, onChange: e => cellHandlers.onChange(e, index), validationState: getCellValidationState(char, showEmptyChars, Boolean(error)) }, index))) }) })), resendCode ? _jsx(ResendCode, Object.assign({}, resendCode, { size: (_a = resendCode.size) !== null && _a !== void 0 ? _a : size })) : null] })));
+                        }, className: cn((spacing === null || spacing === void 0 ? void 0 : spacing.includes(index)) && styles.cellSpacing, cellClassName), size: size, value: char, disabled: disabled, autoComplete: index === 0 ? 'one-time-code' : undefined, onKeyDown: e => cellHandlers.onKeyDown(e, index), onPaste: cellHandlers.onPaste, onChange: e => cellHandlers.onChange(e, index), validationState: getCellValidationState(char, showEmptyChars, Boolean(resolvedError)) }, index))) }) })), resendCode ? _jsx(ResendCode, Object.assign({}, resendCode, { size: (_a = resendCode.size) !== null && _a !== void 0 ? _a : size })) : null] })));
 });
 export { FIELD_CODE_DEFAULT_FOCUS_EFFECTS } from './constants';

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

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

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

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

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

@@ -1,6 +1,6 @@
 import { ClipboardEvent, KeyboardEvent } from 'react';
 export type UseCodeInputParams = {
-    /** Количество цифр в коде */
+    /** Количество цифр в коде (ожидается целое ≥ 1) */
     codeLength: number;
     /** Значение кода */
     value?: string;

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

@@ -0,0 +1,14 @@
+/** Параметры хука разрешения текста ошибки: `error` > валидация (`validate`) > `invalidCode`. */
+export type UseFieldCodeErrorParams = {
+    /** Включить встроенную валидацию (пустое значение и неполный код) */
+    validate?: boolean;
+    /** Значение кода */
+    value?: string;
+    /** Ожидаемая длина кода */
+    codeLength: number;
+    /** Показать сообщение о неверном коде */
+    invalidCode?: boolean;
+    /** Ошибка снаружи */
+    error?: string;
+};
+export declare function useFieldCodeError(params: UseFieldCodeErrorParams): string | undefined;

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

@@ -0,0 +1,23 @@
+import { useMemo } from 'react';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { isNumberChar } from '../utils';
+export function useFieldCodeError(params) {
+    var _a;
+    const { validate = false, value, codeLength, invalidCode = false, error } = params;
+    const { t } = useLocale('FieldsPredefined');
+    const validationMessage = useMemo(() => {
+        if (!validate) {
+            return undefined;
+        }
+        const digits = (value !== null && value !== void 0 ? value : '').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, validate, value]);
+    const invalidCodeMessage = invalidCode ? t('FieldCode.invalidCode') : undefined;
+    return (_a = error !== null && error !== void 0 ? error : validationMessage) !== null && _a !== void 0 ? _a : invalidCodeMessage;
+}