@cloud-ru/uikit-product-fields-predefined 0.13.11 → 0.14.1

package/dist/esm/components/FieldName/FieldNameRHF.js

@@ -0,0 +1,75 @@
+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 mergeRefs from 'merge-refs';
+import { forwardRef, useMemo, useState } from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+import { string } from 'yup';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { AdaptiveFieldText } from '@cloud-ru/uikit-product-mobile-fields';
+import { runAfterRerender } from '@snack-uikit/input-private';
+import { useCustomFieldValidation } from '../../hooks';
+import { DEFAULT_MAX_NAME_LENGTH } from './constants';
+/**
+ * Поле имя c оберткой для React Hook Form
+ */
+export const FieldNameRHF = forwardRef((props, ref) => {
+    const { t } = useLocale('FieldsPredefined');
+    const { controllerProps, maxLength = DEFAULT_MAX_NAME_LENGTH, required = true, customSchema, showLabel = true, size = 'm', allowMoreThanMaxLength = true, error: propError } = props, inputProps = __rest(props, ["controllerProps", "maxLength", "required", "customSchema", "showLabel", "size", "allowMoreThanMaxLength", "error"]);
+    const [isFocused, setIsFocused] = useState(false);
+    const { trigger } = useFormContext();
+    const validationSchema = useMemo(() => {
+        let baseSchema = string()
+            .test('maxLength', t('FieldName.maxSymbols', { max: maxLength }), value => {
+            if (!value)
+                return true;
+            return value.length <= maxLength;
+        })
+            .matches(/^[a-zA-Z0-9.\-_]*$/, {
+            message: t('FieldName.wrongSymbols'),
+            name: 'allowedSymbols',
+            excludeEmptyString: true,
+        });
+        if (customSchema) {
+            baseSchema = baseSchema.concat(customSchema);
+        }
+        return required ? baseSchema.required(t('FieldName.required')) : baseSchema;
+    }, [customSchema, maxLength, required, t]);
+    const { validateRHF } = useCustomFieldValidation({ schema: validationSchema });
+    const handleFocus = value => {
+        var _a;
+        setIsFocused(true);
+        (_a = inputProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(inputProps, value);
+    };
+    return (_jsx(Controller, Object.assign({}, controllerProps, { rules: { validate: validateRHF }, render: ({ field: { value, ref: localRef, onBlur, onChange }, fieldState: { error } }) => {
+            var _a, _b;
+            const isRequiredError = Boolean(error && ((_a = error.message) === null || _a === void 0 ? void 0 : _a.match(t('FieldName.required'))));
+            const shouldShowCounter = error && (((_b = error.message) === null || _b === void 0 ? void 0 : _b.match(t('FieldName.maxSymbols', { max: maxLength }))) || isRequiredError);
+            // - Есть ошибка обязательного поля и поле не в фокусе
+            // - Или другая ошибка
+            // - Или принудительно показываем ошибку
+            const showError = error && ((isRequiredError && !isFocused) || !isRequiredError);
+            const errorMes = propError !== null && propError !== void 0 ? propError : error === null || error === void 0 ? void 0 : error.message;
+            const handleChange = (newValue) => {
+                var _a;
+                (_a = inputProps.onChange) === null || _a === void 0 ? void 0 : _a.call(inputProps, newValue);
+                onChange(newValue);
+            };
+            const handleBlur = value => {
+                var _a;
+                runAfterRerender(() => setIsFocused(false));
+                (_a = inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, value);
+                onBlur();
+            };
+            return (_jsx(AdaptiveFieldText, Object.assign({}, inputProps, { inputMode: 'text', onClearButtonClick: () => trigger(controllerProps.name), allowMoreThanMaxLength: allowMoreThanMaxLength, ref: mergeRefs(ref, localRef), value: value, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, validationState: showError ? 'error' : inputProps.validationState, hint: showError ? errorMes : undefined, maxLength: shouldShowCounter && showError ? maxLength : undefined, size: size, label: showLabel ? t('FieldName.label') : undefined, caption: !required ? t('FieldDescription.optional') : undefined })));
+        } })));
+});

package/dist/esm/components/FieldName/constants.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_MAX_NAME_LENGTH = 64;

package/dist/esm/components/FieldName/constants.js

@@ -0,0 +1 @@
+export const DEFAULT_MAX_NAME_LENGTH = 64;

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

@@ -0,0 +1,3 @@
+export { FieldName } from './FieldName';
+export { FieldNameRHF } from './FieldNameRHF';
+export type { BaseFieldNameProps, FieldNameRHFProps, FieldNameProps } from './types';

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

@@ -0,0 +1,2 @@
+export { FieldName } from './FieldName';
+export { FieldNameRHF } from './FieldNameRHF';

package/dist/esm/components/FieldName/types.d.ts

@@ -0,0 +1,15 @@
+import { ControllerProps, FieldValues } from 'react-hook-form';
+import { StringSchema, ValidationError } from 'yup';
+import { FieldTextProps } from '@cloud-ru/uikit-product-mobile-fields';
+export type BaseFieldNameProps = Omit<FieldTextProps, 'placeholder' | 'label' | 'footer' | 'type' | 'inputMode' | 'caption' | 'hint'> & {
+    showLabel?: boolean;
+    customSchema?: StringSchema;
+};
+export type FieldNameProps = BaseFieldNameProps & {
+    /** Колбэк, вызываемый при изменении ошибки валидации */
+    onValidationError?: (error: ValidationError | null) => void;
+};
+export type FieldNameRHFProps = BaseFieldNameProps & {
+    /** Режим контроллера с использованием react-hook-form */
+    controllerProps: Omit<ControllerProps<FieldValues>, 'render' | 'rules' | 'disabled'>;
+};

package/dist/esm/components/FieldName/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -21,5 +21,5 @@ export declare const FieldPhone: import("react").ForwardRefExoticComponent<Omit<
     /** options — объект конфигурации для изменения стандартного списка стран */
     options?: CountrySettings;
 } & {
-    layoutType: import("@cloud-ru/uikit-product-utils/.").LayoutType;
+    layoutType: import("@cloud-ru/uikit-product-utils").LayoutType;
 } & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -3,3 +3,5 @@ export * from './SelectCreate';
 export * from './FieldAi';
 export * from './FieldChat';
 export * from './AIDisclaimer';
