From 48b6b284b36f5811e73e2ea3629a3012d3e5d7ff Mon Sep 17 00:00:00 2001
From: rizky <me@rizrmd.com>
Date: Fri, 26 Apr 2024 18:14:13 -0700
Subject: [PATCH] fix

---
 comps/custom/TitleBack.tsx      | 25 +++++++++++++++++--------
 comps/form/Form.tsx             |  3 +--
 comps/form/field/Field.tsx      | 10 +++++++---
 comps/form/field/FieldInput.tsx | 21 +++++++++++++--------
 comps/form/utils/gen-mitem.ts   |  7 ++++++-
 5 files changed, 44 insertions(+), 22 deletions(-)

diff --git a/comps/custom/TitleBack.tsx b/comps/custom/TitleBack.tsx
index da6654a..0990a48 100755
--- a/comps/custom/TitleBack.tsx
+++ b/comps/custom/TitleBack.tsx
@@ -1,24 +1,33 @@
+import { useLocal } from "@/utils/use-local";
 import { icon } from "../icon";
 import { FC } from "react";
 
 export const TitleBack: FC<{
-  label: string;
-  url: string;
-  name_page: string;
-}> = ({ label, url, name_page }) => {
-
+  label: string | (() => Promise<string>);
+  on_back: () => void;
+}> = ({ label, on_back: on_back }) => {
+  const local = useLocal({ label: "" }, async () => {
+    if (typeof label === "function") {
+      local.label = await label();
+    } else {
+      local.label = label;
+    }
+    local.render();
+  });
   return (
-    <div className="c-bg-gray-100 c-px-2 c-w-full c-h-[20px] c-flex  c-py-2">
+    <div className="c-bg-white c-px-2 c-w-full c-min-h-[20px] c-flex c-py-2">
       <div
         className="c-mr-2 hover:c-cursor-pointer"
         onClick={() => {
-          navigate(`${url}`);
+          if (typeof on_back === "function") {
+            on_back();
+          }
         }}
       >
         {icon.left}
       </div>
 
-      <div>{label || "-"}</div>
+      <div>{local.label || "-"}</div>
     </div>
   );
 };
diff --git a/comps/form/Form.tsx b/comps/form/Form.tsx
index b9e0c87..5920983 100755
--- a/comps/form/Form.tsx
+++ b/comps/form/Form.tsx
@@ -1,5 +1,5 @@
+import { getPathname } from "@/exports";
 import { useLocal } from "@/utils/use-local";
-import get from "lodash.get";
 import { FC, useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
 import { Toaster } from "sonner";
@@ -7,7 +7,6 @@ import { FMInternal, FMProps } from "./typings";
 import { editorFormData } from "./utils/ed-data";
 import { formInit } from "./utils/init";
 import { formReload } from "./utils/reload";
-import { getPathname } from "../../..";
 
 const editorFormWidth = {} as Record<string, { w: number; f: any }>;
 
diff --git a/comps/form/field/Field.tsx b/comps/form/field/Field.tsx
index ce29a74..fb0895c 100755
--- a/comps/form/field/Field.tsx
+++ b/comps/form/field/Field.tsx
@@ -4,18 +4,22 @@ import { useField } from "../utils/use-field";
 import { validate } from "../utils/validate";
 import { FieldInput } from "./FieldInput";
 import { Label } from "./Label";
+import { useLocal } from "@/utils/use-local";
 
 export const Field: FC<FieldProp> = (arg) => {
   const { fm } = arg;
   const field = useField(arg);
+  const local = useLocal({ prev_val: fm.data[field.name] });
 
   const mode = fm.props.label_mode;
   const w = field.width;
 
   useEffect(() => {
-    validate(field, fm);
-    fm.events.on_change(field.name, fm.data[field.name]);
-    fm.render();
+    if (local.prev_val !== fm.data[field.name]) {
+      validate(field, fm);
+      fm.events.on_change(field.name, fm.data[field.name]);
+      fm.render();
+    }
   }, [fm.data[field.name]]);
 
   if (field.status === "init" && !isEditor) return null;
diff --git a/comps/form/field/FieldInput.tsx b/comps/form/field/FieldInput.tsx
index 90658a3..12bff24 100755
--- a/comps/form/field/FieldInput.tsx
+++ b/comps/form/field/FieldInput.tsx
@@ -29,9 +29,15 @@ export const FieldInput: FC<{
   );
 
   let found = null as any;
+
   if (childs && childs.length > 0 && field.type !== "custom") {
     for (const child of childs) {
-      const mp = (fieldMapping as any)[field.type];
+      let mp = (fieldMapping as any)[field.type];
+
+      if (!mp) {
+        mp = (fieldMapping as any)["text"];
+      }
+
       if (child.component?.id === mp.id) {
         found = child;
 
@@ -81,13 +87,12 @@ export const FieldInput: FC<{
               border-color: transparent;
             `
           : field.disabled
-            ? "c-border-gray-100"
-            : errors.length > 0
-              ? field.focused
-                ? "c-border-red-600 c-bg-red-50 c-outline c-outline-red-700"
-                : "c-border-red-600 c-bg-red-50"
-              : field.focused &&
-                "c-border-blue-700 c-outline c-outline-blue-700",
+          ? "c-border-gray-100"
+          : errors.length > 0
+          ? field.focused
+            ? "c-border-red-600 c-bg-red-50 c-outline c-outline-red-700"
+            : "c-border-red-600 c-bg-red-50"
+          : field.focused && "c-border-blue-700 c-outline c-outline-blue-700",
         css`
           & > .field-inner {
             min-height: 35px;
diff --git a/comps/form/utils/gen-mitem.ts b/comps/form/utils/gen-mitem.ts
index 8123537..8600ef4 100755
--- a/comps/form/utils/gen-mitem.ts
+++ b/comps/form/utils/gen-mitem.ts
@@ -23,7 +23,12 @@ export const genFieldMitem = (arg: {
         ?.get("content")
         ?.get("childs");
 
-      const component = fieldMapping[field.type as "text"];
+      let component = fieldMapping[field.type as "text"];
+
+      if (!component) {
+        component = fieldMapping["text"];
+      }
+
       if (component) {
         const item = createItem({
           component: component as any,