react-form-manage 1.0.8-beta.2 → 1.0.8-beta.21

package/src/test/TestDialog.tsx

@@ -0,0 +1,52 @@
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  TextField,
+} from "@mui/material";
+import { Box } from "@mui/system";
+import { useToggle } from "minh-custom-hooks-release";
+import FormItem from "../components/Form/FormItem";
+import TestSelect from "./TestSelect";
+
+type Props = {};
+
+function TestDialog({}: Props) {
+  const { state: open, toggle } = useToggle();
+  return (
+    <Box>
+      <Dialog open={open} onClose={toggle}>
+        <DialogTitle>Test Dialog</DialogTitle>
+        <DialogContent>
+          <DialogContentText>This is a test dialog.</DialogContentText>
+          <FormItem
+            rules={[
+              {
+                handler(value) {
+                  console.log("Validating in dialog: ", value);
+                  return Boolean(value);
+                },
+                message: "Testt",
+              },
+            ]}
+            controlAfterInit
+            initialValue={null}
+            name="testSelectInsideDialog"
+          >
+            <TestSelect />
+          </FormItem>
+          <FormItem controlAfterInit initialValue={""} name="anotherField">
+            <TextField />
+          </FormItem>
+        </DialogContent>
+      </Dialog>
+      <Button variant="contained" onClick={toggle}>
+        Open Test Dialog
+      </Button>
+    </Box>
+  );
+}
+
+export default TestDialog;

package/src/test/TestListener.tsx

@@ -0,0 +1,21 @@
+import { cloneDeep } from "lodash";
+import { useEffect } from "react";
+import { useShallow } from "zustand/react/shallow";
+import { useFormStore } from "../stores/formStore";
+
+type Props = {};
+
+function TestListener({}: Props) {
+  const { listeners } = useFormStore(
+    useShallow((state) => ({
+      listeners: state.listeners,
+    })),
+  );
+
+  useEffect(() => {
+    console.log("Listeners updated: ", cloneDeep(listeners));
+  }, [listeners]);
+  return <div>TestListener</div>;
+}
+
+export default TestListener;

package/src/test/TestSelect.tsx

@@ -0,0 +1,38 @@
+import { Autocomplete, TextField } from "@mui/material";
+
+type Props = {
+  value?: any;
+  onChange?: (value: any) => void;
+};
+
+function TestSelect({ value = null, onChange }: Props) {
+  return (
+    <Autocomplete
+      value={value}
+      onChange={(_, newValue) => {
+        onChange?.(newValue);
+      }}
+      renderInput={(params) => <TextField {...params} />}
+      options={[
+        {
+          value: "option1",
+          label: "Option 1",
+        },
+        {
+          value: "option2",
+          label: "Option 2",
+        },
+      ]}
+      getOptionKey={(o) => {
+        // console.log("Option get key: ", o);
+        return o?.value;
+      }}
+      getOptionLabel={(o) => {
+        // console.log("Option get label: ", o);
+        return o?.label;
+      }}
+    />
+  );
+}
+
+export default TestSelect;

package/src/types/index.ts

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

package/src/types/public.ts

@@ -1,5 +1,5 @@
-import type { GetConstantType } from "./util";
 import type { SUBMIT_STATE } from "../constants/form";
+import type { GetConstantType } from "./util";
 
 export type FormValues<T = any> = T;
 
@@ -67,6 +67,12 @@ export interface UseFormItemReturn<T = any> {
   submitState?: SubmitState;
 }
 
+export interface UseFormItemStateWatchReturn {
+  isTouched?: boolean;
+  isDirty?: boolean;
+  errors: FormFieldError[];
+}
+
 export interface UseFormListProps<T = any> {
   name?: string;
   form?: PublicFormInstance<T>;

package/src/utils/obj.util.ts

@@ -1,22 +1,53 @@
-import { filter, isNil, join } from "lodash";
+import { filter, isNil, isPlainObject, join } from "lodash";
 
-export function getAllNoneObjStringPath(value: any, prevPath: string = "") {
-  if (typeof value === "object") {
-    return Object.keys(value).reduce((prev, cur) => {
+export function getAllNoneObjStringPath(
+  value: any,
+  prevPath: string = "",
+): string[] {
+  // primitive / function / null / undefined => dừng
+  if (
+    value === null ||
+    value === undefined ||
+    typeof value !== "object" ||
+    typeof value === "function"
+  ) {
+    return [prevPath];
+  }
+
+  // array thì đi sâu
+  if (Array.isArray(value)) {
+    return value.reduce((prev: string[], item, index) => {
       return [
         ...prev,
-
         ...getAllNoneObjStringPath(
-          value[cur],
+          item,
           join(
-            filter([prevPath, cur], (v) => !isNil(v) && v !== ""),
-            "."
-          )
+            filter([prevPath, String(index)], (v) => !isNil(v) && v !== ""),
+            ".",
+          ),
         ),
       ];
     }, []);
   }
-  return [prevPath];
+
+  // class instance (non-plain object) => dừng
+  if (!isPlainObject(value)) {
+    return [prevPath];
+  }
+
+  // plain object => đi sâu
+  return Object.keys(value).reduce((prev: string[], cur) => {
+    return [
+      ...prev,
+      ...getAllNoneObjStringPath(
+        value[cur],
+        join(
+          filter([prevPath, cur], (v) => !isNil(v) && v !== ""),
+          ".",
+        ),
+      ),
+    ];
+  }, []);
 }
 
 export function getAllStringPath(value: any, prevPath: string = "") {
@@ -26,14 +57,14 @@ export function getAllStringPath(value: any, prevPath: string = "") {
         ...prev,
         join(
           filter([prevPath, cur], (v) => !isNil(v) && v !== ""),
-          "."
+          ".",
         ),
         ...getAllStringPath(
           value[cur],
           join(
             filter([prevPath, cur], (v) => !isNil(v) && v !== ""),
-            "."
-          )
+            ".",
+          ),
         ),
       ];
     }, []);