diff --git a/comps/form/Dropdown/relation.tsx b/comps/form/Dropdown/relation.tsx index 6cd4540..eff986c 100755 --- a/comps/form/Dropdown/relation.tsx +++ b/comps/form/Dropdown/relation.tsx @@ -32,7 +32,7 @@ export const Relation: FC = ({ input: "", label: "", filter: "", - pk: "", + pk_field: "", }); useEffect(() => { @@ -42,11 +42,11 @@ export const Relation: FC = ({ local.render(); const table_fn = (db as any)[relation.table]; const select = {} as any; - local.pk = ""; + local.pk_field = ""; for (const f of relation.fields) { if (f.startsWith("::")) { select[f.substring(2)] = true; - local.pk = f.substring(2); + local.pk_field = f.substring(2); } else { select[f] = true; } @@ -62,13 +62,22 @@ export const Relation: FC = ({ local.list = list.map((item: any) => { let label = []; for (const [k, v] of Object.entries(item)) { - if (k !== local.pk) label.push(v); + if (k !== local.pk_field) label.push(v); } - return { value: item[local.pk], label: label.join(" - ") }; + return { value: item[local.pk_field], label: label.join(" - ") }; }); } - const found = local.list.find((e) => e.value === value); + const found = local.list.find((e) => { + if (typeof value === "object") { + if (value["connect"]) { + return e.value === value["connect"][local.pk_field]; + } + return e.value === value[local.pk_field]; + } else { + return e.value === value; + } + }); if (found) { local.label = found.label; } @@ -133,7 +142,9 @@ export const Relation: FC = ({ onClick={() => { if (form) { local.open = false; - form.hook.setValue(name, item.value); + form.hook.setValue(name, { + connect: { [local.pk_field]: item.value }, + }); form.render(); } }} diff --git a/comps/form/Field.tsx b/comps/form/Field.tsx index 1999d56..2f48759 100755 --- a/comps/form/Field.tsx +++ b/comps/form/Field.tsx @@ -13,13 +13,13 @@ import { Input } from "../ui/input"; import { Textarea } from "../ui/textarea"; import { Date } from "./Date"; import { Datetime } from "./Datetime"; +import { Dropdown } from "./Dropdown"; +import { Relation } from "./Dropdown/relation"; import { InputMoney } from "./InputMoney"; import { Radio } from "./Radio"; import { SliderOptions } from "./Slider/types"; -import { FormHook, modify } from "./utils/utils"; -import { Dropdown } from "./Dropdown"; import { FieldOptions } from "./type"; -import { Relation } from "./Dropdown/relation"; +import { FormHook, modify } from "./utils/utils"; export const Field: FC<{ name: string; @@ -123,6 +123,30 @@ export const Field: FC<{ } }, [value]); + const inputKeyDown = (e: any) => { + if (e.key === "Enter" && form?.ref) { + form.submit(); + } + }; + + const onChange = (e: any) => { + form?.hook.setValue(name, e.currentTarget.value); + form?.render(); + }; + + if (form) { + form.label[name] = label; + if (required === "y") { + form.validation[name] = "required"; + + if (value) { + delete form.hook.formState.errors[name]; + } + } else { + delete form.validation[name]; + } + } + return ( <> ( -
+
{label} {required === "y" && (

*

@@ -196,15 +220,11 @@ export const Field: FC<{ { - on_change({ value: e.currentTarget.value }); - } - : undefined - } + onChange={onChange} + onKeyDown={inputKeyDown} > {suffix || "-"} @@ -214,18 +234,20 @@ export const Field: FC<{ { - on_change({ value: e.currentTarget.value }); - } - : undefined - } + spellCheck={false} + placeholder={placeholder} + onKeyDown={inputKeyDown} + onChange={onChange} /> ))} {type === "textarea" && ( -