diff --git a/comps/form/typings.ts b/comps/form/typings.ts index 0a0f382..42011e4 100755 --- a/comps/form/typings.ts +++ b/comps/form/typings.ts @@ -28,12 +28,12 @@ export type FMProps = { }; export type FieldProp = { - name: string; - label: string; + name: string | (() => string); + label: string | (() => string); desc?: string; props?: any; fm: FMLocal; - type: "text" | "relation" | "switch" | "input" | "single-option"| "multi-option"; + type: "text" | "relation" | "switch" | "input" | "single-option" | "multi-option"; // | "number" // | "textarea" // | "dropdown" @@ -45,7 +45,7 @@ export type FieldProp = { // | "slider" // | "master-link" // | "custom"; - required: "y" | "n"; + required: ("y" | "n") | (() => "y" | "n"); required_msg: (name: string) => string; options: FieldOptions; on_change: (arg: { value: any }) => void | Promise; @@ -104,12 +104,6 @@ export type FMInternal = { }; export type FMLocal = FMInternal & { render: () => void }; -type FieldInternalProp = { - text: PropTypeText; - number: PropTypeText; - relation: PropTypeRelation; - switch: PropTypeSwitch; -}; export type FieldInternal = { status: "init" | "loading" | "ready"; @@ -130,7 +124,7 @@ export type FieldInternal = { input: Record & { render: () => void; }; - prop?: FieldInternalProp[T]; + prop?: any; }; export type FieldLocal = FieldInternal & { render: () => void; diff --git a/comps/form/utils/use-field.tsx b/comps/form/utils/use-field.tsx index 15378ef..ffaefc1 100755 --- a/comps/form/utils/use-field.tsx +++ b/comps/form/utils/use-field.tsx @@ -11,16 +11,20 @@ export const useField = (arg: FieldProp) => { input: {}, } as any); + const name = typeof arg.name === 'string' ? arg.name : arg.name(); + const label = typeof arg.label === 'string' ? arg.label : arg.label(); + const required = typeof arg.required === 'string' ? arg.required : arg.required(); + const update_field = { - name: arg.name.replace(/\s*/gi, ""), - label: arg.label, + name: name.replace(/\s*/gi, ""), + label: label, type: arg.type, desc: arg.desc, prefix: arg.prefix, suffix: arg.suffix, width: arg.width, custom: arg.custom, - required: arg.required === "y", + required: required === "y", required_msg: arg.required_msg, disabled: arg.disabled === "y", }; @@ -33,9 +37,9 @@ export const useField = (arg: FieldProp) => { const fm = arg.fm; useEffect(() => { - if (field.status === "init" || !fm.fields[arg.name]) { + if (field.status === "init" || !fm.fields[name]) { field.status = "ready"; - fm.fields[arg.name] = field; + fm.fields[name] = field; field.render(); } }, []);