@firecms/formex 3.0.0-canary.21 → 3.0.0-canary.210

package/src/useCreateFormex.tsx

@@ -1,28 +1,52 @@
-import React, { FormEvent, useEffect, useState } from "react";
+import React, { useEffect, useState, useCallback, useMemo, useRef } from "react";
 import { getIn, setIn } from "./utils";
-import equal from "react-fast-compare"
+import equal from "react-fast-compare";
 
 import { FormexController, FormexResetProps } from "./types";
 
-export function useCreateFormex<T extends object>({ initialValues, initialErrors, validation, validateOnChange = false, onSubmit, validateOnInitialRender = false }: {
-    initialValues: T,
-    initialErrors?: Record<string, string>,
-    validateOnChange?: boolean,
-    validateOnInitialRender?: boolean,
-    validation?: (values: T) => Record<string, string> | Promise<Record<string, string>> | undefined | void,
-    onSubmit?: (values: T, controller: FormexController<T>) => void | Promise<void>
+export function useCreateFormex<T extends object>({
+                                                      initialValues,
+                                                      initialErrors,
+                                                      initialDirty,
+                                                      validation,
+                                                      validateOnChange = false,
+                                                      validateOnInitialRender = false,
+                                                      onSubmit,
+                                                      onReset,
+                                                      debugId,
+                                                  }: {
+    initialValues: T;
+    initialErrors?: Record<string, string>;
+    initialDirty?: boolean;
+    validateOnChange?: boolean;
+    validateOnInitialRender?: boolean;
+    validation?: (
+        values: T
+    ) =>
+        | Record<string, string>
+        | Promise<Record<string, string>>
+        | undefined
+        | void;
+    onSubmit?: (values: T, controller: FormexController<T>) => void | Promise<void>;
+    onReset?: (controller: FormexController<T>) => void | Promise<void>;
+    debugId?: string;
 }): FormexController<T> {
-
-    const initialValuesRef = React.useRef<T>(initialValues);
-    const valuesRef = React.useRef<T>(initialValues);
+    const initialValuesRef = useRef<T>(initialValues);
+    const valuesRef = useRef<T>(initialValues);
+    const debugIdRef = useRef<string | undefined>(debugId);
 
     const [values, setValuesInner] = useState<T>(initialValues);
     const [touchedState, setTouchedState] = useState<Record<string, boolean>>({});
     const [errors, setErrors] = useState<Record<string, string>>(initialErrors ?? {});
-    const [dirty, setDirty] = useState(false);
+    const [dirty, setDirty] = useState(initialDirty ?? false);
     const [submitCount, setSubmitCount] = useState(0);
     const [isSubmitting, setIsSubmitting] = useState(false);
     const [isValidating, setIsValidating] = useState(false);
+    const [version, setVersion] = useState(0);
+
+    // Replace state for history with refs
+    const historyRef = useRef<T[]>([initialValues]);
+    const historyIndexRef = useRef<number>(0);
 
     useEffect(() => {
         if (validateOnInitialRender) {
@@ -30,121 +54,205 @@ export function useCreateFormex<T extends object>({ initialValues, initialErrors
         }
     }, []);
 
-    const setValues = (newValues: T) => {
+    const setValues = useCallback((newValues: T) => {
         valuesRef.current = newValues;
         setValuesInner(newValues);
-        setDirty(equal(initialValuesRef.current, newValues));
-    }
+        setDirty(!equal(initialValuesRef.current, newValues));
+        // Update history using refs
+        const newHistory = historyRef.current.slice(0, historyIndexRef.current + 1);
+        newHistory.push(newValues);
+        historyRef.current = newHistory;
+        historyIndexRef.current = newHistory.length - 1;
+    }, []);
 
-    const validate = async () => {
+    const validate = useCallback(async () => {
         setIsValidating(true);
-        const values = valuesRef.current;
-        const validationErrors = await validation?.(values);
+        const validationErrors = await validation?.(valuesRef.current);
         setErrors(validationErrors ?? {});
         setIsValidating(false);
         return validationErrors;
-    }
+    }, [validation]);
 
-    const setFieldValue = (key: string, value: any, shouldValidate?: boolean) => {
-        const newValues = setIn(valuesRef.current, key, value);
-        valuesRef.current = newValues;
-        setValuesInner(newValues);
-        if (!equal(getIn(initialValuesRef.current, key), value)) {
-            setDirty(true);
-        }
-        if (shouldValidate) {
-            validate();
-        }
-    }
-
-    const setFieldError = (key: string, error: string | undefined) => {
-        const newErrors = { ...errors };
-        if (error) {
-            newErrors[key] = error;
-        } else {
-            delete newErrors[key];
-        }
-        setErrors(newErrors);
-    }
-
-    const setFieldTouched = (key: string, touched: boolean, shouldValidate?: boolean | undefined) => {
-        const newTouched = { ...touchedState };
-        newTouched[key] = touched;
-        setTouchedState(newTouched);
-        if (shouldValidate) {
-            validate();
-        }
-    }
+    const setFieldValue = useCallback(
+        (key: string, value: any, shouldValidate?: boolean) => {
+            const newValues = setIn(valuesRef.current, key, value);
+            valuesRef.current = newValues;
+            setValuesInner(newValues);
+            if (!equal(getIn(initialValuesRef.current, key), value)) {
+                setDirty(true);
+            }
+            if (shouldValidate) {
+                validate();
+            }
+            // Update history using refs
+            const newHistory = historyRef.current.slice(0, historyIndexRef.current + 1);
+            newHistory.push(newValues);
+            historyRef.current = newHistory;
+            historyIndexRef.current = newHistory.length - 1;
+        },
+        [validate]
+    );
 
-    const handleChange = (event: React.SyntheticEvent) => {
-        const target = event.target as HTMLInputElement;
-        const value = target.type === "checkbox" ? target.checked : target.value;
-        const name = target.name;
-        setFieldValue(name, value, validateOnChange);
-        setFieldTouched(name, true);
-    }
+    const setFieldError = useCallback((key: string, error: string | undefined) => {
+        setErrors((prevErrors) => {
+            const newErrors = { ...prevErrors };
+            if (error) {
+                newErrors[key] = error;
+            } else {
+                delete newErrors[key];
+            }
+            return newErrors;
+        });
+    }, []);
 
-    const handleBlur = (event: React.FocusEvent) => {
+    const setFieldTouched = useCallback(
+        (key: string, touched: boolean, shouldValidate?: boolean) => {
+            setTouchedState((prev) => ({
+                ...prev,
+                [key]: touched,
+            }));
+            if (shouldValidate) {
+                validate();
+            }
+        },
+        [validate]
+    );
+
+    const handleChange = useCallback(
+        (event: React.SyntheticEvent) => {
+            const target = event.target as HTMLInputElement;
+            let value;
+            if (target.type === "checkbox") {
+                value = target.checked;
+            } else if (target.type === "number") {
+                value = target.valueAsNumber;
+            } else {
+                value = target.value;
+            }
+            const name = target.name;
+            setFieldValue(name, value, validateOnChange);
+            setFieldTouched(name, true);
+        },
+        [setFieldValue, setFieldTouched, validateOnChange]
+    );
+
+    const handleBlur = useCallback((event: React.FocusEvent) => {
         const target = event.target as HTMLInputElement;
         const name = target.name;
         setFieldTouched(name, true);
-    }
+    }, [setFieldTouched]);
 
-    const submit = async (e?: FormEvent<HTMLFormElement>) => {
-        e?.preventDefault();
-        e?.stopPropagation();
-        setIsSubmitting(true);
-        setSubmitCount(submitCount + 1);
-        const validationErrors = await validation?.(valuesRef.current);
-        if (validationErrors && Object.keys(validationErrors).length > 0) {
-            setErrors(validationErrors);
-        } else {
-            setErrors({});
-            await onSubmit?.(valuesRef.current, controllerRef.current);
-        }
-        setIsSubmitting(false);
-    }
-
-    const resetForm = (props?: FormexResetProps<T>) => {
-        const {
-            submitCount: submitCountProp,
-            values: valuesProp,
-            errors: errorsProp,
-            touched: touchedProp
-        } = props ?? {};
-        initialValuesRef.current = valuesProp ?? initialValues;
-        valuesRef.current = valuesProp ?? initialValues;
-        setValuesInner(valuesProp ?? initialValues);
+    const submit = useCallback(
+        async (e?: React.FormEvent<HTMLFormElement>) => {
+            e?.preventDefault();
+            e?.stopPropagation();
+            setIsSubmitting(true);
+            setSubmitCount((prev) => prev + 1);
+            const validationErrors = await validation?.(valuesRef.current);
+            if (validationErrors && Object.keys(validationErrors).length > 0) {
+                setErrors(validationErrors);
+            } else {
+                setErrors({});
+                await onSubmit?.(valuesRef.current, controllerRef.current);
+            }
+            setIsSubmitting(false);
+            setVersion((prev) => prev + 1);
+        },
+        [onSubmit, validation]
+    );
+
+    const resetForm = useCallback((props?: FormexResetProps<T>) => {
+        const { submitCount: submitCountProp, values: valuesProp, errors: errorsProp, touched: touchedProp } = props ?? {};
+        valuesRef.current = valuesProp ?? initialValuesRef.current;
+        setValuesInner(valuesProp ?? initialValuesRef.current);
         setErrors(errorsProp ?? {});
         setTouchedState(touchedProp ?? {});
         setDirty(false);
         setSubmitCount(submitCountProp ?? 0);
-    }
-
-    const controller: FormexController<T> = {
-        values,
-        initialValues: initialValuesRef.current,
-        handleChange,
-        isSubmitting,
-        setSubmitting: setIsSubmitting,
-        setValues,
-        setFieldValue,
-        errors,
-        setFieldError,
-        touched: touchedState,
-        setFieldTouched,
-        dirty,
-        setDirty,
-        handleSubmit: submit,
-        submitCount,
-        setSubmitCount,
-        handleBlur,
-        validate,
-        isValidating,
-        resetForm
-    };
-
-    const controllerRef = React.useRef<FormexController<T>>(controller);
-    controllerRef.current = controller;
-    return controller
+        setVersion((prev) => prev + 1);
+        onReset?.(controllerRef.current);
+        // Reset history with refs
+        historyRef.current = [valuesProp ?? initialValuesRef.current];
+        historyIndexRef.current = 0;
+    }, [onReset]);
+
+    const undo = useCallback(() => {
+        if (historyIndexRef.current > 0) {
+            const newIndex = historyIndexRef.current - 1;
+            const newValues = historyRef.current[newIndex];
+            setValuesInner(newValues);
+            valuesRef.current = newValues;
+            historyIndexRef.current = newIndex;
+        }
+    }, []);
+
+    const redo = useCallback(() => {
+        if (historyIndexRef.current < historyRef.current.length - 1) {
+            const newIndex = historyIndexRef.current + 1;
+            const newValues = historyRef.current[newIndex];
+            setValuesInner(newValues);
+            valuesRef.current = newValues;
+            historyIndexRef.current = newIndex;
+        }
+    }, []);
+
+    const controllerRef = useRef<FormexController<T>>({} as FormexController<T>);
+
+    const controller = useMemo<FormexController<T>>(
+        () => ({
+            values,
+            initialValues: initialValuesRef.current,
+            handleChange,
+            isSubmitting,
+            setSubmitting: setIsSubmitting,
+            setValues,
+            setFieldValue,
+            errors,
+            setFieldError,
+            touched: touchedState,
+            setFieldTouched,
+            dirty,
+            setDirty,
+            handleSubmit: submit,
+            submitCount,
+            setSubmitCount,
+            handleBlur,
+            validate,
+            isValidating,
+            resetForm,
+            version,
+            debugId: debugIdRef.current,
+            undo,
+            redo,
+            canUndo: historyIndexRef.current > 0,
+            canRedo: historyIndexRef.current < historyRef.current.length - 1,
+        }),
+        [
+            values,
+            errors,
+            touchedState,
+            dirty,
+            isSubmitting,
+            submitCount,
+            isValidating,
+            version,
+            handleChange,
+            handleBlur,
+            setValues,
+            setFieldValue,
+            setFieldTouched,
+            setFieldError,
+            validate,
+            submit,
+            resetForm,
+            undo,
+            redo,
+        ]
+    );
+
+    useEffect(() => {
+        controllerRef.current = controller;
+    }, [controller]);
+
+    return controller;
 }

package/src/utils.ts

@@ -152,7 +152,7 @@ export function setNestedObjectValues<T>(
     return response;
 }
 
-function clone(value: any) {
+export function clone(value: any) {
     if (Array.isArray(value)) {
         return [...value];
     } else if (typeof value === "object" && value !== null) {