fix field type custom
This commit is contained in:
parent
356f1daf42
commit
5b4f3b21c0
|
|
@ -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 (
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
|
|
@ -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"];
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue