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

package/README.md

@@ -351,6 +351,12 @@
 | onChange | `(value: string, mask: InputMask<Record<string, unknown>>) => void` | - |  |
 | ref | `LegacyRef<HTMLInputElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} |
 | key | `Key` | - |  |
+## useFieldCodeValidate
+Возвращает функцию валидации значения кода (пусто / неполный код).
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| codeLength* | `number` | - | Ожидаемая длина кода (цифр) |
 ## FieldCode
 ### Props
 | name | type | default value | description |
@@ -359,11 +365,10 @@
 | className | `string` | - | CSS-класс компонента |
 | cellClassName | `string` | - | CSS-класс ячейки кода |
 | spacing | `number[]` | - | Позиции, после которых нужно вставить пробел (индексы символов, после которых будет пробел) |
-| showEmptyChars | `boolean` | - | Подсветить пустые символы кода. Если не задано, совпадает с `validate`. |
+| showEmptyChars | `boolean` | - | Подсветить пустые символы кода |
 | resendCode | `ResendCodeProps` | - | Компонент отправки нового кода |
 | focusEffects | `readonly FieldCodeFocusEffect[]` | - | Сценарии автофокуса; по умолчанию — первая ячейка при монтировании и после сброса (см. `FieldCodeFocusEffect`) |
-| validate | `boolean` | - | Встроенная валидация: пустое значение и неполный код |
-| invalidCode | `boolean` | - | Показать сообщение «неверный код» (учитывается, если нет своего `error` и нет ошибки валидации) |
+| invalidCode | `string` | - | Сообщение при неверном коде, если не передан свой `error` |
 | value | `string` | - | Значение кода |
 | onChange | `(code: string) => void` | - | Колбек изменения значения |
 | onComplete | `(code: string) => void` | - | Колбек достижения ввода всех символов кода |

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

@@ -18,19 +18,14 @@ export type FieldCodeOwnProps = {
     cellClassName?: string;
     /** Позиции, после которых нужно вставить пробел (индексы символов, после которых будет пробел) */
     spacing?: number[];
-    /**
-     * Подсветить пустые символы кода.
-     * Если не задано, совпадает с `validate`.
-     */
+    /** Подсветить пустые символы кода */
     showEmptyChars?: boolean;
     /** Компонент отправки нового кода */
     resendCode?: ResendCodeProps;
     /** Сценарии автофокуса; по умолчанию — первая ячейка при монтировании и после сброса (см. `FieldCodeFocusEffect`) */
     focusEffects?: readonly FieldCodeFocusEffect[];
-    /** Встроенная валидация: пустое значение и неполный код */
-    validate?: boolean;
-    /** Показать сообщение «неверный код» (учитывается, если нет своего `error` и нет ошибки валидации) */
-    invalidCode?: boolean;
+    /** Сообщение при неверном коде, если не передан свой `error` */
+    invalidCode?: string;
 };
 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>>;

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

@@ -15,8 +15,7 @@ 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, 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 { codeLength, className, cellClassName, value, onChange, spacing, onComplete, size, disabled, label, error, invalidCode, showEmptyChars, resendCode, focusEffects = constants_1.FIELD_CODE_DEFAULT_FOCUS_EFFECTS, 'data-test-id': dataTestId, } = props;
     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)({
@@ -32,13 +31,7 @@ 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 resolvedError = error !== null && error !== void 0 ? error : invalidCode;
     const resolvedDecoratorProps = {
         label,
         disabled,

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

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

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

@@ -15,6 +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("./useFieldCodeValidate"), exports);
 __exportStar(require("./useFocusCell"), exports);
 __exportStar(require("./useFieldHelpers"), exports);

package/dist/cjs/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/cjs/components/FieldCode/hooks/useFieldCodeValidate.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFieldCodeValidate = useFieldCodeValidate;
+const react_1 = require("react");
+const uikit_product_locale_1 = require("@cloud-ru/uikit-product-locale");
+const utils_1 = require("../utils");
+/**
+ * Возвращает функцию валидации значения кода (пусто / неполный код).
+ */
+function useFieldCodeValidate(params) {
+    const { codeLength } = params;
+    const { t } = (0, uikit_product_locale_1.useLocale)('FieldsPredefined');
+    return (0, react_1.useCallback)((value) => {
+        const str = value != null ? String(value) : '';
+        const digits = str.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]);
+}

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

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

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

@@ -14,4 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFieldCodeValidate = void 0;
 __exportStar(require("./FieldCode"), exports);
+var useFieldCodeValidate_1 = require("./hooks/useFieldCodeValidate");
+Object.defineProperty(exports, "useFieldCodeValidate", { enumerable: true, get: function () { return useFieldCodeValidate_1.useFieldCodeValidate; } });

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

@@ -20,7 +20,7 @@
 }
 
 .cellSpacing[data-size=s]{
-  margin-right:2px;
+  margin-right:8px;
 }
 .cellSpacing[data-size=m]{
   margin-right:8px;

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

@@ -18,19 +18,14 @@ export type FieldCodeOwnProps = {
     cellClassName?: string;
     /** Позиции, после которых нужно вставить пробел (индексы символов, после которых будет пробел) */
     spacing?: number[];
-    /**
-     * Подсветить пустые символы кода.
-     * Если не задано, совпадает с `validate`.
-     */
+    /** Подсветить пустые символы кода */
     showEmptyChars?: boolean;
     /** Компонент отправки нового кода */
     resendCode?: ResendCodeProps;
     /** Сценарии автофокуса; по умолчанию — первая ячейка при монтировании и после сброса (см. `FieldCodeFocusEffect`) */
     focusEffects?: readonly FieldCodeFocusEffect[];
-    /** Встроенная валидация: пустое значение и неполный код */
-    validate?: boolean;
-    /** Показать сообщение «неверный код» (учитывается, если нет своего `error` и нет ошибки валидации) */
-    invalidCode?: boolean;
+    /** Сообщение при неверном коде, если не передан свой `error` */
+    invalidCode?: string;
 };
 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>>;

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

@@ -4,13 +4,12 @@ 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, useFieldCodeError, useFieldHelpers, useFocusCell } from './hooks';
+import { useCodeInput, 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, 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 { codeLength, className, cellClassName, value, onChange, spacing, onComplete, size, disabled, label, error, invalidCode, showEmptyChars, resendCode, focusEffects = FIELD_CODE_DEFAULT_FOCUS_EFFECTS, 'data-test-id': dataTestId, } = props;
     const { inputsRef, moveFocus, blurFields } = useFocusCell(codeLength);
     const { code, cellHandlers, onChangeCode } = useCodeInput({ value, onChange, codeLength, moveFocus, onComplete });
     const { resetCode } = useFieldHelpers({
@@ -26,13 +25,7 @@ export const FieldCode = forwardRef(function FieldCode(props, ref) {
         blurFields,
         resetCode,
     }), [moveFocus, blurFields, resetCode]);
-    const resolvedError = useFieldCodeError({
-        validate,
-        value,
-        codeLength,
-        invalidCode,
-        error,
-    });
+    const resolvedError = error !== null && error !== void 0 ? error : invalidCode;
     const resolvedDecoratorProps = {
         label,
         disabled,

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

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

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

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

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/index.d.ts

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

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

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

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

@@ -20,7 +20,7 @@
 }
 
 .cellSpacing[data-size=s]{
-  margin-right:2px;
+  margin-right:8px;
 }
 .cellSpacing[data-size=m]{
   margin-right:8px;