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

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 };
+}

package/dist/index.d.ts

@@ -1,186 +1,9 @@
-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;
-}
-
-import * as React from "react";
-
-// Generic types for top-level Form provider
-export interface FormProps<TValues = Record<string, any>> {
-  children?: React.ReactNode;
-  formName?: string;
-  initialValues?: Partial<TValues>;
-  onFinish?: (
-    values: Partial<TValues>,
-    allValues?: TValues,
-  ) => void | Promise<void>;
-  onReject?: (errors: any) => void | Promise<void>;
-  onFinally?: (payload: {
-    errorsField: any;
-    values: Partial<TValues>;
-    withUnRegisteredValues: TValues;
-  }) => void | Promise<void>;
-  FormElement?: React.ComponentType<any>;
-  [key: string]: any;
-}
-
-declare function Form<TValues = Record<string, any>>(
-  props: FormProps<TValues>,
-): JSX.Element;
-
-// Standalone generic hooks (also attached to Form as static properties at runtime)
-export function useForm<TValues = Record<string, any>>(
-  formNameOrFormInstance?: any,
-): [any];
-
-export function useWatch<
-  TValues = Record<string, any>,
-  K extends keyof TValues = string & keyof TValues,
->(
-  name: K,
-  formNameOrFormInstance?: any,
-): K extends keyof TValues ? TValues[K] : any;
-
-export function useSubmitDataWatch<TValues = any>(opts: {
-  formNameOrFormInstance?: any;
-  triggerWhenChange?: boolean;
-  mapFn?: (v: any, prev: any) => any;
-}): any;
-
-export function useFormStateWatch<TValues = any>(
-  formNameOrFormInstance?: any,
-): any;
-
-declare namespace Form {
-  // expose same hook names on the Form object
-  export { useForm, useWatch, useSubmitDataWatch, useFormStateWatch };
-}
-
+import Form, { useForm, useWatch, useSubmitDataWatch, useFormStateWatch } from "./providers/Form";
+import FormItem from "./components/Form/FormItem";
+import FormList from "./components/Form/FormList";
+import Input from "./components/Input";
+import InputWrapper from "./components/Form/InputWrapper";
+import useFormItemControl from "./hooks/useFormItemControl";
+import useFormListControl from "./hooks/useFormListControl";
+export { Form, FormItem, FormList, Input, InputWrapper, useFormItemControl, useFormListControl, useForm, useWatch, useSubmitDataWatch, useFormStateWatch, };
 export default Form;
-export { Form };
-
-// FormItem (generic for the field value type)
-export interface FormItemProps<T = any> {
-  children: React.ReactElement;
-  name: string;
-  formName?: string;
-  initialValue?: T;
-  formItemId?: string;
-  rules?: any[];
-  valuePropName?: string;
-  getValueFromEvent?: (e: any) => T;
-  [key: string]: any;
-}
-
-export function FormItem<T = any>(props: FormItemProps<T>): JSX.Element;
-
-// FormList (generic for item shape)
-export interface FormListProps<TItem = any> {
-  name: string;
-  initialValues?: TItem[];
-  form?: any;
-  formName?: string;
-  children: (listFields: any[], actions: any) => React.ReactNode;
-}
-
-export function FormList<TItem = any>(props: FormListProps<TItem>): JSX.Element;
-
-// Input components
-export interface BasicInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-  onChange?: (value: any, ...args: any[]) => void;
-  isValidating?: boolean;
-  [key: string]: any;
-}
-
-// InputWrapper
-export interface InputWrapperProps {
-  children: React.ReactElement;
-  errors?: Array<{ ruleName?: string; message?: string }>;
-  isDirty?: boolean;
-  formState?: any;
-  name?: string;
-  formItemId?: string;
-  [key: string]: any;
-}
-
-export function InputWrapper(props: InputWrapperProps): JSX.Element;
-
-// Cleanup component (internal)
-export function FormCleanUp(): JSX.Element;
-
-// Hooks in src/hooks
-export function useFormItemControl<T = any>(opts: {
-  formName?: string;
-  form?: any;
-  name: string;
-  initialValue?: T;
-  formItemId?: string;
-  rules?: any[];
-  elementRef?: React.RefObject<any>;
-}): {
-  value: T | undefined;
-  onChange: (value: any, options?: any) => void;
-  state: any;
-  errors: any;
-  onFocus: () => void;
-  isDirty?: boolean;
-  onReset?: (value?: any) => void;
-};
-
-export function useFormListControl<TItem = any>(opts: {
-  name: string;
-  form?: any;
-  initialValues?: TItem[];
-  formName?: string;
-}): {
-  listFields: Array<{ name: string; key: string }>;
-  add: (index?: number) => void;
-  remove: (opts: { index?: number; key?: string }) => void;
-  move: (opts: { from?: number; fromKey?: string; to: number }) => void;
-};

package/dist/index.js

@@ -0,0 +1,9 @@
+import Form, { useForm, useWatch, useSubmitDataWatch, useFormStateWatch, } from "./providers/Form";
+import FormItem from "./components/Form/FormItem";
+import FormList from "./components/Form/FormList";
+import Input from "./components/Input";
+import InputWrapper from "./components/Form/InputWrapper";
+import useFormItemControl from "./hooks/useFormItemControl";
+import useFormListControl from "./hooks/useFormListControl";
+export { Form, FormItem, FormList, Input, InputWrapper, useFormItemControl, useFormListControl, useForm, useWatch, useSubmitDataWatch, useFormStateWatch, };
+export default Form;