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

package/dist/hooks/useFormItemControl.js

@@ -0,0 +1,390 @@
+import { get, isNil } from "lodash";
+import { useTaskEffect } from "minh-custom-hooks-release";
+import { useEffect, useMemo } 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";
+const VALID_PREMITIVE_TYPE = ["string", "number", "undefined"];
+export default function useFormItemControl({ formName, form, name, initialValue, formItemId, rules, elementRef, }) {
+    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) => {
+        // 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, options) => {
+        if (options?.notTriggerDirty !== true) {
+            setListener({
+                formItemId,
+                isDirty: true,
+                isTouched: listener?.isTouched,
+            });
+        }
+        setData(formName || form?.formName || contextForm?.formName, name, value);
+    };
+    const onReset = (value) => {
+        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,
+        onChange,
+        state,
+        errors,
+        onFocus,
+        isDirty: listener?.isDirty,
+    };
+}

package/dist/hooks/useFormListControl.js

@@ -0,0 +1,280 @@
+import { cloneDeep, get, isNil } from "lodash";
+import { useEffect, useState } from "react";
+import { v4 } from "uuid";
+import { useShallow } from "zustand/react/shallow";
+import { useFormContext } from "../providers/Form";
+import { useFormCleanUp, useFormStore } from "../stores/formStore";
+export default function useFormListControl({ name, form, initialValues, formName, }) {
+    const contextForm = useFormContext();
+    const getFormValues = useFormStore((state) => state.getFormValues);
+    const [listFormInitValues, setListFormInitValues] = useState(undefined);
+    const { clearCacheData, setCacheData } = useFormStore(useShallow((state) => ({
+        cacheData: state.cacheData,
+        clearCacheData: state.clearCacheData,
+        setCacheData: state.setCacheData,
+    })));
+    const { setCleanUpStack } = useFormCleanUp(useShallow((state) => ({
+        setCleanUpStack: state.setCleanUpStack,
+    })));
+    const { initValue: internalInitValue, formState } = 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}`),
+            formState: get(state.formStates, formName || form?.formName || contextForm?.formName),
+            setInitData: state.setInitData,
+            getFormState: state.getFormState,
+        };
+    }));
+    const [listFields, setListFields] = useState([]);
+    const handleCacheListField = (prev, cur) => {
+        const currentFormValues = cloneDeep(getFormValues(formName || form?.formName || contextForm?.formName));
+        const formDataBeforeChange = get(currentFormValues, name);
+        const mapPrevWithKey = formDataBeforeChange
+            .map((d, index) => {
+            const findPrev = prev.find((p, pIndex) => pIndex === index);
+            if (!findPrev)
+                return undefined;
+            return {
+                key: findPrev.key,
+                value: d,
+            };
+        })
+            .filter(Boolean);
+        const mapCurWithKey = cur.map((c) => mapPrevWithKey.find((m) => m.key === c.key) || c);
+        const getNewValueCache = mapCurWithKey.filter(Boolean).map((c) => c.value);
+        const startRemoveIndex = formDataBeforeChange.length - getNewValueCache.length;
+        // console.log("Before list fields: ", prev);
+        // console.log("After list fields: ", cur);
+        // console.log("Before change arr value: ", formDataBeforeChange);
+        // console.log("Mapping prev value with prev fields: ", mapPrevWithKey);
+        // console.log("Mapping Cur value with prev fields: ", mapCurWithKey);
+        // console.log("After change arr value: ", getNewValueCache);
+        // Nếu số phần tử trước khi thay đổi mảng lớn hơn thì đẩy 2 phần tử còn lại vào clean up stack để clear
+        if (startRemoveIndex > 0) {
+            Array.from(Array(startRemoveIndex))
+                .map((_, index) => {
+                return getNewValueCache.length + index;
+            })
+                .forEach((index) => {
+                // console.log("Data for cleanup arr element: ", {
+                //   formName: formName || form?.formName || contextForm?.formName,
+                //   name: `${name}.${index}`,
+                //   type: "array",
+                // });
+                setCleanUpStack({
+                    formName: formName || form?.formName || contextForm?.formName,
+                    name: `${name}.${index}`,
+                    type: "array",
+                });
+            });
+        }
+        // console.log({ getNewValueCache });
+        setCacheData(formName || form?.formName || contextForm?.formName, name, getNewValueCache);
+    };
+    const add = (index) => {
+        setListFields((prev) => {
+            if (index > prev.length)
+                return prev;
+            if (index < 0)
+                return prev;
+            if (index === prev.length) {
+                const newName = `${name}.${prev.length}`;
+                const newKey = v4();
+                const result = [
+                    ...prev,
+                    {
+                        name: newName,
+                        key: newKey,
+                    },
+                ];
+                return result;
+            }
+            const clonePrev = [...prev];
+            const result = clonePrev
+                .reduce((prev, cur, curIndex) => {
+                const newKey = v4();
+                if (curIndex === index)
+                    return [
+                        ...prev,
+                        {
+                            key: newKey,
+                        },
+                        cur,
+                    ];
+                return [...prev, cur];
+            }, [])
+                .map((r, index) => ({
+                name: `${name}.${index}`,
+                key: r.key,
+            }));
+            handleCacheListField(prev, result);
+            return result;
+        });
+    };
+    const remove = ({ index, key }) => {
+        setListFields((prev) => {
+            if (!isNil(key)) {
+                const clonePrev = [...prev];
+                const removedItem = clonePrev.filter((d) => d.key !== key);
+                console.log("Remove data: ", removedItem);
+                const result = removedItem.map((r, index) => ({
+                    name: `${name}.${index}`,
+                    key: r.key,
+                }));
+                handleCacheListField(prev, result);
+                return result;
+            }
+            if (!isNil(index)) {
+                if (index > prev.length - 1 || index < 0)
+                    return prev;
+                const clonePrev = [...prev];
+                clonePrev.splice(index, 1);
+                const result = clonePrev.map((r, index) => ({
+                    name: `${name}.${index}`,
+                    key: r.key,
+                }));
+                handleCacheListField(prev, result);
+                return result;
+            }
+            return prev;
+        });
+    };
+    const move = ({ from, fromKey, to }) => {
+        setListFields((prev) => {
+            console.log("move list item: ", { from, to });
+            if (from >= listFields.length ||
+                from < 0 ||
+                to >= listFields.length ||
+                to < 0 ||
+                from === to)
+                return prev;
+            console.log("Trigger move item: ");
+            if (!isNil(fromKey)) {
+                const findItemIndex = prev.findIndex((p) => p.key === fromKey);
+                if (findItemIndex < 0)
+                    return prev;
+                const moveItem = cloneDeep(listFields[findItemIndex]);
+                const result = prev
+                    .reduce((prev, cur, curIndex) => {
+                    if (findItemIndex === curIndex)
+                        return [...prev];
+                    if (to === curIndex) {
+                        if (findItemIndex > to)
+                            return [...prev, moveItem, cur];
+                        else
+                            return [...prev, cur, moveItem];
+                    }
+                    else {
+                        return [...prev, cur];
+                    }
+                }, [])
+                    .map((i, index) => ({
+                    key: i.key,
+                    name: `${name}.${index}`,
+                }));
+                handleCacheListField(prev, result);
+                return result;
+            }
+            else if (!isNil(from)) {
+                console.log("Trigger from index: ");
+                const moveItem = cloneDeep(listFields[from]);
+                const result = prev
+                    .reduce((prev, cur, curIndex) => {
+                    if (from === curIndex)
+                        return [...prev];
+                    if (to === curIndex) {
+                        if (from > to)
+                            return [...prev, moveItem, cur];
+                        else
+                            return [...prev, cur, moveItem];
+                    }
+                    else {
+                        return [...prev, cur];
+                    }
+                }, [])
+                    .map((i, index) => ({
+                    key: i.key,
+                    name: `${name}.${index}`,
+                }));
+                console.log({ result });
+                handleCacheListField(prev, result);
+                return result;
+            }
+            return prev;
+        });
+    };
+    useEffect(() => {
+        console.log("Trigger init", formState?.isInitied, internalInitValue);
+        if (formState?.isInitied) {
+            if (Array.isArray(listFormInitValues)) {
+                const result = listFormInitValues?.map((_, i) => {
+                    const itemName = `${name}.${i}`;
+                    const key = v4();
+                    return {
+                        key,
+                        name: itemName,
+                    };
+                });
+                console.log("Get local init values: ", listFormInitValues, result);
+                setListFields(result);
+                setCacheData(formName || form?.formName || contextForm?.formName, name, listFormInitValues);
+                return;
+            }
+            if (Array.isArray(internalInitValue)) {
+                const result = internalInitValue.map((_, i) => {
+                    const itemName = `${name}.${i}`;
+                    const key = v4();
+                    return {
+                        key,
+                        name: itemName,
+                    };
+                });
+                // console.log("Get form init values: ", internalInitValue, result);
+                setListFields(result);
+                setListFormInitValues(internalInitValue);
+                return;
+            }
+            // console.log({ initialValues });
+            // console.log("After init: ", { result: cloneDeep(result) });
+            if (Array.isArray(initialValues)) {
+                const result = initialValues.map((_, i) => {
+                    const itemName = `${name}.${i}`;
+                    const key = v4();
+                    return {
+                        key,
+                        name: itemName,
+                    };
+                });
+                if (initialValues) {
+                    setCacheData(formName || form?.formName || contextForm?.formName, name, initialValues);
+                }
+                setListFields(result);
+                setListFormInitValues(initialValues);
+                // console.log("Get form init values: ", internalInitValue, result);
+                return;
+            }
+        }
+    }, [formState?.isInitied]);
+    // useEffect(() => {
+    //   console.log("Show form list init values: ", { internalInitValue });
+    // }, [internalInitValue]);
+    // useEffect(() => {
+    //   console.log("List fields update: ", listFields);
+    // }, [listFields]);
+    useEffect(() => {
+        // console.log({ listFields });
+        return () => {
+            // console.log("Cleanup listfield change");
+            clearCacheData();
+        };
+    }, [listFields]);
+    return { listFields, move, add, remove };
+}