+export * from './FieldName';
+export * from './FieldDescription';

package/dist/esm/components/index.js

@@ -3,3 +3,5 @@ export * from './SelectCreate';
 export * from './FieldAi';
 export * from './FieldChat';
 export * from './AIDisclaimer';
+export * from './FieldName';
+export * from './FieldDescription';

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

@@ -1 +1,2 @@
 export * from './useOpen';
+export * from './useCustomFieldValidation';

package/dist/esm/hooks/index.js

@@ -1 +1,2 @@
 export * from './useOpen';
+export * from './useCustomFieldValidation';

package/dist/esm/hooks/useCustomFieldValidation.d.ts

@@ -0,0 +1,12 @@
+import { AnySchema, ValidationError } from 'yup';
+export type UseFieldValidationProps = {
+    schema: AnySchema;
+};
+export declare const useCustomFieldValidation: ({ schema }: UseFieldValidationProps) => {
+    validate: (value: string) => {
+        error: null;
+    } | {
+        error: ValidationError;
+    };
+    validateRHF: (value: string) => string | true | undefined;
+};

package/dist/esm/hooks/useCustomFieldValidation.js

@@ -0,0 +1,28 @@
+import { useCallback } from 'react';
+import { ValidationError } from 'yup';
+export const useCustomFieldValidation = ({ schema }) => {
+    const validate = useCallback((value) => {
+        try {
+            schema.validateSync(value);
+            return { error: null };
+        }
+        catch (err) {
+            if (err instanceof ValidationError) {
+                return { error: err };
+            }
+            return { error: null };
+        }
+    }, [schema]);
+    const validateRHF = useCallback((value) => {
+        try {
+            schema.validateSync(value);
+            return true;
+        }
+        catch (err) {
+            if (err instanceof ValidationError)
+                return err.message;
+            return;
+        }
+    }, [schema]);
+    return { validate, validateRHF };
+};