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

package/src/hooks/useFormListControl.ts

@@ -0,0 +1,378 @@
+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";
+
+import type { FormInstance } from "../stores/formStore";
+
+type ListField = { name: string; key: string };
+
+interface UseFormListControlProps {
+  name?: string;
+  form?: FormInstance;
+  initialValues?: any[];
+  formName?: string;
+}
+
+interface UseFormListControlReturn {
+  listFields: ListField[];
+  move: (opts: { from?: number; fromKey?: string; to: number }) => void;
+  add: (index: number) => void;
+  remove: (opts: { index?: number; key?: string }) => void;
+}
+
+export default function useFormListControl<T = any>({
+  name,
+  form,
+  initialValues,
+  formName,
+}: UseFormListControlProps): UseFormListControlReturn {
+  const contextForm = useFormContext();
+  const getFormValues = useFormStore((state) => state.getFormValues);
+  const [listFormInitValues, setListFormInitValues] = useState<any[] | undefined>(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<ListField[]>([]);
+
+  const handleCacheListField = (prev: ListField[], cur: ListField[]) => {
+    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: number) => {
+    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 }: { index?: number; key?: string }) => {
+    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 }: { from?: number; fromKey?: string; to: number }) => {
+    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 as any);
+
+        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 as any);
+
+        // 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/src/index.css

@@ -0,0 +1,68 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/src/index.ts

@@ -0,0 +1,30 @@
+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;

package/src/main.tsx

@@ -0,0 +1,10 @@
+import { createRoot } from "react-dom/client";
+import App from "./App";
+import "./index.css";
+
+const container = document.getElementById("root");
+if (!container) {
+  throw new Error("Root container missing");
+}
+
+createRoot(container).render(<App />);