feat: add auto form value provider

web/src/components/InsertModal.tsx

@@ -23,6 +23,33 @@ import * as React from "react";
 import { useState } from "react";
 import type { UnknownKeysParam, ZodObject, ZodRawShape, z } from "zod";
 
+type ContextType = [Partial<any>, React.Dispatch<React.SetStateAction<any>>];
+const AutoFormValueContext = React.createContext<ContextType | null>(null);
+
+function AutoFormValueProvider<Z extends ZodObject<any, any>>({
+  children,
+  value,
+}: {
+  children: React.ReactNode;
+  value: ContextType;
+}) {
+  return (
+    <AutoFormValueContext.Provider value={value}>
+      {children}
+    </AutoFormValueContext.Provider>
+  );
+}
+
+export function useAutoFormValueContext<Z extends ZodObject<any, any>>() {
+  const context = React.useContext(AutoFormValueContext);
+
+  // if (!context) {
+  //   throw new Error("useInsertModal must be used within a InsertModalProvider");
+  // }
+
+  return context;
+}
+
 export function InsertModal<
   K extends ZodRawShape,
   Y extends UnknownKeysParam,
@@ -41,7 +68,10 @@ export function InsertModal<
   const [open, setOpen] = React.useState(false);
   const [isLoading, setIsLoading] = React.useState(false);
 
+  const a = useState<Partial<z.infer<Z>>>({});
+
   return (
+    <AutoFormValueProvider value={a}>
       <Dialog open={open} onOpenChange={setOpen}>
         {/* <DialogTrigger disabled={props.disabled}> */}
         {props.tooltip ? (
@@ -74,13 +104,17 @@ export function InsertModal<
           </Button>
         )}
         {/* </DialogTrigger> */}
-      <DialogContent className={cn("sm:max-w-[425px]", props.dialogClassName)}>
+        <DialogContent
+          className={cn("sm:max-w-[425px]", props.dialogClassName)}
+        >
           <DialogHeader>
             <DialogTitle>{props.title}</DialogTitle>
             <DialogDescription>{props.description}</DialogDescription>
           </DialogHeader>
           {/* <ScrollArea> */}
           <AutoForm
+            values={values}
+            onValuesChange={setValues}
             fieldConfig={props.fieldConfig}
             formSchema={props.formSchema}
             onSubmit={async (data) => {
@@ -100,6 +134,7 @@ export function InsertModal<
           {/* </ScrollArea> */}
         </DialogContent>
       </Dialog>
+    </AutoFormValueProvider>
   );
 }
 
@@ -138,6 +173,7 @@ export function UpdateModal<
   }, [props.data]);
 
   return (
+    <AutoFormValueProvider value={[values, setValues]}>
       <Dialog open={open} onOpenChange={setOpen}>
         {props.trigger ?? (
           <DialogTrigger
@@ -150,7 +186,9 @@ export function UpdateModal<
             {props.trigger}
           </DialogTrigger>
         )}
-      <DialogContent className={cn("sm:max-w-[425px]", props.dialogClassName)}>
+        <DialogContent
+          className={cn("sm:max-w-[425px]", props.dialogClassName)}
+        >
           <DialogHeader>
             <DialogTitle>{props.title}</DialogTitle>
             <DialogDescription>{props.description}</DialogDescription>
@@ -182,5 +220,6 @@ export function UpdateModal<
           </AutoForm>
         </DialogContent>
       </Dialog>
+    </AutoFormValueProvider>
   );
 }