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

package/src/stores/formStore.ts

@@ -0,0 +1,477 @@
+import { produce } from "immer";
+import { cloneDeep, get, isNil, isNumber, last, set, unset } from "lodash";
+import { v4 } from "uuid";
+import { create } from "zustand";
+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;
+}
+
+interface ListenerItem {
+  name?: string;
+  formName?: string;
+  isTouched?: boolean;
+  isDirty?: boolean;
+  formItemId?: string;
+  internalErrors?: any;
+  onChange?: any;
+  onReset?: any;
+  onFocus?: any;
+  emitFocus?: any;
+}
+
+interface CleanUpItem {
+  name?: string;
+  type?: string;
+  key: string;
+  itemKey?: string;
+  formName?: string;
+}
+
+interface FormStoreState {
+  forms: Record<string, any>;
+  initialValues: Record<string, any>;
+  formStates: Record<string, any>;
+  cacheData: Record<string, any>;
+  formInstances: FormInstance[];
+  submitHistory: Record<string, any[]>;
+  // 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, "", {});
+        }
+      }),
+    );
+  },
+
+  getFormItemValue(formName, name) {
+    return get(storeGet().forms?.[formName], name);
+  },
+
+  getFormValues(formName) {
+    return storeGet().forms?.[formName];
+  },
+
+  clearFormValues(formName) {
+    return storeSet(
+      produce<any>((state: any) => {
+        const oldValues = state.forms;
+
+        // 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)));
+      }),
+    );
+  },
+
+  clearObjKeyItem(formName, name) {
+    return storeSet(
+      produce<any>((state: any) => {
+        const oldValues = state.forms;
+
+        // console.log("Clear item value", formName, name);
+
+        unset(oldValues, `${formName}.${name}`);
+
+        // 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);
+          }
+
+          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;
+        }
+        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);
+      }),
+    );
+  },
+}));
+
+export const useFormListeners = create<any>((storeSet: any, storeGet: any) => ({
+  listeners: [],
+  getListener(formItemId) {
+    return storeGet().listeners.find((l) => l.formItemId === formItemId);
+  },
+  getListeners() {
+    return storeGet().listeners;
+  },
+  setListener({
+    formName,
+    name,
+    onChange,
+    onReset,
+    isTouched,
+    isDirty,
+    formItemId,
+    internalErrors,
+    onFocus,
+    emitFocus,
+  }) {
+    return storeSet(
+      produce<any>((state: any) => {
+        const storeListeners = state.listeners;
+        const findListenerIndex = state.listeners.findIndex(
+          (l: any) => l.formItemId === formItemId,
+        );
+
+        if (findListenerIndex > -1) {
+          if (!isNil(formName)) {
+            storeListeners[findListenerIndex].formName = formName;
+          }
+          if (!isNil(name)) {
+            storeListeners[findListenerIndex].name = name;
+          }
+          if (!isNil(onChange)) {
+            storeListeners[findListenerIndex].onChange = onChange;
+          }
+          if (!isNil(onReset)) {
+            storeListeners[findListenerIndex].onReset = onReset;
+          }
+          if (!isNil(isTouched)) {
+            storeListeners[findListenerIndex].isTouched = isTouched;
+          }
+          if (!isNil(isDirty)) {
+            storeListeners[findListenerIndex].isDirty = isDirty;
+          }
+          if (!isNil(internalErrors)) {
+            storeListeners[findListenerIndex].internalErrors = internalErrors;
+          }
+          if (!isNil(onFocus)) {
+            storeListeners[findListenerIndex].onFocus = onFocus;
+          }
+          if (!isNil(emitFocus)) {
+            storeListeners[findListenerIndex].emitFocus = emitFocus;
+          }
+
+          return;
+        }
+        storeListeners.push({
+          name,
+          formName,
+          isTouched,
+          isDirty,
+          formItemId,
+          internalErrors,
+          onChange,
+          onReset,
+        });
+      }),
+    );
+  },
+  revokeListener(formItemId, onAfterRevoke) {
+    return storeSet(
+      produce<any>((state: any) => {
+        const storeListeners = state.listeners;
+
+        const findListenerIndex = storeListeners.findIndex(
+          (l: any) => l.formItemId == formItemId,
+        );
+
+        // console.log("Find item for revoke: ", findListenerIndex, formItemId);
+
+        if (findListenerIndex > -1) {
+          const listenersInfo = cloneDeep(storeListeners[findListenerIndex]);
+
+          storeListeners.splice(findListenerIndex, 1);
+
+          onAfterRevoke(
+            listenersInfo,
+            storeListeners.filter(
+              (l: any) =>
+                l.name === listenersInfo.name &&
+                l.formName === listenersInfo.formName &&
+                l.formItemId !== listenersInfo.formItemId,
+            ),
+          );
+        }
+      }),
+    );
+  },
+}));
+
+export const useFormCleanUp = create<any>((storeSet: any) => ({
+  cleanUpStack: [],
+  setCleanUpStack({ name, type, itemKey, formName }) {
+    return storeSet(
+      produce<any>((state: any) => {
+        const oldValues = state.cleanUpStack;
+        const cleanUpKey = v4();
+        oldValues.push({ name, type, key: cleanUpKey, itemKey, formName });
+      }),
+    );
+  },
+  clearCleanUpStack() {
+    return storeSet(
+      produce<any>((state: any) => {
+        state.cleanUpStack = [];
+      }),
+    );
+  },
+}));

