react-form-manage 1.0.6-beta.2 → 1.0.6-beta.4

package/src/providers/Form.tsx

@@ -1,23 +1,31 @@
 import { cloneDeep, get, isEqual, last, set, uniq } from "lodash";
 import { useTask } from "minh-custom-hooks-release";
+import type { ComponentType, FormHTMLAttributes, ReactNode } from "react";
 import { createContext, useContext, useEffect, useState } from "react";
-import type { ReactNode, ComponentType, FormHTMLAttributes } from "react";
 import { flushSync } from "react-dom";
 import { useShallow } from "zustand/react/shallow"; // Import useShallow
 import FormCleanUp from "../components/Form/FormCleanUp";
 import { useFormListeners, useFormStore } from "../stores/formStore";
 import type { PublicFormInstance } from "../types/public";
 import { getAllNoneObjStringPath } from "../utils/obj.util";
+export type { ValidationRule } from "../types/public";
 
 export const FormContext = createContext(null);
 
-export interface FormProps<T = any> extends Omit<FormHTMLAttributes<HTMLFormElement>, 'onSubmit'> {
+export interface FormProps<T = any> extends Omit<
+  FormHTMLAttributes<HTMLFormElement>,
+  "onSubmit"
+> {
   children: ReactNode;
   formName: string;
   initialValues?: T;
   onFinish?: (values: T, allValues?: any) => void | Promise<void>;
   onReject?: (errorFields: any[]) => void | Promise<void>;
-  onFinally?: (result: { errorsField: any[]; values: T; withUnRegisteredValues: any }) => void | Promise<void>;
+  onFinally?: (result: {
+    errorsField: any[];
+    values: T;
+    withUnRegisteredValues: any;
+  }) => void | Promise<void>;
   FormElement?: ComponentType<any>;
 }
 
@@ -32,6 +40,7 @@ export default function Form<T = any>({
   ...props
 }: FormProps<T>) {
   const {
+    appInitValue,
     getFormItemValue,
     setInitData,
     setData,
@@ -45,7 +54,8 @@ export default function Form<T = any>({
     clearFormState,
   } = useFormStore(
     useShallow((state) => ({
-      setInitData: state.setFormInitData,
+      appInitValue: state.initialValues,
+      setInitData: state.setInitData,
       getFormValues: state.getFormValues,
       setFormState: state.setFormState,
       setFormInstance: state.setFormInstance,
@@ -303,7 +313,19 @@ export default function Form<T = any>({
   };
 
   useEffect(() => {
-    setInitData(formName, initialValues);
+    // set initial values
+    if (initialValues) {
+      const allStringPath = getAllNoneObjStringPath(initialValues);
+      allStringPath.forEach((p) => {
+        // console.log(
+        //   "Set initial value for form",
+        //   formName,
+        //   p,
+        //   get(initialValues, p),
+        // );
+        setInitData(formName, p, get(initialValues, p));
+      });
+    }
     setFormState({
       formName,
       isInitied: true,
@@ -330,6 +352,10 @@ export default function Form<T = any>({
     };
   }, []);
 
+  // useEffect(() => {
+  //   // console.log("Form appInitValue changed", appInitValue);
+  // }, [appInitValue]);
+
   return (
     <FormContext.Provider
       value={{
@@ -374,9 +400,12 @@ export function useFormContext() {
   return c;
 }
 
-export function useForm<T = any>(formNameOrFormInstance?: string | PublicFormInstance<T>) {
+export function useForm<T = any>(
+  formNameOrFormInstance?: string | PublicFormInstance<T>,
+) {
   const targetFormName =
-    typeof formNameOrFormInstance === "object" && formNameOrFormInstance !== null
+    typeof formNameOrFormInstance === "object" &&
+    formNameOrFormInstance !== null
       ? (formNameOrFormInstance as PublicFormInstance<T>).formName
       : (formNameOrFormInstance as string | undefined);
 
@@ -387,7 +416,10 @@ export function useForm<T = any>(formNameOrFormInstance?: string | PublicFormIns
   return [formInstance];
 }
 
-export function useWatch<T = any>(name: keyof T & string, formNameOrFormInstance?: string | PublicFormInstance<T>) {
+export function useWatch<T = any>(
+  name: keyof T & string,
+  formNameOrFormInstance?: string | PublicFormInstance<T>,
+) {
   const [formInstance] = useForm<T>(formNameOrFormInstance as any);
 
   const value = useFormStore((state) => {
@@ -404,7 +436,11 @@ export function useSubmitDataWatch<T = any>({
   formNameOrFormInstance,
   triggerWhenChange = false,
   mapFn,
-}: { formNameOrFormInstance?: string | PublicFormInstance<T>; triggerWhenChange?: boolean; mapFn?: (v: any, prev: any) => any } ) {
+}: {
+  formNameOrFormInstance?: string | PublicFormInstance<T>;
+  triggerWhenChange?: boolean;
+  mapFn?: (v: any, prev: any) => any;
+}) {
   const [formInstance] = useForm<T>(formNameOrFormInstance as any);
 
   const value = useFormStore((state) => {
@@ -424,7 +460,9 @@ export function useSubmitDataWatch<T = any>({
   return submitData as T | undefined;
 }
 
-export const useFormStateWatch = <T = any>(formNameOrFormInstance?: string | PublicFormInstance<T>) => {
+export const useFormStateWatch = <T = any,>(
+  formNameOrFormInstance?: string | PublicFormInstance<T>,
+) => {
   const [formInstance] = useForm<T>(formNameOrFormInstance as any);
 
   const formState = useFormStore((state) => {