From 5b4f3b21c003dff30ffc32baaed9045a7414b0ca Mon Sep 17 00:00:00 2001
From: rizrmd <rizky@avolut.com>
Date: Fri, 17 May 2024 01:28:10 -0700
Subject: [PATCH] fix field type custom

---
 comps/form/field/Field.tsx      | 11 ++++++-----
 comps/form/field/FieldInput.tsx |  9 ++++-----
 comps/form/typings.ts           |  5 +++--
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/comps/form/field/Field.tsx b/comps/form/field/Field.tsx
index aa78974..b212b92 100755
--- a/comps/form/field/Field.tsx
+++ b/comps/form/field/Field.tsx
@@ -9,22 +9,23 @@ 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 name = typeof field.name === 'function' ? field.name() : field.name;
+  const local = useLocal({ prev_val: fm.data[name] });
 
   const mode = fm.props.label_mode;
   const w = field.width;
 
   useEffect(() => {
-    if (local.prev_val !== fm.data[field.name]) {
+    if (local.prev_val !== fm.data[name]) {
       validate(field, fm);
-      fm.events.on_change(field.name, fm.data[field.name]);
+      fm.events.on_change(name, fm.data[name]);
       fm.render();
     }
-  }, [fm.data[field.name]]);
+  }, [fm.data[name]]);
 
   if (field.status === "init" && !isEditor) return null;
 
-  const errors = fm.error.get(field.name);
+  const errors = fm.error.get(name);
   const props = { ...arg.props };
   delete props.className;
   return (
diff --git a/comps/form/field/FieldInput.tsx b/comps/form/field/FieldInput.tsx
index 2caa645..2d0431c 100755
--- a/comps/form/field/FieldInput.tsx
+++ b/comps/form/field/FieldInput.tsx
@@ -1,7 +1,7 @@
 import { createItem } from "@/gen/utils";
 import get from "lodash.get";
 import { FC, isValidElement, useEffect } from "react";
-import { FMLocal, FieldLocal, FieldProp } from "../typings";
+import { FMLocal, FieldLocal, FieldProp, FieldTypeCustom } from "../typings";
 import { genFieldMitem, updateFieldMItem } from "../utils/gen-mitem";
 import { fieldMapping } from "./mapping";
 import { FieldLoading } from "./raw/FieldLoading";
@@ -31,8 +31,7 @@ export const FieldInput: FC<{
   const suffix = typeof field.suffix === "function" ? field.suffix() : typeof field.suffix === "string" ? field.prefix : null;
   const name = typeof field.name === 'function' ? field.name() : field.name;
   const errors = fm.error.get(name);
-  const type_field = arg.type; // tipe field
-  const sub_type_field = arg.sub_type;
+  let type_field = typeof arg.type === 'function' ? arg.type() : arg.type; // tipe field
 
   return (
     <div
@@ -84,14 +83,14 @@ export const FieldInput: FC<{
             <FieldTypeText
               field={field}
               fm={fm}
-              prop={{ type: arg.type, sub_type: arg.sub_type, prefix, suffix } as PropTypeText}
+              prop={{ type: type_field as any, sub_type: arg.sub_type, prefix, suffix } as PropTypeText}
             />
           ) : ["single-option"].includes(type_field) ? (
             <SingleOption arg={arg} field={field} fm={fm} />
           ) : ["multi-option"].includes(type_field) ? (
             <MultiOption arg={arg} field={field} fm={fm} />
           ) : (
-            <>{isValidElement(field.type) && field.type}</>
+            <>{isValidElement(type_field) && type_field}</>
           )}
         </div>
       )}
diff --git a/comps/form/typings.ts b/comps/form/typings.ts
index 42011e4..a89d144 100755
--- a/comps/form/typings.ts
+++ b/comps/form/typings.ts
@@ -27,13 +27,14 @@ export type FMProps = {
   on_load_deps?: any[];
 };
 
+type FieldType = "-" | "relation" | "switch" | "input" | "single-option" | "multi-option";
 export type FieldProp = {
   name: string | (() => string);
   label: string | (() => string);
   desc?: string;
   props?: any;
   fm: FMLocal;
-  type: "text" | "relation" | "switch" | "input" | "single-option" | "multi-option";
+  type: FieldType | (() => FieldType);
   // | "number"
   // | "textarea"
   // | "dropdown"
@@ -108,7 +109,7 @@ export type FMLocal = FMInternal & { render: () => void };
 export type FieldInternal<T extends FieldProp["type"]> = {
   status: "init" | "loading" | "ready";
   name: FieldProp["name"];
-  type: T;
+  type: T | (() => T);
   label: FieldProp["label"];
   desc: FieldProp["desc"];
   prefix: FieldProp["prefix"];