midsuit
/
prasi-lib
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix field type custom

This commit is contained in:
rizrmd 2024-05-17 01:28:10 -07:00
parent 356f1daf42
commit 5b4f3b21c0
3 changed files with 13 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
comps/form/field/Field.tsx
View File

@ -9,22 +9,23 @@ import { useLocal } from "@/utils/use-local";
export const Field: FC<FieldProp> = (arg) => { export const Field: FC<FieldProp> = (arg) => {
const { fm } = arg; const { fm } = arg;
const field = useField(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 mode = fm.props.label_mode;
const w = field.width; const w = field.width;
useEffect(() => { useEffect(() => {
if (local.prev_val !== fm.data[field.name]) { if (local.prev_val !== fm.data[name]) {
validate(field, fm); validate(field, fm);
fm.events.on_change(field.name, fm.data[field.name]); fm.events.on_change(name, fm.data[name]);
fm.render(); fm.render();
} }
}, [fm.data[field.name]]); }, [fm.data[name]]);
if (field.status === "init" && !isEditor) return null; if (field.status === "init" && !isEditor) return null;
const errors = fm.error.get(field.name); const errors = fm.error.get(name);
const props = { ...arg.props }; const props = { ...arg.props };
delete props.className; delete props.className;
return ( return (

9
comps/form/field/FieldInput.tsx
View File

@ -1,7 +1,7 @@
import { createItem } from "@/gen/utils"; import { createItem } from "@/gen/utils";
import get from "lodash.get"; import get from "lodash.get";
import { FC, isValidElement, useEffect } from "react"; 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 { genFieldMitem, updateFieldMItem } from "../utils/gen-mitem";
import { fieldMapping } from "./mapping"; import { fieldMapping } from "./mapping";
import { FieldLoading } from "./raw/FieldLoading"; 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 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 name = typeof field.name === 'function' ? field.name() : field.name;
const errors = fm.error.get(name); const errors = fm.error.get(name);
const type_field = arg.type; // tipe field let type_field = typeof arg.type === 'function' ? arg.type() : arg.type; // tipe field
const sub_type_field = arg.sub_type;
return ( return (
<div <div
@ -84,14 +83,14 @@ export const FieldInput: FC<{
<FieldTypeText <FieldTypeText
field={field} field={field}
fm={fm} 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) ? ( ) : ["single-option"].includes(type_field) ? (
<SingleOption arg={arg} field={field} fm={fm} /> <SingleOption arg={arg} field={field} fm={fm} />
) : ["multi-option"].includes(type_field) ? ( ) : ["multi-option"].includes(type_field) ? (
<MultiOption arg={arg} field={field} fm={fm} /> <MultiOption arg={arg} field={field} fm={fm} />
) : ( ) : (
<>{isValidElement(field.type) && field.type}</> <>{isValidElement(type_field) && type_field}</>
)} )}
</div> </div>
)} )}

5
comps/form/typings.ts
View File

@ -27,13 +27,14 @@ export type FMProps = {
on_load_deps?: any[]; on_load_deps?: any[];
}; };
type FieldType = "-" | "relation" | "switch" | "input" | "single-option" | "multi-option";
export type FieldProp = { export type FieldProp = {
name: string | (() => string); name: string | (() => string);
label: string | (() => string); label: string | (() => string);
desc?: string; desc?: string;
props?: any; props?: any;
fm: FMLocal; fm: FMLocal;
type: "text" | "relation" | "switch" | "input" | "single-option" | "multi-option"; type: FieldType | (() => FieldType);
// | "number" // | "number"
// | "textarea" // | "textarea"
// | "dropdown" // | "dropdown"
@ -108,7 +109,7 @@ export type FMLocal = FMInternal & { render: () => void };
export type FieldInternal<T extends FieldProp["type"]> = { export type FieldInternal<T extends FieldProp["type"]> = {
status: "init" | "loading" | "ready"; status: "init" | "loading" | "ready";
name: FieldProp["name"]; name: FieldProp["name"];
type: T; type: T | (() => T);
label: FieldProp["label"]; label: FieldProp["label"];
desc: FieldProp["desc"]; desc: FieldProp["desc"];
prefix: FieldProp["prefix"]; prefix: FieldProp["prefix"];