From a318a9a7dcda87c6004883201d21f71a60ea906b Mon Sep 17 00:00:00 2001
From: rizky <rizky@avolut.com>
Date: Fri, 12 Apr 2024 03:16:39 +0000
Subject: [PATCH] fix form size

---
 comps/custom/Breadcrumb.tsx          |  1 +
 comps/form/Form.tsx                  | 28 ++++++++++++++++++++++------
 comps/form/field/input/InputText.tsx |  2 +-
 comps/form/utils/use-field.tsx       | 14 ++++++++++----
 comps/md/MDTab.tsx                   |  5 ++++-
 5 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/comps/custom/Breadcrumb.tsx b/comps/custom/Breadcrumb.tsx
index dbdff12..80a0f97 100755
--- a/comps/custom/Breadcrumb.tsx
+++ b/comps/custom/Breadcrumb.tsx
@@ -47,6 +47,7 @@ export const Breadcrumb: FC<BreadcrumbProps> = (_arg) => {
     })();
   }, [on_load]);
 
+
   return (
     <div
       className={cx(
diff --git a/comps/form/Form.tsx b/comps/form/Form.tsx
index c3d06ef..ecfbf5d 100755
--- a/comps/form/Form.tsx
+++ b/comps/form/Form.tsx
@@ -9,6 +9,8 @@ import get from "lodash.get";
 import { Field } from "./field/Field";
 import { getProp } from "../../..";
 
+const editorFormWidth = {} as Record<string, { w: number; f: any }>;
+
 export const Form: FC<FMProps> = (props) => {
   const { PassProp, body } = props;
   const fm = useLocal<FMInternal>({
@@ -32,9 +34,13 @@ export const Form: FC<FMProps> = (props) => {
     },
     props: {} as any,
     size: {
-      width: 0,
+      width: editorFormWidth[props.item.id]
+        ? editorFormWidth[props.item.id].w
+        : 0,
       height: 0,
-      field: "full",
+      field: editorFormWidth[props.item.id]
+        ? editorFormWidth[props.item.id].f
+        : "full",
     },
   });
 
@@ -44,7 +50,8 @@ export const Form: FC<FMProps> = (props) => {
       if (e.contentRect.width > 0) {
         fm.size.height = e.contentRect.height;
         fm.size.width = e.contentRect.width;
-        if (fm.status === "ready") fm.status = "resizing";
+
+        if (fm.status === "ready" && !isEditor) fm.status = "resizing";
 
         if (fm.props.layout === "auto") {
           if (fm.size.width > 650) {
@@ -57,6 +64,13 @@ export const Form: FC<FMProps> = (props) => {
           if (fm.props.layout === "2-col") fm.size.field = "half";
         }
 
+        if (isEditor) {
+          editorFormWidth[props.item.id] = {
+            w: fm.size.width,
+            f: fm.size.field,
+          };
+        }
+
         fm.render();
       }
     }),
@@ -87,9 +101,11 @@ export const Form: FC<FMProps> = (props) => {
         fm.submit();
       }}
       ref={(el) => {
-        if (!ref.current.el && el) {
-          ref.current.el = el;
-          ref.current.rob.observe(el);
+        if (el) {
+          if (!ref.current.el) {
+            ref.current.el = el;
+            ref.current.rob.observe(el);
+          }
         }
       }}
       className={cx(
diff --git a/comps/form/field/input/InputText.tsx b/comps/form/field/input/InputText.tsx
index 45b963f..74672a3 100755
--- a/comps/form/field/input/InputText.tsx
+++ b/comps/form/field/input/InputText.tsx
@@ -13,7 +13,7 @@ export const InputText: FC<{ field: FieldLocal; fm: FMLocal }> = ({
         fm.data[field.name] = ev.currentTarget.value;
         fm.render();
       }}
-      value={value}
+      value={value || ''}
       disabled={field.disabled}
       className="c-flex-1 c-rounded c-bg-transparent c-outline-none c-px-2 c-text-sm"
       spellCheck={false}
diff --git a/comps/form/utils/use-field.tsx b/comps/form/utils/use-field.tsx
index 474a1af..6f3cfbf 100755
--- a/comps/form/utils/use-field.tsx
+++ b/comps/form/utils/use-field.tsx
@@ -5,6 +5,12 @@ import { useEffect } from "react";
 export const useField = (arg: FieldProp) => {
   const field = useLocal<FieldInternal>({
     status: "init",
+    Child: () => {
+      return <arg.PassProp>{arg.child}</arg.PassProp>;
+    },
+  } as any);
+
+  const update_field = {
     name: arg.name,
     label: arg.label,
     type: arg.type,
@@ -16,10 +22,10 @@ export const useField = (arg: FieldProp) => {
     required_msg: arg.required_msg,
     focused: false,
     disabled: arg.disabled === "y",
-    Child: () => {
-      return <arg.PassProp>{arg.child}</arg.PassProp>;
-    },
-  });
+  };
+  for (const [k, v] of Object.entries(update_field)) {
+    (field as any)[k] = v;
+  }
 
   const fm = arg.fm;
 
diff --git a/comps/md/MDTab.tsx b/comps/md/MDTab.tsx
index 25edd27..456d44d 100755
--- a/comps/md/MDTab.tsx
+++ b/comps/md/MDTab.tsx
@@ -12,7 +12,10 @@ export const should_show_tab = (md: MDLocal) => {
 export const MDTab: FC<{ md: MDLocal; mdr: MDRef }> = ({ md, mdr }) => {
   const detail = md.childs[md.tab.active];
   const PassProp = mdr.PassProp;
-  if (!detail) return null;
+  if (!detail) {
+    return null;
+  }
+
 
   return (
     <>