react-form-manage 1.0.8-beta.2 → 1.0.8-beta.21

package/src/stores/formStore.ts

@@ -3,7 +3,7 @@ import { cloneDeep, get, isNil, isNumber, last, set, unset } from "lodash";
 import { v4 } from "uuid";
 import { create } from "zustand";
 import { getAllNoneObjStringPath } from "../utils/obj.util";
-
+type ListenerFormItemType = "normal" | "array";
 export interface FormInstance {
   formName: string;
   resetFields: (values?: any) => void;
@@ -17,20 +17,23 @@ export interface FormInstance {
   setFieldFocus: (name: string) => void;
 }
 
-interface ListenerItem {
+export interface ListenerItem {
   name?: string;
   formName?: string;
   isTouched?: boolean;
   isDirty?: boolean;
   formItemId?: string;
   internalErrors?: any;
+  onArrayChange?: any;
   onChange?: any;
   onReset?: any;
   onFocus?: any;
   emitFocus?: any;
+  isInitied?: boolean;
+  type?: ListenerFormItemType;
 }
 
-interface CleanUpItem {
+export interface CleanUpItem {
   name?: string;
   type?: string;
   key: string;
@@ -45,318 +48,320 @@ interface FormStoreState {
   cacheData: Record<string, any>;
   formInstances: FormInstance[];
   submitHistory: Record<string, any[]>;
+  listeners: ListenerItem[];
+  cleanUpStack: CleanUpItem[];
   // 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);
-        }),
-      );
-    },
-
-    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, "", {});
-          }
-        }),
-      );
-    },
+// Form Store Slice
+const createFormStoreSlice = (storeSet: any, storeGet: any, api: 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);
+      }),
+    );
+  },
 
-    getFormItemValue(formName, name) {
-      return get(storeGet().forms?.[formName], name);
-    },
+  getCacheData(formName) {
+    return get(storeGet(), `cacheData.${formName}`);
+  },
 
-    getFormValues(formName) {
-      return storeGet().forms?.[formName];
-    },
+  setCacheData(formName, name, value) {
+    return storeSet(
+      produce<any>((state: any) => {
+        const oldValues = state.cacheData;
+        set(oldValues, `${formName}.${name}`, value);
+      }),
+    );
+  },
 
-    clearFormValues(formName) {
-      return storeSet(
-        produce<any>((state: any) => {
-          const oldValues = state.forms;
+  clearCacheData(formName) {
+    return storeSet(
+      produce<any>((state: any) => {
+        const oldValues = state.cacheData;
 
-          // console.log("Clear form values", formName);
+        if (formName) {
+          set(oldValues, formName, {});
+        } else {
+          set(oldValues, "", {});
+        }
+      }),
+    );
+  },
 
-          unset(oldValues, formName);
+  getFormItemValue(formName, name) {
+    return get(storeGet().forms?.[formName], name);
+  },
 
-          // console.log(JSON.parse(JSON.stringify(oldValues)));
-        }),
-      );
-    },
+  getFormValues(formName) {
+    return storeGet().forms?.[formName];
+  },
 
-    clearFormInitialValues(formName) {
-      return storeSet(
-        produce<any>((state: any) => {
-          const oldValues = state.initialValues;
+  clearFormValues(formName) {
+    return storeSet(
+      produce<any>((state: any) => {
+        const oldValues = state.forms;
 
-          // console.log("Clear form initial values", formName);
+        // console.log("Clear form values", formName);
+
+        unset(oldValues, formName);
+
+        // console.log(JSON.parse(JSON.stringify(oldValues)));
+      }),
+    );
+  },
+
+  clearFormInitialValues(formName) {
+    return storeSet(
+      produce<any>((state: any) => {
+        const oldValues = state.initialValues;
+
+        // console.log("Clear form initial values", formName);
+
+        unset(oldValues, formName);
+
+        // console.log(JSON.parse(JSON.stringify(oldValues)));
+      }),
+    );
+  },
 
-          unset(oldValues, formName);
+  clearObjKeyItem(formName, name) {
+    return storeSet(
+      produce<any>((state: any) => {
+        const oldValues = state.forms;
 
-          // console.log(JSON.parse(JSON.stringify(oldValues)));
-        }),
-      );
-    },
+        // console.log("Clear item value", formName, name);
 
-    clearObjKeyItem(formName, name) {
-      return storeSet(
-        produce<any>((state: any) => {
-          const oldValues = state.forms;
+        unset(oldValues, `${formName}.${name}`);
 
-          // console.log("Clear item value", formName, name);
+        // console.log(JSON.parse(JSON.stringify(oldValues)));
+      }),
+    );
+  },
+  clearArrItem(formName, name) {
+    return storeSet(
+      produce<any>((state: any) => {
+        const oldValues = state.forms;
 
-          unset(oldValues, `${formName}.${name}`);
+        console.log("Clear item array value", formName, name);
 
-          // console.log(JSON.parse(JSON.stringify(oldValues)));
-        }),
-      );
-    },
-    clearArrItem(formName, name) {
-      return storeSet(
-        produce<any>((state: any) => {
-          const oldValues = state.forms;
+        const arrPath = name.split(".").slice(0, -1).join(".");
 
-          console.log("Clear item array value", formName, name);
+        const elPath = Number(name.split(".").slice(-1).join(""));
 
-          const arrPath = name.split(".").slice(0, -1).join(".");
+        const getArrItem = get(oldValues, `${formName}.${arrPath}`);
 
-          const elPath = Number(name.split(".").slice(-1).join(""));
+        if (isNumber(elPath)) {
+          getArrItem.splice(elPath, 1);
+        }
 
-          const getArrItem = get(oldValues, `${formName}.${arrPath}`);
+        // console.log(JSON.parse(JSON.stringify(oldValues)));
+      }),
+    );
+  },
 
-          if (isNumber(elPath)) {
-            getArrItem.splice(elPath, 1);
+  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);
           }
 
-          // 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);
-            }
+          if (!isNil(submitState)) {
+            set(oldValues, `${formName}.submitState`, submitState);
           }
-        }),
-      );
-    },
-
-    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;
-            }
-
-            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;
+        }
+      }),
+    );
+  },
+
+  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));
           }
