From 70a44226009d861aa6ad0c77a56f5d46aca90f09 Mon Sep 17 00:00:00 2001 From: rizky Date: Tue, 9 Apr 2024 19:40:08 -0700 Subject: [PATCH] fix --- comps/form/Form.tsx | 1 + comps/form/field/Field.tsx | 23 +++++++++++++++ comps/form/field/Input.tsx | 8 ++++++ comps/form/field/Label.tsx | 6 ++++ comps/form/fields/Field.tsx | 6 ---- comps/form/typings.ts | 44 ++++++++++++++++++++++++++--- comps/form/utils/create-field.tsx | 31 ++++++++++++++++++++ comps/form/utils/ed-data.ts | 5 +++- comps/form/utils/init.tsx | 47 +++++++++++++++++++++---------- data.ts | 2 +- 10 files changed, 146 insertions(+), 27 deletions(-) create mode 100755 comps/form/field/Field.tsx create mode 100755 comps/form/field/Input.tsx create mode 100755 comps/form/field/Label.tsx delete mode 100755 comps/form/fields/Field.tsx create mode 100755 comps/form/utils/create-field.tsx diff --git a/comps/form/Form.tsx b/comps/form/Form.tsx index 71770d0..e29ff82 100755 --- a/comps/form/Form.tsx +++ b/comps/form/Form.tsx @@ -14,6 +14,7 @@ export const Form: FC = (props) => { reload: async () => { formReload(fm); }, + fields: {}, submit: null as any, error: {} as any, internal: { diff --git a/comps/form/field/Field.tsx b/comps/form/field/Field.tsx new file mode 100755 index 0000000..1dc9d11 --- /dev/null +++ b/comps/form/field/Field.tsx @@ -0,0 +1,23 @@ +import { FC } from "react"; +import { FieldProp } from "../typings"; +import { createField } from "../utils/create-field"; +import { Label } from "./Label"; + +export const Field: FC = (arg) => { + const field = createField(arg); + + if (field.status === "init") return null; + + const mode = field.label_mode; + return ( +
+ {mode !== "hidden" &&
+ ); +}; diff --git a/comps/form/field/Input.tsx b/comps/form/field/Input.tsx new file mode 100755 index 0000000..eefd824 --- /dev/null +++ b/comps/form/field/Input.tsx @@ -0,0 +1,8 @@ +import { FMLocal, FieldLocal } from "../typings"; + +export const FieldInput: FC<{ field: FieldLocal; fm: FMLocal }> = ({ + field, + fm, +}) => { + return <>; +}; diff --git a/comps/form/field/Label.tsx b/comps/form/field/Label.tsx new file mode 100755 index 0000000..cabd843 --- /dev/null +++ b/comps/form/field/Label.tsx @@ -0,0 +1,6 @@ +import { FC } from "react"; +import { FieldLocal } from "../typings"; + +export const Label: FC<{ field: FieldLocal }> = ({ field }) => { + return
{field.label}
; +}; diff --git a/comps/form/fields/Field.tsx b/comps/form/fields/Field.tsx deleted file mode 100755 index 80e8398..0000000 --- a/comps/form/fields/Field.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import { FC } from "react"; -import { FieldProp } from "../typings"; - -export const Field: FC = ({ fm }) => { - return <>; -}; diff --git a/comps/form/typings.ts b/comps/form/typings.ts index 334ecf4..6b46cfb 100755 --- a/comps/form/typings.ts +++ b/comps/form/typings.ts @@ -1,6 +1,8 @@ +import { ReactNode } from "react"; import { SliderOptions } from "../form-old/Slider/types"; import { FieldOptions } from "../form-old/type"; import { FormHook } from "../form-old/utils/utils"; +import { editorFormData } from "./utils/ed-data"; export type FMProps = { on_init: (arg: { fm: FMLocal; submit: any; reload: any }) => any; @@ -12,12 +14,15 @@ export type FMProps = { props: any; sonar: "on" | "off"; layout: "auto" | "1-col" | "2-col"; + meta: any; + item: any; }; export type FieldProp = { name: string; label: string; desc?: string; + label_mode: "vertical" | "horizontal" | "hidden"; fm: FMLocal; type: | "text" @@ -40,6 +45,7 @@ export type FieldProp = { custom: "y" | "n"; child: any; selection: "single" | "multi"; + prefix: any; suffix: any; placeholder?: any; rel_table: string; @@ -52,6 +58,7 @@ export type FMInternal = { data: any; reload: () => Promise; submit: () => Promise; + fields: Record; error: { list: { name: string; error: string }[]; set: (name: string, error: string) => void; @@ -69,11 +76,40 @@ export type FMInternal = { }; export type FMLocal = FMInternal & { render: () => void }; -export const formType = (active: { item_id: string }) => { - console.log("auoaou", typeof active); - return `{ +export type FieldInternal = { + status: "init" | "loading" | "ready"; + name: FieldProp["name"]; + type: FieldProp["type"]; + label: FieldProp["label"]; + desc: FieldProp["desc"]; + prefix: FieldProp["prefix"]; + suffix: FieldProp["suffix"]; + label_mode: FieldProp["label_mode"]; + Child: () => ReactNode; +}; +export type FieldLocal = FieldInternal & { render: () => void }; + +export const formType = (active: { item_id: string }, meta: any) => { + let data = "null as any"; + + const cache = editorFormData[active.item_id]; + if (cache && cache.data) { + data = JSON.stringify(cache.data); + } else { + const m = meta[active.item_id]; + if (m && m.parent && m.parent.id) { + const cache = editorFormData[m.parent.id]; + if (cache && cache.data) { + data = JSON.stringify(cache.data); + } + } + } + + return ` + const ___data = ${data}; + const fm = null as unknown as { status: "init" | "loading" | "saving" | "ready"; - data: any; + data: typeof ___data; reload: () => Promise; submit: () => Promise; error: { diff --git a/comps/form/utils/create-field.tsx b/comps/form/utils/create-field.tsx new file mode 100755 index 0000000..05482bd --- /dev/null +++ b/comps/form/utils/create-field.tsx @@ -0,0 +1,31 @@ +import { useLocal } from "@/utils/use-local"; +import { FMLocal, FieldInternal, FieldProp } from "../typings"; +import { useEffect } from "react"; + +export const createField = (arg: FieldProp) => { + const field = useLocal({ + status: "init", + name: arg.name, + label: arg.label, + type: arg.type, + desc: arg.desc, + prefix: arg.prefix, + suffix: arg.suffix, + label_mode: arg.label_mode, + Child: () => { + return {arg.child}; + }, + }); + + const fm = arg.fm; + + useEffect(() => { + if (field.status === "init") { + field.status = "ready"; + fm.fields[arg.name] = field; + field.render(); + } + }, []); + + return field; +}; diff --git a/comps/form/utils/ed-data.ts b/comps/form/utils/ed-data.ts index 6761055..537933e 100755 --- a/comps/form/utils/ed-data.ts +++ b/comps/form/utils/ed-data.ts @@ -1 +1,4 @@ -export const editorFormData = {} as Record; +export const editorFormData = {} as Record< + string, + { on_load: string; data: any } +>; diff --git a/comps/form/utils/init.tsx b/comps/form/utils/init.tsx index a225266..b9ee3af 100755 --- a/comps/form/utils/init.tsx +++ b/comps/form/utils/init.tsx @@ -3,10 +3,11 @@ import { toast } from "sonner"; import { FMLocal, FMProps } from "../typings"; import { formError } from "./error"; import { editorFormData } from "./ed-data"; +import get from "lodash.get"; export const formInit = (fm: FMLocal, props: FMProps) => { for (const [k, v] of Object.entries(props)) { - if (["PassProp", "body"].includes(k)) continue; + if (["PassProp", "body", "meta", "item"].includes(k)) continue; (fm.props as any)[k] = v; } const { on_load, sonar } = fm.props; @@ -31,23 +32,39 @@ export const formInit = (fm: FMLocal, props: FMProps) => { }); } - const res = on_load({ fm }); - - if (typeof res === "object" && res instanceof Promise) { - fm.data = await res; - } else { - fm.data = res; + let should_load = true; + if (isEditor) { + const item_id = props.item.id; + if (item_id) { + const cache = editorFormData[item_id]; + if ( + cache && + cache.on_load === get(props.item, "component.props.on_load.value") + ) { + fm.data = cache.data; + should_load = false; + } + } } + if (should_load) { + const res = on_load({ fm }); - // if (isEditor) { - // const item_id = (props?.props?.className || "") - // .split(" ") - // .find((e: string) => e.startsWith("s-")); + if (typeof res === "object" && res instanceof Promise) { + fm.data = await res; + } else { + fm.data = res; + } - // if (item_id) { - // console.log(item_id); - // } - // } + if (isEditor) { + const item_id = props.item.id; + if (item_id) { + editorFormData[item_id] = { + data: fm.data, + on_load: get(props.item, "component.props.on_load.value"), + }; + } + } + } fm.internal.reload.done.map((e) => e()); }, 50); diff --git a/data.ts b/data.ts index 54fbb8f..caeb52e 100755 --- a/data.ts +++ b/data.ts @@ -1,5 +1,5 @@ export { Form } from "@/comps/form/Form"; -export { Field } from "@/comps/form/fields/Field"; +export { Field } from "@/comps/form/field/Field"; export { formType } from "@/comps/form/typings"; export { TableList } from "@/comps/list/TableList"; export { TableListType } from "@/comps/list/typings";