From 2dcb16a4f7112b302d1147d5f3bcc7c6168919b6 Mon Sep 17 00:00:00 2001 From: Rizky Date: Fri, 8 Dec 2023 11:11:14 +0700 Subject: [PATCH] wip fix --- app/web/src/nova/ed/logic/ed-global.ts | 2 + .../src/nova/ed/panel/side/prop-instance.tsx | 38 +++++-- .../ed/panel/side/prop-instance/prop-code.tsx | 32 +++++- .../panel/side/prop-instance/prop-option.tsx | 98 +++++++++++++++++++ .../ed/panel/side/prop-instance/prop-text.tsx | 20 +--- .../src/nova/ed/panel/tree/node/render.tsx | 1 + 6 files changed, 166 insertions(+), 25 deletions(-) create mode 100644 app/web/src/nova/ed/panel/side/prop-instance/prop-option.tsx diff --git a/app/web/src/nova/ed/logic/ed-global.ts b/app/web/src/nova/ed/logic/ed-global.ts index f539dd4b..52c2295a 100644 --- a/app/web/src/nova/ed/logic/ed-global.ts +++ b/app/web/src/nova/ed/logic/ed-global.ts @@ -158,6 +158,8 @@ export const EDGlobal = { siteTypes: {} as Record, loaded: false, do_edit: async (newval: string, all?: boolean) => {}, + db: null as any, + api: null as any, }, page: { root_id: "root", diff --git a/app/web/src/nova/ed/panel/side/prop-instance.tsx b/app/web/src/nova/ed/panel/side/prop-instance.tsx index 97ec45df..856e9b65 100644 --- a/app/web/src/nova/ed/panel/side/prop-instance.tsx +++ b/app/web/src/nova/ed/panel/side/prop-instance.tsx @@ -4,9 +4,10 @@ import { IItem } from "../../../../utils/types/item"; import { FMCompDef } from "../../../../utils/types/meta-fn"; import { Menu, MenuItem } from "../../../../utils/ui/context-menu"; import { EDGlobal, EdMeta, active } from "../../logic/ed-global"; +import { EdPropInstanceCode } from "./prop-instance/prop-code"; +import { EdPropInstanceOptions } from "./prop-instance/prop-option"; import { reset } from "./prop-instance/prop-reset"; import { EdPropInstanceText } from "./prop-instance/prop-text"; -import { Loading } from "../../../../utils/ui/loading"; export const EdSidePropInstance: FC<{ meta: EdMeta }> = ({ meta }) => { const p = useGlobal(EDGlobal, "EDITOR"); @@ -33,8 +34,11 @@ export const EdSidePropInstance: FC<{ meta: EdMeta }> = ({ meta }) => { let mprop = mprops.get(key); const type = m.get("meta")?.get("type") || "text"; + const visible = mprop?.get("visible") || ""; if (meta.propvis) { if (meta.propvis[key] === false) return; + } else if (visible) { + return; } if (!local.showJSX && type === "content-element") { @@ -119,6 +123,13 @@ export const EdSidePropInstance: FC<{ meta: EdMeta }> = ({ meta }) => { )} {filtered.map(({ name, mprop }) => { const type = mprop.get("meta")?.get("type") || "text"; + let hasCode = false; + + const value = mprop.get("value") || ""; + if (!!value && ![`"`, "'", "`"].includes(value[0])) { + hasCode = true; + } + return (
= ({ meta }) => { local.render(); }} > - <> - {type === "text" && ( - - )} - {type !== "text" &&
{name}
} - + {hasCode ? ( + <> + + + ) : ( + <> + {type === "text" && ( + + )} + {type === "option" && ( + + )} + {type === "content-element" && ( +
+ {name} +
+ )} + + )}
); })} diff --git a/app/web/src/nova/ed/panel/side/prop-instance/prop-code.tsx b/app/web/src/nova/ed/panel/side/prop-instance/prop-code.tsx index b2d777aa..14ee1cbe 100644 --- a/app/web/src/nova/ed/panel/side/prop-instance/prop-code.tsx +++ b/app/web/src/nova/ed/panel/side/prop-instance/prop-code.tsx @@ -1,3 +1,31 @@ -export const propCode = () => { - return
Code
; +import { FC } from "react"; +import { FMCompDef } from "../../../../../utils/types/meta-fn"; +import { EdPropLabel } from "./prop-label"; + +export const EdPropInstanceCode: FC<{ + name: string; + mprop: FMCompDef; +}> = ({ name, mprop }) => { + return ( +
+ +
+
{}} + > + EDIT CODE +
+ +
`, + }} + >
+
+
+ ); }; diff --git a/app/web/src/nova/ed/panel/side/prop-instance/prop-option.tsx b/app/web/src/nova/ed/panel/side/prop-instance/prop-option.tsx new file mode 100644 index 00000000..f4b955df --- /dev/null +++ b/app/web/src/nova/ed/panel/side/prop-instance/prop-option.tsx @@ -0,0 +1,98 @@ +import { FC } from "react"; +import { useGlobal, useLocal } from "web-utils"; +import { createAPI, createDB } from "../../../../../utils/script/init-api"; +import { FMCompDef, FNCompDef } from "../../../../../utils/types/meta-fn"; +import { EDGlobal } from "../../../logic/ed-global"; +import { EdPropLabel } from "./prop-label"; + +export const EdPropInstanceOptions: FC<{ + name: string; + mprop: FMCompDef; +}> = ({ name, mprop }) => { + const prop = mprop.toJSON() as FNCompDef; + const local = useLocal({ + codeEditing: false, + loading: false, + loaded: false as any, + isOpen: false, + val: "", + metaFn: null as null | (() => Promise<{ label: string; value: any }[]>), + }); + const p = useGlobal(EDGlobal, "EDITOR"); + + let metaOptions: { label: string; value: any }[] = []; + + if (prop.meta?.options || prop.meta?.optionsBuilt) { + if (!local.loaded) { + try { + if (p.site.config.api_url) { + if (!p.script.db) p.script.db = createDB(p.site.config.api_url); + if (!p.script.api) p.script.api = createAPI(p.site.config.api_url); + } + + const args = { + ...window.exports, + db: p.script.db, + api: p.script.api, + }; + eval(` +${Object.entries(args) + .map((e) => `const ${e[0]} = args["${e[0]}"]`) + .join(";\n")} +const resOpt = ${prop.meta.optionsBuilt || prop.meta.options}; +if (typeof resOpt === 'function') local.metaFn = resOpt; +else metaOptions = resOpt; +`); + } catch (e) { + console.error(e); + } + } else { + metaOptions = local.loaded; + } + + if (local.metaFn && !local.loaded && !local.loading) { + local.loading = true; + local.metaFn().then((e) => { + local.loading = false; + local.loaded = e; + local.render(); + }); + } + } + + let evalue: any = null; + try { + eval(`evalue = ${prop.value}`); + } catch (e) {} + + let mode = prop.meta?.option_mode; + if (!mode) mode = "button"; + return ( +
+ +
+ {mode === "button" && ( +
+ {Array.isArray(metaOptions) && + metaOptions.map((item, idx) => { + return ( +
{}} + > + {item.label} +
+ ); + })} +
+ )} +
+
+ ); +}; diff --git a/app/web/src/nova/ed/panel/side/prop-instance/prop-text.tsx b/app/web/src/nova/ed/panel/side/prop-instance/prop-text.tsx index 4043fafa..ba2eb812 100644 --- a/app/web/src/nova/ed/panel/side/prop-instance/prop-text.tsx +++ b/app/web/src/nova/ed/panel/side/prop-instance/prop-text.tsx @@ -5,10 +5,10 @@ import { useEffect, useRef, } from "react"; -import { FMCompDef } from "../../../../../utils/types/meta-fn"; import { useGlobal, useLocal } from "web-utils"; +import { FMCompDef } from "../../../../../utils/types/meta-fn"; import { EDGlobal } from "../../../logic/ed-global"; -import { Tooltip } from "../../../../../utils/ui/tooltip"; +import { EdPropLabel } from "./prop-label"; export const EdPropInstanceText: FC<{ name: string; @@ -36,21 +36,9 @@ export const EdPropInstanceText: FC<{ local.render(); }, [val, valBuilt]); - const label = ( -
- {name} -
- ); - return ( -
- {name.length > 8 ? ( - - {label} - - ) : ( - label - )} +
+ = (node, prm) => { if (meta.propvis[node.data.jsx_prop_name] === false) return <>; } else { if (!jsxPropLoadingRender[meta.item.id]) { + setTimeout(p.render, 500); jsxPropLoadingRender[meta.item.id] = node.data.jsx_prop_name; } if (jsxPropLoadingRender[meta.item.id] === node.data.jsx_prop_name) {