react-form-manage 1.0.6-beta.1 → 1.0.6-beta.3

package/src/hooks/useFormItemControl.ts

@@ -25,6 +25,7 @@ import {
 } from "../stores/formStore";
 
 import type { FormInstance } from "../stores/formStore";
+import type { ValidationRule } from "../types/public";
 
 type AnyObject = Record<string, any>;
 
@@ -34,7 +35,7 @@ interface UseFormItemControlProps {
   name?: string;
   initialValue?: any;
   formItemId?: string;
-  rules?: any[];
+  rules?: ValidationRule[];
   elementRef?: RefObject<any> | null;
 }
 
@@ -59,7 +60,14 @@ export default function useFormItemControl<T = any>({
   elementRef,
 }: UseFormItemControlProps): UseFormItemControlReturn {
   const contextForm = useFormContext();
-  const { value, setData, getCacheData, getFormValues } = useFormStore(
+  const {
+    value,
+    setData,
+    getCacheData,
+    getFormValues,
+    getFormState,
+    isStateInitied,
+  } = useFormStore(
     useShallow((state) => {
       return {
         value: get(
@@ -69,6 +77,11 @@ export default function useFormItemControl<T = any>({
         setData: state.setData,
         getCacheData: state.getCacheData,
         getFormValues: state.getFormValues,
+        getFormState: state.getFormState,
+        isStateInitied:
+          state.formStates?.[
+            formName || form?.formName || contextForm?.formName
+          ]?.isInitied,
       };
     }),
   );
@@ -130,6 +143,7 @@ export default function useFormItemControl<T = any>({
       name,
       value,
     );
+    onChange(value, { notTriggerDirty: true });
   };
 
   const onFocus = () => {
@@ -283,6 +297,16 @@ export default function useFormItemControl<T = any>({
             }
           }
 
+          // Custom pattern
+          if (r.pattern && !r.pattern.test(fieldValue || "")) {
+            listErrors.push({
+              ruleName,
+              message: r.message,
+            });
+
+            return;
+          }
+
           // Password
           if (r.isPassword && !IS_PASSWORD_REGEX.test(fieldValue)) {
             // tempMessage.push(IS_PASSWORD_INVALID_MESSAGE);
@@ -478,17 +502,22 @@ export default function useFormItemControl<T = any>({
     // console.log("Init item value: ", name, value, internalInitValue);
     // console.log("internalInitValue: ", internalInitValue);
 
-    if (!value) {
-      if (!internalInitValue) {
-        if (!isNil(initialValue)) {
-          console.log("On init data", initialValue);
-          onInitData(initialValue);
+    if (isStateInitied) {
+      // console.log("Skip set init data when form is resetting");
+
+      if (isNil(value)) {
+        if (isNil(internalInitValue)) {
+          if (isNil(initialValue)) {
+            console.log("On init data", initialValue);
+            onInitData(initialValue);
+          }
+        } else {
+          onChange(internalInitValue, { notTriggerDirty: true });
         }
-      } else {
-        onChange(internalInitValue);
       }
+      return;
     }
-  }, [internalInitValue]);
+  }, [isStateInitied]);
 
   useEffect(() => {
     if (!listener) {

package/src/index.ts

@@ -3,12 +3,14 @@ import Form, {
   useWatch,
   useSubmitDataWatch,
   useFormStateWatch,
+  type FormProps,
+  type ValidationRule,
 } from "./providers/Form";
 
-import FormItem from "./components/Form/FormItem";
-import FormList from "./components/Form/FormList";
+import FormItem, { type FormItemProps } from "./components/Form/FormItem";
+import FormList, { type FormListProps } from "./components/Form/FormList";
 import Input from "./components/Input";
-import InputWrapper from "./components/Form/InputWrapper";
+import InputWrapper, { type InputWrapperProps } from "./components/Form/InputWrapper";
 
 import useFormItemControl from "./hooks/useFormItemControl";
 import useFormListControl from "./hooks/useFormListControl";
@@ -25,6 +27,11 @@ export {
   useWatch,
   useSubmitDataWatch,
   useFormStateWatch,
+  type FormProps,
+  type FormItemProps,
+  type FormListProps,
+  type InputWrapperProps,
+  type ValidationRule,
 };
 
 export default Form;

package/src/providers/Form.tsx

@@ -1,5 +1,6 @@
 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 { flushSync } from "react-dom";
 import { useShallow } from "zustand/react/shallow"; // Import useShallow
@@ -7,10 +8,28 @@ 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 default function Form({
+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>;
+  FormElement?: ComponentType<any>;
+}
+
+export default function Form<T = any>({
   children,
   formName,
   initialValues,
@@ -19,8 +38,9 @@ export default function Form({
   onFinally,
   FormElement,
   ...props
-}) {
+}: FormProps<T>) {
   const {
+    appInitValue,
     getFormItemValue,
     setInitData,
     setData,
@@ -34,7 +54,8 @@ export default function Form({
     clearFormState,
   } = useFormStore(
     useShallow((state) => ({
-      setInitData: state.setFormInitData,
+      appInitValue: state.initialValues,
+      setInitData: state.setInitData,
       getFormValues: state.getFormValues,
       setFormState: state.setFormState,
       setFormInstance: state.setFormInstance,
@@ -143,7 +164,7 @@ export default function Form({
         const formValues = getFormValues(formName);
 
         const resultValues = cloneDeep(formValues);
-        const cleanValues = {};
+        const cleanValues = {} as T;
         uniq(listeners, (l) => l.name).forEach((l) => {
           set(cleanValues, l.name, get(resultValues, l.name));
         });
@@ -292,7 +313,19 @@ export default function Form({
   };
 
   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,
@@ -319,6 +352,10 @@ export default function Form({
     };
   }, []);
 
+  // useEffect(() => {
+  //   // console.log("Form appInitValue changed", appInitValue);
+  // }, [appInitValue]);
+
   return (
     <FormContext.Provider
       value={{
@@ -363,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);
 
@@ -376,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) => {
@@ -393,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) => {
@@ -413,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) => {