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

package/src/stores/formStore.ts

@@ -6,15 +6,15 @@ import { getAllNoneObjStringPath } from "../utils/obj.util";
 
 export interface FormInstance {
   formName: string;
-  resetFields?: any;
-  submit?: any;
-  submitAsync?: any;
-  setFieldValue?: any;
-  setFieldValues?: any;
-  getFieldValue?: any;
-  getFieldValues?: any;
-  getFieldErrors?: any;
-  setFieldFocus?: any;
+  resetFields: (values?: any) => void;
+  submit: (values?: any) => void;
+  submitAsync: (values?: any) => Promise<any>;
+  setFieldValue: (name: string, value: any, options?: any) => void;
+  setFieldValues: (values: Record<string, any>, options?: any) => void;
+  getFieldValue: (name: string) => any;
+  getFieldValues: (names?: string[]) => Array<{ name: string; value: any }>;
+  getFieldErrors: () => Record<string, any>;
+  setFieldFocus: (name: string) => void;
 }
 
 interface ListenerItem {
@@ -48,311 +48,313 @@ interface FormStoreState {
   // methods (loose typed for incremental migration)
   [key: string]: any;
 }
-export const useFormStore = create<FormStoreState>((storeSet: any, storeGet: any) => ({
-  forms: {},
-  initialValues: {},
-  formStates: {},
-  cacheData: {},
-  formInstances: [],
-  submitHistory: {},
-  setData(formName, name, value) {
-    return storeSet(
-      produce<any>((state: any) => {
-        const oldValues = state.forms;
-        set(oldValues, `${formName}.${name}`, value);
-      }),
-    );
-  },
+export const useFormStore = create<FormStoreState>(
+  (storeSet: any, storeGet: any) => ({
+    forms: {},
+    initialValues: {},
+    formStates: {},
+    cacheData: {},
+    formInstances: [],
+    submitHistory: {},
+    setData(formName, name, value) {
+      return storeSet(
+        produce<any>((state: any) => {
+          const oldValues = state.forms;
+          set(oldValues, `${formName}.${name}`, value);
+        }),
+      );
+    },
+
+    getCacheData(formName) {
+      return get(storeGet(), `cacheData.${formName}`);
+    },
+
+    setCacheData(formName, name, value) {
+      return storeSet(
+        produce<any>((state: any) => {
+          const oldValues = state.cacheData;
+          set(oldValues, `${formName}.${name}`, value);
+        }),
+      );
+    },
+
+    clearCacheData(formName) {
+      return storeSet(
+        produce<any>((state: any) => {
+          const oldValues = state.cacheData;
+
+          if (formName) {
+            set(oldValues, formName, {});
+          } else {
+            set(oldValues, "", {});
+          }
+        }),
+      );
+    },
 
-  getCacheData(formName) {
-    return get(storeGet(), `cacheData.${formName}`);
-  },
+    getFormItemValue(formName, name) {
+      return get(storeGet().forms?.[formName], name);
+    },
 
-  setCacheData(formName, name, value) {
-    return storeSet(
-      produce<any>((state: any) => {
-        const oldValues = state.cacheData;
-        set(oldValues, `${formName}.${name}`, value);
-      }),
-    );
-  },
+    getFormValues(formName) {
+      return storeGet().forms?.[formName];
+    },
 
-  clearCacheData(formName) {
-    return storeSet(
-      produce<any>((state: any) => {
-        const oldValues = state.cacheData;
+    clearFormValues(formName) {
+      return storeSet(
+        produce<any>((state: any) => {
+          const oldValues = state.forms;
 
-        if (formName) {
-          set(oldValues, formName, {});
-        } else {
-          set(oldValues, "", {});
-        }
-      }),
-    );
-  },
+          // console.log("Clear form values", formName);
 
-  getFormItemValue(formName, name) {
-    return get(storeGet().forms?.[formName], name);
-  },
+          unset(oldValues, formName);
 
-  getFormValues(formName) {
-    return storeGet().forms?.[formName];
-  },
+          // console.log(JSON.parse(JSON.stringify(oldValues)));
+        }),
+      );
+    },
 
-  clearFormValues(formName) {
-    return storeSet(
-      produce<any>((state: any) => {
-        const oldValues = state.forms;
+    clearFormInitialValues(formName) {
+      return storeSet(
+        produce<any>((state: any) => {
+          const oldValues = state.initialValues;
 
-        // console.log("Clear form values", formName);
+          // console.log("Clear form initial values", formName);
 
-        unset(oldValues, formName);
+          unset(oldValues, formName);
 
-        // console.log(JSON.parse(JSON.stringify(oldValues)));
-      }),
-    );
-  },
+          // console.log(JSON.parse(JSON.stringify(oldValues)));
+        }),
+      );
+    },
 
-  clearFormInitialValues(formName) {
-    return storeSet(
-      produce<any>((state: any) => {
-        const oldValues = state.initialValues;
+    clearObjKeyItem(formName, name) {
+      return storeSet(
+        produce<any>((state: any) => {
+          const oldValues = state.forms;
 
-        // console.log("Clear form initial values", formName);
+          // console.log("Clear item value", formName, name);
 
-        unset(oldValues, formName);
+          unset(oldValues, `${formName}.${name}`);
 
-        // console.log(JSON.parse(JSON.stringify(oldValues)));
-      }),
-    );
-  },
+          // console.log(JSON.parse(JSON.stringify(oldValues)));
+        }),
+      );
+    },
+    clearArrItem(formName, name) {
+      return storeSet(
+        produce<any>((state: any) => {
+          const oldValues = state.forms;
 
-  clearObjKeyItem(formName, name) {
-    return storeSet(
-      produce<any>((state: any) => {
-        const oldValues = state.forms;
+          console.log("Clear item array value", formName, name);
 
-        // console.log("Clear item value", formName, name);
+          const arrPath = name.split(".").slice(0, -1).join(".");
 
-        unset(oldValues, `${formName}.${name}`);
+          const elPath = Number(name.split(".").slice(-1).join(""));
 
-        // console.log(JSON.parse(JSON.stringify(oldValues)));
-      }),
-    );
-  },
-  clearArrItem(formName, name) {
-    return storeSet(
-      produce<any>((state: any) => {
-        const oldValues = state.forms;
-
-        console.log("Clear item array value", formName, name);
-
-        const arrPath = name.split(".").slice(0, -1).join(".");
-
-        const elPath = Number(name.split(".").slice(-1).join(""));
-
-        const getArrItem = get(oldValues, `${formName}.${arrPath}`);
-
-        if (isNumber(elPath)) {
-          getArrItem.splice(elPath, 1);
-        }
-
-        // console.log(JSON.parse(JSON.stringify(oldValues)));
-      }),
-    );
-  },
-
-  setFormState({ formName, isInitied, submitState }) {
-    return storeSet(
-      produce<any>((state: any) => {
-        const oldValues = state.formStates;
-        const getFormState = get(storeGet().formStates, formName);
-
-        if (isNil(getFormState)) {
-          set(oldValues, formName, { isInitied, submitState });
-        } else {
-          if (!isNil(isInitied)) {
-            set(oldValues, `${formName}.isInitied`, isInitied);
-          }
+          const getArrItem = get(oldValues, `${formName}.${arrPath}`);
 
-          if (!isNil(submitState)) {
-            set(oldValues, `${formName}.submitState`, submitState);
+          if (isNumber(elPath)) {
+            getArrItem.splice(elPath, 1);
           }
-        }
-      }),
-    );
-  },
-
-  clearFormState(formName) {
-    return storeSet(
-      produce<any>((state: any) => {
-        const oldValues = state.formStates;
-
-        // console.log("Clear form state", formName);
-
-        unset(oldValues, formName);
-
-        // console.log(JSON.parse(JSON.stringify(oldValues)));
-      }),
-    );
-  },
-
-  getFormState(formName) {
-    return get(storeGet(), `formStates.${formName}`);
-  },
-
-  setFormInitData(formName, initValues) {
-    return storeSet(
-      produce<any>((state: any) => {
-        const oldValues = state.initialValues;
-        const listInitPath = getAllNoneObjStringPath(initValues);
-
-        // console.log({ listInitPath, initValues });
 
-        listInitPath.forEach((k) => {
-          if (get(initValues, k)) {
-            // console.log("init form data values: ", k, get(initValues, k));
-            set(oldValues, `${formName}.${k}`, get(initValues, k));
+          // console.log(JSON.parse(JSON.stringify(oldValues)));
+        }),
+      );
+    },
+
+    setFormState({ formName, isInitied, submitState }) {
+      return storeSet(
+        produce<any>((state: any) => {
+          const oldValues = state.formStates;
+          const getFormState = get(storeGet().formStates, formName);
+
+          if (isNil(getFormState)) {
+            set(oldValues, formName, { isInitied, submitState });
+          } else {
+            if (!isNil(isInitied)) {
+              set(oldValues, `${formName}.isInitied`, isInitied);
+            }
+
+            if (!isNil(submitState)) {
+              set(oldValues, `${formName}.submitState`, submitState);
+            }
           }
-        });
-      }),
-    );
-  },
-
-  getInitData(formName, name) {
-    return get(storeGet().initialValues, `${formName}.${name}`);
-  },
-
-  setInitData(formName, name, value) {
-    return storeSet(
-      produce<any>((state: any) => {
-        const oldValues = state.initialValues;
-        // console.log("Inner init: ", `${formName}.${name}`, value);
-        set(oldValues, `${formName}.${name}`, value);
-      }),
-    );
-  },
-
-  setFormInstance({
-    formName,
-    resetFields,
-    submit,
-    submitAsync,
-    setFieldValue,
-    setFieldValues,
-    getFieldValue,
-    getFieldValues,
-    getFieldErrors,
-    setFieldFocus,
+        }),
+      );
+    },
+
+    clearFormState(formName) {
+      return storeSet(
+        produce<any>((state: any) => {
+          const oldValues = state.formStates;
+
+          // console.log("Clear form state", formName);
+
+          unset(oldValues, formName);
+
+          // console.log(JSON.parse(JSON.stringify(oldValues)));
+        }),
+      );
+    },
+
+    getFormState(formName) {
+      return get(storeGet(), `formStates.${formName}`);
+    },
+
+    setFormInitData(formName, initValues) {
+      return storeSet(
+        produce<any>((state: any) => {
+          const oldValues = state.initialValues;
+          const listInitPath = getAllNoneObjStringPath(initValues);
+
+          // console.log({ listInitPath, initValues });
+
+          listInitPath.forEach((k) => {
+            if (get(initValues, k)) {
+              // console.log("init form data values: ", k, get(initValues, k));
+              set(oldValues, `${formName}.${k}`, get(initValues, k));
+            }
+          });
+        }),
+      );
+    },
+
+    getInitData(formName, name) {
+      return get(storeGet().initialValues, `${formName}.${name}`);
+    },
+
+    setInitData(formName, name, value) {
+      return storeSet(
+        produce<any>((state: any) => {
+          const oldValues = state.initialValues;
+          console.log("Inner init: ", `${formName}.${name}`, value);
+          set(oldValues, `${formName}.${name}`, value);
+        }),
+      );
+    },
+
+    setFormInstance({
+      formName,
+      resetFields,
+      submit,
+      submitAsync,
+      setFieldValue,
+      setFieldValues,
+      getFieldValue,
+      getFieldValues,
+      getFieldErrors,
+      setFieldFocus,
     }) {
-    return storeSet(
-      produce<any>((state: any) => {
-        const storeListeners = state.formInstances;
-        const findListenerIndex = storeListeners.findIndex(
-          (l) => l.formName === formName,
-        );
-        if (findListenerIndex > -1) {
-          if (!isNil(resetFields)) {
-            storeListeners[findListenerIndex].resetFields = resetFields;
-          }
-          if (!isNil(submit)) {
-            storeListeners[findListenerIndex].submit = submit;
-          }
-          if (!isNil(setFieldFocus)) {
-            storeListeners[findListenerIndex].setFieldFocus = setFieldFocus;
-          }
-          if (!isNil(submitAsync)) {
-            storeListeners[findListenerIndex].submitAsync = submitAsync;
+      return storeSet(
+        produce<any>((state: any) => {
+          const storeListeners = state.formInstances;
+          const findListenerIndex = storeListeners.findIndex(
+            (l) => l.formName === formName,
+          );
+          if (findListenerIndex > -1) {
+            if (!isNil(resetFields)) {
+              storeListeners[findListenerIndex].resetFields = resetFields;
+            }
+            if (!isNil(submit)) {
+              storeListeners[findListenerIndex].submit = submit;
+            }
+            if (!isNil(setFieldFocus)) {
+              storeListeners[findListenerIndex].setFieldFocus = setFieldFocus;
+            }
+            if (!isNil(submitAsync)) {
+              storeListeners[findListenerIndex].submitAsync = submitAsync;
+            }
+
+            if (!isNil(setFieldValue)) {
+              storeListeners[findListenerIndex].setFieldValue = setFieldValue;
+            }
+
+            if (!isNil(setFieldValues)) {
+              storeListeners[findListenerIndex].setFieldValues = setFieldValues;
+            }
+
+            if (!isNil(getFieldValue)) {
+              storeListeners[findListenerIndex].getFieldValue = getFieldValue;
+            }
+
+            if (!isNil(getFieldValues)) {
+              storeListeners[findListenerIndex].getFieldValues = getFieldValues;
+            }
+
+            if (!isNil(getFieldErrors)) {
+              storeListeners[findListenerIndex].getFieldErrors = getFieldErrors;
+            }
+
+            return;
           }
+          storeListeners.push({
+            formName,
+            resetFields,
+            submit,
+            submitAsync,
+            setFieldValue,
+            setFieldValues,
+            getFieldValue,
+            getFieldValues,
+            getFieldErrors,
+            setFieldFocus,
+          });
+        }),
+      );
+    },
+    revokeFormInstance({ formName }) {
+      return storeSet(
+        produce<any>((state: any) => {
+          const instances = state.formInstances;
+
+          const findInstanceIndex = instances.findIndex(
+            (l) => l.formName == formName,
+          );
 
-          if (!isNil(setFieldValue)) {
-            storeListeners[findListenerIndex].setFieldValue = setFieldValue;
-          }
+          // console.log("Find item for revoke: ", findListenerIndex, formItemId);
 
-          if (!isNil(setFieldValues)) {
-            storeListeners[findListenerIndex].setFieldValues = setFieldValues;
-          }
+          if (findInstanceIndex > -1) {
+            // const listenersInfo = cloneDeep(instances[findInstanceIndex]);
 
-          if (!isNil(getFieldValue)) {
-            storeListeners[findListenerIndex].getFieldValue = getFieldValue;
-          }
+            instances.splice(findInstanceIndex, 1);
 
-          if (!isNil(getFieldValues)) {
-            storeListeners[findListenerIndex].getFieldValues = getFieldValues;
+            // onAfterRevoke(
+            //   listenersInfo,
+            //   instances.filter(
+            //     (l) =>
+            //       l.name === listenersInfo.name &&
+            //       l.formName === listenersInfo.formName &&
+            //       l.formItemId !== listenersInfo.formItemId
+            //   )
+            // );
           }
-
-          if (!isNil(getFieldErrors)) {
-            storeListeners[findListenerIndex].getFieldErrors = getFieldErrors;
+        }),
+      );
+    },
+
+    getCurrentSubmit(formName) {
+      return last(get(storeGet().submitHistory, formName)) || null;
+    },
+    getSubmitHistory(formName) {
+      return get(storeGet().submitHistory, formName);
+    },
+    setSubmitHistory(formName, submitData) {
+      return storeSet(
+        produce<any>((state: any) => {
+          const oldValues = get(state.submitHistory, formName);
+          if (oldValues) {
+            oldValues.push(submitData);
+            oldValues.splice(0, oldValues.length - 3);
+          } else {
+            set(state.submitHistory, formName, [submitData]);
           }
-
-          return;
-        }
-        storeListeners.push({
-          formName,
-          resetFields,
-          submit,
-          submitAsync,
-          setFieldValue,
-          setFieldValues,
-          getFieldValue,
-          getFieldValues,
-          getFieldErrors,
-          setFieldFocus,
-        });
-      }),
-    );
-  },
-  revokeFormInstance({ formName }) {
-    return storeSet(
-      produce<any>((state: any) => {
-        const instances = state.formInstances;
-
-        const findInstanceIndex = instances.findIndex(
-          (l) => l.formName == formName,
-        );
-
-        // console.log("Find item for revoke: ", findListenerIndex, formItemId);
-
-        if (findInstanceIndex > -1) {
-          // const listenersInfo = cloneDeep(instances[findInstanceIndex]);
-
-          instances.splice(findInstanceIndex, 1);
-
-          // onAfterRevoke(
-          //   listenersInfo,
-          //   instances.filter(
-          //     (l) =>
-          //       l.name === listenersInfo.name &&
-          //       l.formName === listenersInfo.formName &&
-          //       l.formItemId !== listenersInfo.formItemId
-          //   )
-          // );
-        }
-      }),
-    );
-  },
-
-  getCurrentSubmit(formName) {
-    return last(get(storeGet().submitHistory, formName)) || null;
-  },
-  getSubmitHistory(formName) {
-    return get(storeGet().submitHistory, formName);
-  },
-  setSubmitHistory(formName, submitData) {
-    return storeSet(
-      produce<any>((state: any) => {
-        const oldValues = get(state.submitHistory, formName);
-        if (oldValues) {
-          oldValues.push(submitData);
-          oldValues.splice(0, oldValues.length - 3);
-        } else {
-          set(state.submitHistory, formName, [submitData]);
-        }
-        console.log("Submit history: ", formName);
-      }),
-    );
-  },
-}));
+          console.log("Submit history: ", formName);
+        }),
+      );
+    },
+  }),
+);
 
 export const useFormListeners = create<any>((storeSet: any, storeGet: any) => ({
   listeners: [],

package/src/types/public.ts

@@ -1,15 +1,43 @@
 export type FormValues<T = any> = T;
 
+export interface ValidationRule<T = any, TValues = any> {
+  name?: string;
+  message: string;
+  handler?: (value: T, formValues: TValues) => boolean | Promise<boolean>;
+  required?: boolean;
+  min?: number;
+  max?: number;
+  minLength?: number;
+  maxLength?: number;
+  isPassword?: boolean;
+  isUsername?: boolean;
+  isPhoneNumber?: boolean;
+  isStringNumber?: boolean;
+  isPositiveStringNumber?: boolean;
+  isPositiveIntegerStringNumber?: boolean;
+  isEmail?: boolean;
+  isVietnameseName?: boolean;
+  isNoSpaceStringAndNumber?: boolean;
+  isStringAndNumber?: boolean;
+  isNoSpaceOnlyAlphabetStringAndNumber?: boolean;
+  isOnlyAlphabetStringAndNumber?: boolean;
+  isNoSpaceAlphabetString?: boolean;
+  pattern?: RegExp;
+}
+
 export interface PublicFormInstance<T = any> {
   formName: string;
-  resetFields?: (values?: Partial<T>) => void;
-  submit?: (values?: T) => void;
-  submitAsync?: (values?: T) => Promise<any>;
-  setFieldValue?: (name: keyof T & string, value: any) => void;
-  setFieldValues?: (values: Partial<T>) => void;
-  getFieldValue?: (name: keyof T & string) => any;
-  getFieldValues?: () => T;
-  getFieldErrors?: () => Record<string, any>;
+  resetFields: (values?: Partial<T>) => void;
+  submit: (values?: T) => void;
+  submitAsync: (values?: T) => Promise<any>;
+  setFieldValue: (name: keyof T & string, value: any, options?: any) => void;
+  setFieldValues: (values: Partial<T>, options?: any) => void;
+  getFieldValue: (name: keyof T & string) => any;
+  getFieldValues: (
+    names?: Array<keyof T & string>,
+  ) => Array<{ name: string; value: any }>;
+  getFieldErrors: () => Record<string, any>;
+  setFieldFocus: (name: keyof T & string) => void;
 }
 
 export interface UseFormItemProps<T = any> {
@@ -18,7 +46,7 @@ export interface UseFormItemProps<T = any> {
   name?: keyof T & string;
   initialValue?: any;
   formItemId?: string;
-  rules?: any[];
+  rules?: ValidationRule<any, T>[];
 }
 
 export interface UseFormItemReturn<T = any> {