-          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);
+  getInitData(formName, name) {
+    return get(storeGet().initialValues, `${formName}.${name}`);
+  },
 
-          if (findInstanceIndex > -1) {
-            // const listenersInfo = cloneDeep(instances[findInstanceIndex]);
+  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);
+      }),
+    );
+  },
 
-            instances.splice(findInstanceIndex, 1);
+  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;
+          }
 
-            // onAfterRevoke(
-            //   listenersInfo,
-            //   instances.filter(
-            //     (l) =>
-            //       l.name === listenersInfo.name &&
-            //       l.formName === listenersInfo.formName &&
-            //       l.formItemId !== listenersInfo.formItemId
-            //   )
-            // );
+          if (!isNil(setFieldValue)) {
+            storeListeners[findListenerIndex].setFieldValue = setFieldValue;
           }
-        }),
-      );
-    },
-
-    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]);
+
+          if (!isNil(setFieldValues)) {
+            storeListeners[findListenerIndex].setFieldValues = setFieldValues;
+          }
+
+          if (!isNil(getFieldValue)) {
+            storeListeners[findListenerIndex].getFieldValue = getFieldValue;
           }
-          console.log("Submit history: ", formName);
-        }),
-      );
-    },
-  }),
-);
-
-export const useFormListeners = create<any>((storeSet: any, storeGet: any) => ({
+
+          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,
+        );
+
+        // 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);
+      }),
+    );
+  },
+});
+
+// Listeners Slice
+const createListenersSlice = (storeSet: any, storeGet: any, api: any) => ({
   listeners: [],
   getListener(formItemId) {
     return storeGet().listeners.find((l) => l.formItemId === formItemId);
@@ -375,7 +380,10 @@ export const useFormListeners = create<any>((storeSet: any, storeGet: any) => ({
     internalErrors,
     onFocus,
     emitFocus,
-  }) {
+    isInitied,
+    type,
+    onArrayChange,
+  }: Partial<ListenerItem> & { formItemId: string }) {
     return storeSet(
       produce<any>((state: any) => {
         const storeListeners = state.listeners;
@@ -412,17 +420,28 @@ export const useFormListeners = create<any>((storeSet: any, storeGet: any) => ({
             storeListeners[findListenerIndex].emitFocus = emitFocus;
           }
 
+          if (!isNil(isInitied)) {
+            storeListeners[findListenerIndex].isInitied = isInitied;
+          }
+
+          if (!isNil(onArrayChange)) {
+            storeListeners[findListenerIndex].onArrayChange = onArrayChange;
+          }
+
           return;
         }
         storeListeners.push({
           name,
           formName,
-          isTouched,
-          isDirty,
+          isTouched: Boolean(isTouched),
+          isDirty: Boolean(isDirty),
           formItemId,
           internalErrors,
           onChange,
           onReset,
+          isInitied: Boolean(isInitied),
+          type: type || "normal",
+          onArrayChange,
         });
       }),
     );
@@ -456,9 +475,10 @@ export const useFormListeners = create<any>((storeSet: any, storeGet: any) => ({
       }),
     );
   },
-}));
+});
 
-export const useFormCleanUp = create<any>((storeSet: any) => ({
+// CleanUp Slice
+const createCleanUpSlice = (storeSet: any, storeGet: any, api: any) => ({
   cleanUpStack: [],
   setCleanUpStack({ name, type, itemKey, formName }) {
     return storeSet(
@@ -476,4 +496,15 @@ export const useFormCleanUp = create<any>((storeSet: any) => ({
       }),
     );
   },
+});
+
+// Combined Store
+export const useFormStore = create<FormStoreState>((...a) => ({
+  ...createFormStoreSlice(...a),
+  ...createListenersSlice(...a),
+  ...createCleanUpSlice(...a),
 }));
+
+// Deprecated exports - use useFormStore instead
+export const useFormListeners = useFormStore;
+export const useFormCleanUp = useFormStore;