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

package/src/hooks/useFormItemControl.ts

@@ -0,0 +1,558 @@
+import { get, isNil } from "lodash";
+import { useTaskEffect } from "minh-custom-hooks-release";
+import { useEffect, useMemo, type RefObject } from "react";
+import { useShallow } from "zustand/react/shallow"; // Import useShallow
+import {
+  IS_ALPHABET_STRING_AND_NUMBER_REGEX,
+  IS_EMAIL_REGEX,
+  IS_NAME_REGEX,
+  IS_NO_SPACE_ALPHABET_STRING_AND_NUMBER_REGEX,
+  IS_NO_SPACE_ALPHABET_STRING_REGEX,
+  IS_NOSPACE_STRING_AND_NUMBER_REGEX,
+  IS_PASSWORD_REGEX,
+  IS_POSITIVE_INTEGER_STRING_NUMBER_REGEX,
+  IS_POSITIVE_STRING_NUMBER_REGEX,
+  IS_STRING_AND_NUMBER_REGEX,
+  IS_STRING_NUMBER_REGEX,
+  IS_USERNAME_REGEX,
+  IS_VIETNAMESE_PHONE_NUMBER_REGEX,
+} from "../constants/validation";
+import { useFormContext } from "../providers/Form";
+import {
+  useFormCleanUp,
+  useFormListeners,
+  useFormStore,
+} from "../stores/formStore";
+
+import type { FormInstance } from "../stores/formStore";
+
+type AnyObject = Record<string, any>;
+
+interface UseFormItemControlProps {
+  formName?: string;
+  form?: FormInstance;
+  name?: string;
+  initialValue?: any;
+  formItemId?: string;
+  rules?: any[];
+  elementRef?: RefObject<any> | null;
+}
+
+interface UseFormItemControlReturn {
+  value: any;
+  onChange: (value: any, options?: AnyObject) => void;
+  state: any;
+  errors: any;
+  onFocus: () => void;
+  isDirty?: boolean;
+}
+
+const VALID_PREMITIVE_TYPE = ["string", "number", "undefined"];
+
+export default function useFormItemControl<T = any>({
+  formName,
+  form,
+  name,
+  initialValue,
+  formItemId,
+  rules,
+  elementRef,
+}: UseFormItemControlProps): UseFormItemControlReturn {
+  const contextForm = useFormContext();
+  const { value, setData, getCacheData, getFormValues } = useFormStore(
+    useShallow((state) => {
+      return {
+        value: get(
+          state.forms,
+          `${formName || form?.formName || contextForm?.formName}.${name}`,
+        ),
+        setData: state.setData,
+        getCacheData: state.getCacheData,
+        getFormValues: state.getFormValues,
+      };
+    }),
+  );
+
+  const { setCleanUpStack } = useFormCleanUp(
+    useShallow((state) => ({
+      setCleanUpStack: state.setCleanUpStack,
+    })),
+  );
+
+  const {
+    initValue: internalInitValue,
+    setInitData,
+    getInitData,
+  } = useFormStore(
+    useShallow((state) => {
+      // console.log(
+      //   "Shallow get initValue: ",
+      //   formName || form?.formName || contextForm?.formName,
+      //   name,
+      //   get(
+      //     state.initialValues,
+      //     `${formName || form?.formName || contextForm?.formName}.${name}`
+      //   )
+      // );
+      return {
+        initValue: get(
+          state.initialValues,
+          `${formName || form?.formName || contextForm?.formName}.${name}`,
+        ),
+        setInitData: state.setInitData,
+        getInitData: state.getInitData,
+      };
+    }),
+  );
+
+  const { listener, setListener } = useFormListeners(
+    useShallow((state) => {
+      // console.log(
+      //   "Get listener from store: ",
+      //   state.listeners.find((l) => l.formItemId === formItemId)
+      // );
+      return {
+        listener: state.listeners.find((l) => l.formItemId === formItemId),
+        setListener: state.setListener,
+      };
+    }),
+  );
+
+  const onInitData = (value: T) => {
+    // console.log(
+    //   "Init:",
+    //   formName || form?.formName || contextForm?.formName,
+    //   name,
+    //   value
+    // );
+    setInitData(
+      formName || form?.formName || contextForm?.formName,
+      name,
+      value,
+    );
+  };
+
+  const onFocus = () => {
+    setListener({
+      formItemId,
+      isTouched: true,
+      isDirty: listener?.isDirty,
+    });
+  };
+
+  const emitFocus = () => {
+    if (elementRef?.current) {
+      elementRef.current.focus();
+    }
+  };
+
+  const onChange = (value: T, options?: any) => {
+    if (options?.notTriggerDirty !== true) {
+      setListener({
+        formItemId,
+        isDirty: true,
+        isTouched: listener?.isTouched,
+      });
+    }
+    setData(formName || form?.formName || contextForm?.formName, name, value);
+  };
+
+  const onReset = (value?: any) => {
+    console.log(
+      "Reset",
+      value,
+      getInitData(formName || form?.formName || contextForm?.formName, name),
+    );
+    onChange(
+      isNil(value)
+        ? getInitData(formName || form?.formName || contextForm?.formName, name)
+        : value,
+    );
+  };
+
+  // validate field rules
+  const internalRules = useMemo(() => {
+    return rules || [];
+  }, [rules]);
+
+  const { data: errors, state } = useTaskEffect({
+    async task() {
+      const listErrors = [];
+
+      const formValues = getFormValues(
+        formName || form?.formName || contextForm?.formName,
+      );
+
+      const ruleToTask = internalRules?.map((r, index) => async () => {
+        const ruleName = r?.name || index;
+
+        const fieldValue = value?.toString?.();
+
+        if (typeof r.handler === "function") {
+          if (!(await r.handler(value, formValues))) {
+            listErrors.push({
+              ruleName,
+              message: r.message,
+            });
+
+            return;
+          }
+        }
+
+        if (VALID_PREMITIVE_TYPE.includes(typeof value)) {
+          // REQUIRE
+          if (r.required && !(fieldValue?.toString()?.trim()?.length > 0)) {
+            // tempMessage.push("This field is required!");
+            listErrors.push({
+              ruleName,
+              message: r.message,
+            });
+
+            return;
+          }
+
+          // Min Max
+          if (!isNil(r.min) || !isNil(r.max)) {
+            if (isNil(value)) {
+              listErrors.push({
+                ruleName,
+                message: r.message,
+              });
+
+              return;
+            }
+            if (
+              (r.min ?? Number.MIN_SAFE_INTEGER) <=
+              (r.max ?? Number.MAX_SAFE_INTEGER)
+            ) {
+              if (!isNil(r.min)) {
+                if (!isNaN(Number(fieldValue)) && Number(fieldValue) <= r.min) {
+                  // tempMessage.push(MIN_INVALID_MESSAGE);
+                  listErrors.push({
+                    ruleName,
+                    message: r.message,
+                  });
+
+                  return;
+                }
+              }
+
+              if (!isNil(r.max)) {
+                if (!isNaN(Number(fieldValue)) && Number(fieldValue) >= r.max) {
+                  // tempMessage.push(MAX_INVALID_MESSAGE);
+                  listErrors.push({
+                    ruleName,
+                    message: r.message,
+                  });
+
+                  return;
+                }
+              }
+            }
+          }
+
+          // MIN LENGTH MAX LENGTH
+          if (!isNil(r.minLength) || !isNil(r.maxLength)) {
+            if (
+              (r.minLength ?? Number.MIN_SAFE_INTEGER) <=
+              (r.maxLength ?? Number.MAX_SAFE_INTEGER)
+            ) {
+              if (!isNil(r.minLength)) {
+                if (fieldValue?.length <= r.minLength) {
+                  // tempMessage.push(MIN_INVALID_LENGTH_MESSAGE);
+                  listErrors.push({
+                    ruleName,
+                    message: r.message,
+                  });
+
+                  return;
+                }
+              }
+
+              if (!isNil(r.maxLength)) {
+                if (fieldValue?.length >= r.maxLength) {
+                  // tempMessage.push(MAX_INVALID_LENGTH_MESSAGE);
+                  listErrors.push({
+                    ruleName,
+                    message: r.message,
+                  });
+
+                  return;
+                }
+              }
+            }
+          }
+
+          // Password
+          if (r.isPassword && !IS_PASSWORD_REGEX.test(fieldValue)) {
+            // tempMessage.push(IS_PASSWORD_INVALID_MESSAGE);
+            listErrors.push({
+              ruleName,
+              message: r.message,
+            });
+
+            return;
+          }
+
+          // Username
+          if (r.isUsername && !IS_USERNAME_REGEX.test(fieldValue)) {
+            // tempMessage.push(IS_USERNAME_INVALID_MESSAGE);
+            listErrors.push({
+              ruleName,
+              message: r.message,
+            });
+
+            return;
+          }
+
+          // Is Vietnamese Phone number
+          if (
+            r.isPhoneNumber &&
+            !IS_VIETNAMESE_PHONE_NUMBER_REGEX.test(fieldValue)
+          ) {
+            // tempMessage.push(IS_VIETNAMESE_PHONE_NUMBER_INVALID_MESSAGE);
+            listErrors.push({
+              ruleName,
+              message: r.message,
+            });
+
+            return;
+          }
+
+          // String number
+          if (r.isStringNumber && !IS_STRING_NUMBER_REGEX.test(fieldValue)) {
+            // tempMessage.push(IS_STRING_NUMBER_INVALID_MESSAGE);
+            listErrors.push({
+              ruleName,
+              message: r.message,
+            });
+
+            return;
+          }
+
+          // String positive number
+          if (
+            r.isPositiveStringNumber &&
+            !IS_POSITIVE_STRING_NUMBER_REGEX.test(fieldValue)
+          ) {
+            // tempMessage.push(IS_POSITIVE_STRING_NUMBER_INVALID_MESSAGE);
+            listErrors.push({
+              ruleName,
+              message: r.message,
+            });
+
+            return;
+          }
+
+          // String positive integer number
+          if (
+            r.isPositiveIntegerStringNumber &&
+            !IS_POSITIVE_INTEGER_STRING_NUMBER_REGEX.test(fieldValue)
+          ) {
+            // tempMessage.push(
+            listErrors.push({
+              ruleName,
+              message: r.message,
+            });
+
+            return;
+            //   IS_POSITIVE_INTEGER_STRING_NUMBER_INVALID_MESSAGE
+            // );
+          }
+
+          // Email
+          if (r.isEmail && !IS_EMAIL_REGEX.test(fieldValue)) {
+            // tempMessage.push(IS_EMAIL_INVALID_MESSAGE);
+            listErrors.push({
+              ruleName,
+              message: r.message,
+            });
+
+            return;
+          }
+
+          // Vietnamese Name
+          if (r.isVietnameseName && !IS_NAME_REGEX.test(fieldValue)) {
+            // tempMessage.push(IS_NAME_INVALID_MESSAGE);
+            listErrors.push({
+              ruleName,
+              message: r.message,
+            });
+
+            return;
+          }
+
+          // String and number without whitespace
+          if (
+            r.isNoSpaceStringAndNumber &&
+            !IS_NOSPACE_STRING_AND_NUMBER_REGEX.test(fieldValue)
+          ) {
+            // tempMessage.push(IS_NOSPACE_STRING_AND_NUMBER_MESSAGE);
+            listErrors.push({
+              ruleName,
+              message: r.message,
+            });
+
+            return;
+          }
+
+          // String and number with
+          if (
+            r.isStringAndNumber &&
+            !IS_STRING_AND_NUMBER_REGEX.test(fieldValue)
+          ) {
+            // tempMessage.push(IS_STRING_AND_NUMBER_MESSAGE);
+            listErrors.push({
+              ruleName,
+              message: r.message,
+            });
+
+            return;
+          }
+
+          if (
+            r.isNoSpaceOnlyAlphabetStringAndNumber &&
+            !IS_NO_SPACE_ALPHABET_STRING_AND_NUMBER_REGEX.test(fieldValue)
+          ) {
+            // tempMessage.push(IS_NO_SPACE_ALPHABET_STRING_AND_NUMBER_MESSAGE);
+            listErrors.push({
+              ruleName,
+              message: r.message,
+            });
+
+            return;
+          }
+          if (
+            r.isOnlyAlphabetStringAndNumber &&
+            !IS_ALPHABET_STRING_AND_NUMBER_REGEX.test(fieldValue)
+          ) {
+            // tempMessage.push(IS_ALPHABET_STRING_AND_NUMBER_MESSAGE);
+            listErrors.push({
+              ruleName,
+              message: r.message,
+            });
+
+            return;
+          }
+          if (
+            r.isNoSpaceAlphabetString &&
+            !IS_NO_SPACE_ALPHABET_STRING_REGEX.test(fieldValue)
+          ) {
+            // tempMessage.push(IS_NO_SPACE_ALPHABET_STRING_MESSAGE);
+            listErrors.push({
+              ruleName,
+              message: r.message,
+            });
+
+            return;
+          }
+        }
+      });
+
+      // console.log("Trigger validate: ", listErrors);
+
+      for (const rAsync of ruleToTask) {
+        await rAsync();
+      }
+
+      setListener({ formItemId, internalErrors: listErrors });
+
+      return listErrors;
+    },
+    deps: [internalRules, value],
+    onError(err) {
+      console.log(err);
+    },
+  });
+
+  // useEffect(() => {
+  //   console.log({ name, errors });
+  // }, [errors]);
+
+  // useEffect(() => {
+  //   console.log({ name, listener });
+  // }, [listener]);
+
+  useEffect(() => {
+    // console.log({ internalInitValue, value, initialValue });
+    // 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);
+        }
+      } else {
+        onChange(internalInitValue);
+      }
+    }
+  }, [internalInitValue]);
+
+  useEffect(() => {
+    if (!listener) {
+      setListener({
+        onChange,
+        emitFocus,
+        isTouched: false,
+        isDirty: false,
+        name,
+        formName: formName || form?.formName || contextForm?.formName,
+        formItemId,
+        onReset,
+      });
+    }
+
+    // return () => {
+    //   console.log("Revoke listener", listener);
+
+    // };
+  }, []);
+
+  useEffect(() => {
+    if (listener) {
+      setListener({
+        formItemId,
+        onChange,
+        name,
+        formName: formName || form?.formName || contextForm?.formName,
+        onReset,
+        isTouched: listener?.isTouched,
+        isDirty: listener?.isDirty,
+      });
+    }
+    const cacheData = getCacheData(
+      formName || form?.formName || contextForm?.formName,
+    );
+
+    // console.log("Get cache Data after list change: ", cacheData);
+
+    if (cacheData) {
+      const getNewDataFromCache = get(cacheData, name);
+
+      // console.log("Init data when change form ite: ", name, cacheData);
+
+      if (!getNewDataFromCache) {
+        onChange(initialValue);
+      } else onChange(getNewDataFromCache);
+    }
+  }, [name, formName || form?.formName || contextForm?.formName]);
+
+  useEffect(() => {
+    return () => {
+      setCleanUpStack({
+        itemKey: formItemId,
+      });
+    };
+  }, []);
+
+  return {
+    value: value as T,
+    onChange,
+    state,
+    errors,
+    onFocus,
+    isDirty: listener?.isDirty,
+  };
+}