Update useMultiForm

trilitech · Sep 6, 2024 · b44438a · b44438a
1 parent 2365bb6
commit b44438a
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 7 deletions.
diff --git a/packages/components/src/DynamicDisclosure/DynamicDisclosure.tsx b/packages/components/src/DynamicDisclosure/DynamicDisclosure.tsx
@@ -11,6 +11,7 @@ import {
   type ReactElement,
   createContext,
   useContext,
+  useEffect,
   useRef,
   useState,
 } from "react";
@@ -31,6 +32,7 @@ interface DynamicDisclosureContextType {
   hasPrevious: boolean;
   formValues: Record<string, any>;
   allFormValues: Record<string, any>;
+  setAllFormValues: (values: Record<string, any>) => void;
 }
 
 const defaultContextValue = {
@@ -41,6 +43,7 @@ const defaultContextValue = {
   hasPrevious: false,
   formValues: {},
   allFormValues: {},
+  setAllFormValues: () => {},
 };
 
 /**
@@ -106,12 +109,21 @@ export const useDynamicDisclosure = () => {
   };
 
   const currentItem = stackRef.current[currentIndex] || null;
+  const _allFormValues = stackRef.current
+    .map(item => item.formValues)
+    .reduce((acc, curr) => merge(acc, cloneDeep(curr)), {});
+
+  const [allFormValues, setAllFormValues] = useState<Record<string, any>>(_allFormValues);
+
+  useEffect(() => {
+    setAllFormValues(_allFormValues);
+  }, [currentIndex]);
 
   // Note: be careful not to use the same form input names
   // otherwise, the values will be overwritten with the ones from the latest form
-  const allFormValues = stackRef.current
-    .map(item => item.formValues)
-    .reduce((acc, curr) => merge(acc, cloneDeep(curr)), {});
+  // const allFormValues = stackRef.current
+  //   .map(item => item.formValues)
+  //   .reduce((acc, curr) => merge(acc, cloneDeep(curr)), {});
 
   return {
     isOpen: !!currentItem,
@@ -123,6 +135,7 @@ export const useDynamicDisclosure = () => {
     formValues: currentItem?.formValues || {},
     hasPrevious: stackRef.current.length > 1,
     allFormValues,
+    setAllFormValues,
   };
 };
 

diff --git a/packages/components/src/DynamicDisclosure/useMultiForm.tsx b/packages/components/src/DynamicDisclosure/useMultiForm.tsx
@@ -17,11 +17,11 @@ export const useMultiForm = <
   const modalContext = useDynamicModalContext();
   const drawerContext = useDynamicDrawerContext();
 
-  const formDefaultValues =
-    usedIn === "drawer" ? drawerContext?.formValues : modalContext?.formValues;
+  const currentContext = usedIn === "drawer" ? drawerContext : modalContext;
+
   const form = useForm<TFieldValues, TContext, TTransformedValues>({
     ...props,
-    defaultValues: { ...props?.defaultValues, ...formDefaultValues } as any,
+    defaultValues: { ...props?.defaultValues, ...currentContext.allFormValues } as any,
   });
 
   const handleSubmit = (
@@ -31,7 +31,7 @@ export const useMultiForm = <
     form.handleSubmit(
       ((submittedValues: any) => {
         // update current context values
-        merge(formDefaultValues, submittedValues);
+        currentContext.setAllFormValues(merge(currentContext.allFormValues, submittedValues));
         return onValid(submittedValues);
       }) as any,
       onInvalid