package/src/types/index.ts

@@ -0,0 +1 @@
+export * from './public';

package/src/types/public.ts

@@ -0,0 +1,50 @@
+export type FormValues<T = any> = T;
+
+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>;
+}
+
+export interface UseFormItemProps<T = any> {
+  formName?: string;
+  form?: PublicFormInstance<T>;
+  name?: keyof T & string;
+  initialValue?: any;
+  formItemId?: string;
+  rules?: any[];
+}
+
+export interface UseFormItemReturn<T = any> {
+  value: T | undefined;
+  onChange: (value: T, options?: any) => void;
+  state: any;
+  errors: any;
+  onFocus: () => void;
+  isDirty?: boolean;
+}
+
+export interface UseFormListProps<T = any> {
+  name?: string;
+  form?: PublicFormInstance<T>;
+  initialValues?: T[];
+  formName?: string;
+}
+
+export interface ListField {
+  name: string;
+  key: string;
+}
+
+export interface UseFormListReturn {
+  listFields: ListField[];
+  move: (opts: { from?: number; fromKey?: string; to: number }) => void;
+  add: (index: number) => void;
+  remove: (opts: { index?: number; key?: string }) => void;
+}

package/src/utils/obj.util.ts

@@ -0,0 +1,42 @@
+import { filter, isNil, join } from "lodash";
+
+export function getAllNoneObjStringPath(value: any, prevPath: string = "") {
+  if (typeof value === "object") {
+    return Object.keys(value).reduce((prev, cur) => {
+      return [
+        ...prev,
+
+        ...getAllNoneObjStringPath(
+          value[cur],
+          join(
+            filter([prevPath, cur], (v) => !isNil(v) && v !== ""),
+            "."
+          )
+        ),
+      ];
+    }, []);
+  }
+  return [prevPath];
+}
+
+export function getAllStringPath(value: any, prevPath: string = "") {
+  if (typeof value === "object") {
+    return Object.keys(value).reduce((prev, cur) => {
+      return [
+        ...prev,
+        join(
+          filter([prevPath, cur], (v) => !isNil(v) && v !== ""),
+          "."
+        ),
+        ...getAllStringPath(
+          value[cur],
+          join(
+            filter([prevPath, cur], (v) => !isNil(v) && v !== ""),
+            "."
+          )
+        ),
+      ];
+    }, []);
+  }
+  return [];
+}

package/dist/App.d.ts

@@ -1,2 +0,0 @@
-export default App;
-declare function App(): import("react/jsx-runtime").JSX.Element;

package/dist/index.cjs

@@ -1,2 +0,0 @@
-
-//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.d.ts

@@ -1 +0,0 @@
-export * from './index';

package/dist/index.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/index.esm.d.ts

@@ -1 +0,0 @@
-export * from './index';

package/dist/index.esm.js

@@ -1,2 +0,0 @@
-
-//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}