@reformer/core 1.1.0 → 2.0.0-beta.11

package/dist/hooks/useFormControl.js

@@ -1,298 +0,0 @@
-import { useSyncExternalStore, useCallback, useRef } from 'react';
-import { effect } from '@preact/signals-core';
-// ============================================================================
-// Утилиты для сравнения
-// ============================================================================
-/**
- * Shallow сравнение массивов по содержимому
- * Возвращает true если массивы равны (одинаковые элементы в том же порядке)
- * @internal
- */
-function shallowArrayEqual(a, b) {
-    if (a === b)
-        return true;
-    if (a.length !== b.length)
-        return false;
-    for (let i = 0; i < a.length; i++) {
-        if (a[i] !== b[i])
-            return false;
-    }
-    return true;
-}
-// ============================================================================
-// Внутренние хуки для каждого типа контрола
-// ============================================================================
-/**
- * Внутренний хук для FieldNode с использованием useSyncExternalStore
- * @internal
- */
-function useFieldControl(control) {
-    // Кеш для предотвращения лишних ре-рендеров
-    const cacheRef = useRef({
-        snapshot: null,
-        value: control.value.value,
-        errors: control.errors.value,
-        componentProps: control.componentProps.value,
-        disabled: control.disabled.value,
-        pending: control.pending.value,
-        valid: control.valid.value,
-        invalid: control.invalid.value,
-        touched: control.touched.value,
-        shouldShowError: control.shouldShowError.value,
-    });
-    // Функция подписки - использует effect для отслеживания всех сигналов
-    const subscribe = useCallback((onStoreChange) => {
-        // Используем effect который автоматически отслеживает все читаемые сигналы
-        // effect НЕ вызывает callback сразу, только при изменениях
-        let isFirstRun = true;
-        const dispose = effect(() => {
-            // Читаем все сигналы чтобы effect их отслеживал
-            control.value.value;
-            control.disabled.value;
-            control.errors.value;
-            control.pending.value;
-            control.valid.value;
-            control.invalid.value;
-            control.touched.value;
-            control.shouldShowError.value;
-            control.componentProps.value;
-            // Пропускаем первый вызов (при создании effect)
-            if (isFirstRun) {
-                isFirstRun = false;
-                return;
-            }
-            // Уведомляем React об изменении
-            onStoreChange();
-        });
-        return dispose;
-    }, [control]);
-    // Функция получения текущего состояния
-    const getSnapshot = useCallback(() => {
-        const cache = cacheRef.current;
-        // Получаем текущие значения из сигналов
-        const currentValue = control.value.value;
-        const currentErrors = control.errors.value;
-        const currentComponentProps = control.componentProps.value;
-        const currentDisabled = control.disabled.value;
-        const currentPending = control.pending.value;
-        const currentValid = control.valid.value;
-        const currentInvalid = control.invalid.value;
-        const currentTouched = control.touched.value;
-        const currentShouldShowError = control.shouldShowError.value;
-        // Проверяем, изменилось ли что-то
-        // Используем shallowArrayEqual для errors т.к. валидация может создавать новые массивы
-        const hasChanged = cache.value !== currentValue ||
-            !shallowArrayEqual(cache.errors, currentErrors) ||
-            cache.componentProps !== currentComponentProps ||
-            cache.disabled !== currentDisabled ||
-            cache.pending !== currentPending ||
-            cache.valid !== currentValid ||
-            cache.invalid !== currentInvalid ||
-            cache.touched !== currentTouched ||
-            cache.shouldShowError !== currentShouldShowError;
-        // Если ничего не изменилось, возвращаем кешированный snapshot
-        if (!hasChanged && cache.snapshot) {
-            return cache.snapshot;
-        }
-        // Обновляем кеш
-        cache.value = currentValue;
-        cache.errors = currentErrors;
-        cache.componentProps = currentComponentProps;
-        cache.disabled = currentDisabled;
-        cache.pending = currentPending;
-        cache.valid = currentValid;
-        cache.invalid = currentInvalid;
-        cache.touched = currentTouched;
-        cache.shouldShowError = currentShouldShowError;
-        // Создаём новый snapshot
-        cache.snapshot = {
-            value: currentValue,
-            pending: currentPending,
-            disabled: currentDisabled,
-            errors: currentErrors,
-            valid: currentValid,
-            invalid: currentInvalid,
-            touched: currentTouched,
-            shouldShowError: currentShouldShowError,
-            componentProps: currentComponentProps,
-        };
-        return cache.snapshot;
-    }, [control]);
-    return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-}
-/**
- * Внутренний хук для ArrayNode с использованием useSyncExternalStore
- * @internal
- */
-function useArrayControl(control) {
-    // Кеш для предотвращения лишних ре-рендеров
-    const cacheRef = useRef({
-        snapshot: null,
-        value: control.value.value,
-        length: control.length.value,
-        errors: control.errors.value,
-        pending: control.pending.value,
-        valid: control.valid.value,
-        invalid: control.invalid.value,
-        touched: control.touched.value,
-        dirty: control.dirty.value,
-    });
-    // Функция подписки
-    const subscribe = useCallback((onStoreChange) => {
-        let isFirstRun = true;
-        const dispose = effect(() => {
-            // Читаем все сигналы
-            control.value.value;
-            control.length.value;
-            control.errors.value;
-            control.pending.value;
-            control.valid.value;
-            control.invalid.value;
-            control.touched.value;
-            control.dirty.value;
-            if (isFirstRun) {
-                isFirstRun = false;
-                return;
-            }
-            onStoreChange();
-        });
-        return dispose;
-    }, [control]);
-    // Функция получения текущего состояния
-    const getSnapshot = useCallback(() => {
-        const cache = cacheRef.current;
-        const currentValue = control.value.value;
-        const currentLength = control.length.value;
-        const currentErrors = control.errors.value;
-        const currentPending = control.pending.value;
-        const currentValid = control.valid.value;
-        const currentInvalid = control.invalid.value;
-        const currentTouched = control.touched.value;
-        const currentDirty = control.dirty.value;
-        const hasChanged = cache.value !== currentValue ||
-            cache.length !== currentLength ||
-            !shallowArrayEqual(cache.errors, currentErrors) ||
-            cache.pending !== currentPending ||
-            cache.valid !== currentValid ||
-            cache.invalid !== currentInvalid ||
-            cache.touched !== currentTouched ||
-            cache.dirty !== currentDirty;
-        if (!hasChanged && cache.snapshot) {
-            return cache.snapshot;
-        }
-        cache.value = currentValue;
-        cache.length = currentLength;
-        cache.errors = currentErrors;
-        cache.pending = currentPending;
-        cache.valid = currentValid;
-        cache.invalid = currentInvalid;
-        cache.touched = currentTouched;
-        cache.dirty = currentDirty;
-        cache.snapshot = {
-            value: currentValue,
-            length: currentLength,
-            pending: currentPending,
-            errors: currentErrors,
-            valid: currentValid,
-            invalid: currentInvalid,
-            touched: currentTouched,
-            dirty: currentDirty,
-        };
-        return cache.snapshot;
-    }, [control]);
-    return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-}
-// ============================================================================
-// Хук для получения только значения (без подписки на другие сигналы)
-// ============================================================================
-/**
- * Хук для получения только значения поля без подписки на errors, valid и т.д.
- * Используйте когда нужно только значение для условного рендеринга.
- *
- * @group React Hooks
- */
-export function useFormControlValue(control) {
-    const cacheRef = useRef({
-        value: control.value.value,
-        snapshot: control.value.value,
-    });
-    const subscribe = useCallback((onStoreChange) => {
-        let isFirstRun = true;
-        const dispose = effect(() => {
-            control.value.value; // Подписываемся ТОЛЬКО на value
-            if (isFirstRun) {
-                isFirstRun = false;
-                return;
-            }
-            onStoreChange();
-        });
-        return dispose;
-    }, [control]);
-    const getSnapshot = useCallback(() => {
-        const currentValue = control.value.value;
-        if (cacheRef.current.value === currentValue) {
-            return cacheRef.current.snapshot;
-        }
-        cacheRef.current.value = currentValue;
-        cacheRef.current.snapshot = currentValue;
-        return currentValue;
-    }, [control]);
-    return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-}
-/**
- * Хук для работы с FieldNode или ArrayNode - возвращает состояние с подписками на сигналы
- *
- * Использует useSyncExternalStore для оптимальной интеграции с React 18+.
- * Компонент ре-рендерится только когда реально изменились данные контрола.
- *
- * @group React Hooks
- *
- * @example FieldNode
- * ```tsx
- * const { value, errors, componentProps } = useFormControl(control);
- *
- * return (
- *   <div>
- *     <input value={value} onChange={e => control.setValue(e.target.value)} />
- *     {errors.length > 0 && <span>{errors[0].message}</span>}
- *   </div>
- * );
- * ```
- *
- * @example ArrayNode
- * ```tsx
- * const { length } = useFormControl(arrayControl);
- *
- * return (
- *   <div>
- *     {arrayControl.map((item, index) => (
- *       <ItemComponent key={item.id || index} control={item} />
- *     ))}
- *     {length === 0 && <span>Список пуст</span>}
- *   </div>
- * );
- * ```
- */
-export function useFormControl(control) {
-    // Определяем тип контрола по наличию специфичных свойств
-    const isArrayNode = control && 'length' in control && 'map' in control;
-    // Для undefined контрола возвращаем дефолтное состояние
-    if (!control) {
-        return {
-            value: [],
-            length: 0,
-            pending: false,
-            errors: [],
-            valid: true,
-            invalid: false,
-            touched: false,
-            dirty: false,
-        };
-    }
-    if (isArrayNode) {
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        return useArrayControl(control);
-    }
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    return useFieldControl(control);
-}