@matthew.ngo/reform/src/core/form/useFormHandlers.ts

A flexible and powerful React form management library with advanced validation, state observation, and multi-group support

// import { SubmitErrorHandler, UseFormReturn } from "react-hook-form";
// import {
//   FormDataPath,
//   FormGroup,
//   ValidationConfig,
//   ValidationResult,
// } from "../../types";
// import { FormHandlers } from "./form-handlers";
// import { FormValidation } from "../validation/base/types";

// interface UseFormHandlersProps<T> {
//   methods: UseFormReturn<{ groups: FormGroup<T>[] }>;
//   config: ValidationConfig<T> & {
//     validateOnBlur?: boolean;
//     onSubmit?: (groups: FormGroup<T>[]) => Promise<void>;
//   };
//   validation: FormValidation<T>;
// }

// export const useFormHandlers = <T extends Record<string, any>>({
//   methods,
//   config,
//   validation,
// }: UseFormHandlersProps<T>): FormHandlers<T> => {
//   const handleBlur = async (
//     fieldName: keyof T,
//     groupIndex: number
//   ): Promise<ValidationResult> => {
//     const fieldConfig = config.fields?.[fieldName];
//     const shouldValidate = fieldConfig?.validateOnBlur ?? config.validateOnBlur;

//     if (!shouldValidate) {
//       return { isValid: true };
//     }

//     const fieldPath = `groups.${groupIndex}.data.${String(
//       fieldName
//     )}` as FormDataPath<T>;
//     const fieldValue = methods.getValues(fieldPath) as T[keyof T];

//     return validation.validateField(fieldName, fieldValue, groupIndex);
//   };

//   const handleSubmit = (
//     onValid: (data: { groups: FormGroup<T>[] }) => Promise<void>,
//     onInvalid?: SubmitErrorHandler<{ groups: FormGroup<T>[] }>
//   ) => {
//     return methods.handleSubmit(async (data) => {
//       try {
//         await onValid(data);
//       } catch (error) {
//         const message =
//           error instanceof Error ? error.message : "Submission failed";
//         methods.setError("root", { type: "submit", message });
//       }
//     }, onInvalid);
//   };

//   const handleChange = (
//     fieldName: keyof T,
//     groupIndex: number,
//     callback?: (value: T[keyof T]) => void
//   ) => {
//     const fieldPath = `groups.${groupIndex}.data.${String(
//       fieldName
//     )}` as FormDataPath<T>;
//     return {
//       onChange: async (e: any) => {
//         const value = e?.target?.value;
//         methods.setValue(fieldPath, value, {
//           shouldValidate: true,
//           shouldDirty: true,
//           shouldTouch: true,
//         });
//         callback?.(value);
//       },
//     };
//   };

//   const handleFocus = (
//     fieldName: keyof T,
//     groupIndex: number,
//     callback?: () => void
//   ) => {
//     return {
//       onFocus: () => {
//         methods.clearErrors(
//           `groups.${groupIndex}.data.${String(fieldName)}` as FormDataPath<T>
//         );
//         callback?.();
//       },
//     };
//   };

//   const resetField = (fieldName: keyof T, groupIndex: number) => {
//     const fieldPath = `groups.${groupIndex}.data.${String(
//       fieldName
//     )}` as FormDataPath<T>;
//     methods.resetField(fieldPath);
//   };

//   const setFieldValue = (
//     fieldName: keyof T,
//     groupIndex: number,
//     value: T[keyof T],
//     options?: {
//       shouldValidate?: boolean;
//       shouldDirty?: boolean;
//       shouldTouch?: boolean;
//     }
//   ) => {
//     const fieldPath = `groups.${groupIndex}.data.${String(
//       fieldName
//     )}` as FormDataPath<T>;
//     methods.setValue(fieldPath, value, options);
//   };

//   const touchField = (fieldName: keyof T, groupIndex: number) => {
//     const fieldPath = `groups.${groupIndex}.data.${String(
//       fieldName
//     )}` as FormDataPath<T>;
//     methods.setValue(fieldPath, methods.getValues(fieldPath), {
//       shouldTouch: true,
//     });
//   };

//   const resetForm = (
//     defaultValues?: { groups: FormGroup<T>[] },
//     options?: {
//       keepDirty?: boolean;
//       keepErrors?: boolean;
//       keepValues?: boolean;
//       keepIsSubmitted?: boolean;
//       keepTouched?: boolean;
//     }
//   ) => {
//     methods.reset(defaultValues, options);
//   };

//   return {
//     handleBlur,
//     handleSubmit,
//     handleChange,
//     handleFocus,
//     resetField,
//     setFieldValue,
//     touchField,
//     resetForm,
//   };
// };