From bae977a908dbf8d344f76d894f9c9d1a468c6832 Mon Sep 17 00:00:00 2001 From: Rizky Date: Tue, 5 Dec 2023 16:18:15 +0700 Subject: [PATCH] wip fix comp prop --- .../src/nova/ed/panel/popup/script/monaco.tsx | 23 +++++++++++++-- .../nova/ed/panel/popup/script/pop-script.tsx | 2 +- app/web/src/nova/ed/panel/side/prop-comp.tsx | 2 +- .../{prop-popover.tsx => prop-form.tsx} | 29 +++++++++++++++++-- .../ed/panel/side/prop-comp/tree-item.tsx | 29 +++++++++++-------- 5 files changed, 66 insertions(+), 19 deletions(-) rename app/web/src/nova/ed/panel/side/prop-comp/{prop-popover.tsx => prop-form.tsx} (86%) diff --git a/app/web/src/nova/ed/panel/popup/script/monaco.tsx b/app/web/src/nova/ed/panel/popup/script/monaco.tsx index 853871ed..f122608b 100644 --- a/app/web/src/nova/ed/panel/popup/script/monaco.tsx +++ b/app/web/src/nova/ed/panel/popup/script/monaco.tsx @@ -137,11 +137,28 @@ export const ScriptMonaco = () => { if (kind === "value") { val = mprop.get("value"); } else if (kind === "gen") { - val = mprop.get("gen") || ""; + val = + mprop.get("gen") || + `\ +async () => { + return \`""\`; +}`; } else if (kind === "visible") { - val = mprop.get("visible") || ""; + val = mprop.get("visible") || "true"; } else if (kind === "option") { - val = mprop.get("meta")?.get("options") || ""; + val = + mprop.get("meta")?.get("options") || + `\ +[ + { + label: "yes", + value: "y" + }, + { + label: "no", + value: "n" + }, +]`; } } } diff --git a/app/web/src/nova/ed/panel/popup/script/pop-script.tsx b/app/web/src/nova/ed/panel/popup/script/pop-script.tsx index dc3f0e45..e1a4cae3 100644 --- a/app/web/src/nova/ed/panel/popup/script/pop-script.tsx +++ b/app/web/src/nova/ed/panel/popup/script/pop-script.tsx @@ -3,7 +3,7 @@ import { jscript } from "../../../../../utils/script/jscript"; import { Loading } from "../../../../../utils/ui/loading"; import { Modal } from "../../../../../utils/ui/modal"; import { EDGlobal } from "../../../logic/ed-global"; -import { propPopover } from "../../side/prop-comp/prop-popover"; +import { propPopover } from "../../side/prop-comp/prop-form"; import { ScriptWorkbench } from "./workbench"; export const EdPopScript = () => { diff --git a/app/web/src/nova/ed/panel/side/prop-comp.tsx b/app/web/src/nova/ed/panel/side/prop-comp.tsx index 9e814a41..3e049519 100644 --- a/app/web/src/nova/ed/panel/side/prop-comp.tsx +++ b/app/web/src/nova/ed/panel/side/prop-comp.tsx @@ -12,7 +12,7 @@ import { IItem } from "../../../../utils/types/item"; import { FMCompDef } from "../../../../utils/types/meta-fn"; import { EDGlobal, EdMeta } from "../../logic/ed-global"; import { EdPropCompTreeItem, PropItem } from "./prop-comp/tree-item"; -import { propPopover } from "./prop-comp/prop-popover"; +import { propPopover } from "./prop-comp/prop-form"; const propRef = { el: null as any, diff --git a/app/web/src/nova/ed/panel/side/prop-comp/prop-popover.tsx b/app/web/src/nova/ed/panel/side/prop-comp/prop-form.tsx similarity index 86% rename from app/web/src/nova/ed/panel/side/prop-comp/prop-popover.tsx rename to app/web/src/nova/ed/panel/side/prop-comp/prop-form.tsx index c0e57138..e7902e29 100644 --- a/app/web/src/nova/ed/panel/side/prop-comp/prop-popover.tsx +++ b/app/web/src/nova/ed/panel/side/prop-comp/prop-form.tsx @@ -4,12 +4,16 @@ import { useGlobal, useLocal } from "web-utils"; import { TypedMap } from "yjs-types"; import { createEditScript } from "./edit-script"; import { EDGlobal } from "../../../logic/ed-global"; +import { createId } from "@paralleldrive/cuid2"; +import { IItem, MItem } from "../../../../../utils/types/item"; +import { MContent } from "../../../../../utils/types/general"; +import { fillID } from "../../../logic/tree/fill-id"; export const propPopover = { name: "", }; -export const EdPropPopover: FC<{ mprop: FMCompDef; name: string }> = ({ +export const EdPropPopoverForm: FC<{ mprop: FMCompDef; name: string }> = ({ mprop, name, }) => { @@ -43,7 +47,28 @@ export const EdPropPopover: FC<{ mprop: FMCompDef; name: string }> = ({ " px-2 cursor-pointer" )} onClick={() => { - mmeta.set("type", e.type as any); + if (e.type === "content-element") { + mmeta.doc?.transact(() => { + mmeta.set("type", e.type as any); + if (!mprop.get("content")) { + const json = { + id: createId(), + name: `jsx-content`, + type: "item", + dim: { w: "full", h: "full" }, + childs: [], + adv: { + css: "", + }, + } as IItem; + const map = new Y.Map() as MItem; + syncronize(map as any, fillID(json)); + mprop.set("content", map); + } + }); + } else { + mmeta.set("type", e.type as any); + } }} > {e.label} diff --git a/app/web/src/nova/ed/panel/side/prop-comp/tree-item.tsx b/app/web/src/nova/ed/panel/side/prop-comp/tree-item.tsx index 338c552c..b397569a 100644 --- a/app/web/src/nova/ed/panel/side/prop-comp/tree-item.tsx +++ b/app/web/src/nova/ed/panel/side/prop-comp/tree-item.tsx @@ -3,7 +3,7 @@ import { FC } from "react"; import { MItem } from "../../../../../utils/types/item"; import { FMCompDef, FNCompDef } from "../../../../../utils/types/meta-fn"; import { Popover } from "../../../../../utils/ui/popover"; -import { EdPropPopover, propPopover } from "./prop-popover"; +import { EdPropPopoverForm, propPopover } from "./prop-form"; import { TypedMap } from "yjs-types"; export type PropItem = { @@ -18,11 +18,11 @@ export const EdPropCompTreeItem: FC<{ params: Parameters>[1]; render: () => void; }> = ({ node, params, render }) => { - if (node.id === "root" || node.id === "proot") { + if (node.id === "root") { return <>; } return ( -
+
} - className="flex-1 pl-1 hover:bg-blue-100 cursor-pointer" + content={ + + } + className="flex-1 pl-1 hover:bg-blue-100 cursor-pointer items-center flex" > {node.text} @@ -70,13 +72,16 @@ export const EdPropCompTreeItem: FC<{ e.stopPropagation(); if (confirm("Are you sure ?")) { const mprop = node.data?.mprop; - if (mprop){ - const parent = mprop.parent as TypedMap>; - parent.forEach((m, idx) => { - if (mprop === m) { - parent.delete(idx); - } - });} + if (mprop) { + const parent = mprop.parent as TypedMap< + Record + >; + parent.forEach((m, idx) => { + if (mprop === m) { + parent.delete(idx); + } + }); + } } }} >