This commit is contained in:
Rizky 2023-12-12 00:07:00 +07:00
parent 0c22d2cdef
commit 23de9e35d2
8 changed files with 116 additions and 57 deletions

View File

@ -28,36 +28,29 @@ export const nodeRender: NodeRender<IMeta> = (node, prm) => {
);
}
if (
node.data?.jsx_prop?.name &&
node.data?.jsx_prop?.name &&
node.data?.parent?.instance_id
) {
const prop_name = node.data?.jsx_prop?.name;
const meta = getMetaById(p, node.data.parent.instance_id);
if (node.data?.jsx_prop?.is_root) {
let hide = true;
const comp = p.comp.loaded[node.data.jsx_prop.comp_id];
if (comp) {
const prop_name = node.data?.jsx_prop?.name;
const cprop = comp.comp.component?.props[prop_name];
if (cprop && node.data.parent?.instance_id) {
const meta = getMetaById(p, node.data.parent.instance_id);
if (meta && prop_name) {
const props = meta.scope.def?.props;
if (props) {
const prop = props[prop_name];
if (prop && prop.visible === true) {
hide = false;
}
}
}
}
}
// if (meta && prop_name && !active.comp_id) {
// if (!meta.propvis) {
// if (!meta.parent_mcomp) {
// setTimeout(local.render, 100);
// const id = meta.item.originalId || meta.item.id;
// if (!jsxPropVis[id] || jsxPropVis[id] === prop_name) {
// jsxPropVis[id] = prop_name;
// return (
// <div
// className={"relative border-b flex items-stretch min-h-[26px]"}
// >
// <Loading backdrop={false} />
// </div>
// );
// } else {
// return <></>;
// }
// }
// } else {
// if (meta.propvis[prop_name] === false) return <></>;
// }
// }
if (hide) {
return <></>;
}
}
return (

View File

@ -2,6 +2,7 @@ import { FC, ReactNode } from "react";
import { IMeta } from "../../ed/logic/ed-global";
import { ViContext, viParts } from "./parts";
import { ViScript } from "./script";
import { ErrorBox } from "../utils/error-box";
export const ViRender: FC<{
ctx: ViContext;
@ -11,7 +12,11 @@ export const ViRender: FC<{
if (!meta) return null;
if (meta.item.adv?.js || meta.item.component?.id) {
return <ViScript ctx={ctx} meta={meta} />;
return (
<ErrorBox>
<ViScript ctx={ctx} meta={meta} />
</ErrorBox>
);
}
const parts = viParts(meta);
@ -23,7 +28,11 @@ export const ViRender: FC<{
: meta.item.childs?.map((item) => {
if (!item) return null;
const { id } = item;
return <ViRender key={id} ctx={ctx} meta={ctx.meta[id]} />;
return (
<ErrorBox key={id}>
<ViRender ctx={ctx} meta={ctx.meta[id]} />
</ErrorBox>
);
});
}

View File

@ -1,29 +1,46 @@
import { FC } from "react";
import { FC, ReactNode } from "react";
import { IMeta } from "../../ed/logic/ed-global";
import { ViContext, viParts } from "./parts";
import { ViRender } from "./render";
import { ErrorBox } from "../utils/error-box";
import { ViLocal } from "./script/local";
import { viScopeUpward } from "./script/upward";
export const ViScript: FC<{ ctx: ViContext; meta: IMeta }> = ({
ctx,
meta,
}) => {
viEvalScript(ctx, meta);
if (meta.script) return <ErrorBox>{meta.script.el}</ErrorBox>;
return null;
};
export const viEvalScript = async (ctx: ViContext, meta: IMeta) => {
const childs = meta.item.childs;
const parts = viParts(meta);
let renderChild = undefined;
let children = undefined;
if (parts.shouldRenderChild) {
renderChild =
children =
Array.isArray(childs) &&
childs.map(({ id }) => {
return <ViRender key={id} ctx={ctx} meta={ctx.meta[id]} />;
});
}
return (
<div {...parts.props} className={parts.className}>
{renderChild}
</div>
);
};
const scope = viScopeUpward(ctx, meta);
export const viEvalScript = async (ctx: ViContext, meta: IMeta) => {};
const arg = {
...scope,
children,
props: parts.props,
Local: ViLocal,
newElement: () => {},
render: (jsx: ReactNode) => {
meta.script = { el: jsx };
},
};
const fn = new Function(...Object.keys(arg), meta.item.adv?.jsBuilt || "");
fn(...Object.values(arg));
};

View File

@ -0,0 +1,5 @@
import { FC, ReactNode } from "react";
export const ViLocal: FC<{ children: ReactNode }> = ({ children }) => {
return children;
};

View File

@ -0,0 +1,15 @@
import { IMeta } from "../../../ed/logic/ed-global";
import { ViContext } from "../parts";
export const viScopeUpward = (ctx: ViContext, meta: IMeta) => {
let cur = meta;
// while (cur.parent) {
// if (cur.scope.def) {
// console.log(cur.item.id, cur.item.name, cur.scope);
// }
// cur = ctx.meta[cur.parent.id];
// }
return {};
};

View File

@ -60,17 +60,29 @@ export const genComp = (
if (meta.scope.def?.props) {
meta.scope.def.props[name] = {
value: prop.valueBuilt,
visible: true,
type: {
"": "text",
"content-element": "jsx",
option: "opt",
text: "text",
}[prop.meta?.type || ""] as any,
visible: false,
};
}
props[name] = { value: prop.valueBuilt, visible: prop.visible };
if (prop.meta?.type === "content-element" && prop.content) {
const comp_id = item.component?.id;
if (
prop.meta?.type === "content-element" &&
prop.content &&
comp_id
) {
genMeta(p, {
item: prop.content,
mitem: mprop?.get("content"),
is_root: false,
jsx_prop: {
is_root: true,
comp_id,
name,
},
parent: {
@ -90,7 +102,7 @@ export const genComp = (
if (vis && meta.scope.def?.props) {
for (const [k, v] of Object.entries(vis)) {
if (meta.scope.def.props[k]) {
meta.scope.def.props[k].visible = !!v;
meta.scope.def.props[k].visible = v === false;
}
}
}

View File

@ -2,18 +2,19 @@ export const evalPropVis = (
props: Record<string, { value: string; visible?: string }>
) => {
try {
const fn = new Function(`
${Object.entries(props)
.map(([k, v]) => `const ${k} = ${v.value};`)
.join("\n")}
const src = `
${Object.entries(props)
.map(([k, v]) => `const ${k} = ${v.value}`)
.join("\n")}
return {
${Object.entries(props)
.filter(([k, v]) => v.visible)
.map(([k, v]) => `${k}: ${v},`)
.join("\n")}
}
`);
return {
${Object.entries(props)
.filter(([_, v]) => v.visible)
.map(([k, v]) => `${k}: ${v.visible},`)
.join("\n")}
}
`;
const fn = new Function(src);
return fn() as Record<string, boolean>;
} catch (e) {}

View File

@ -59,12 +59,19 @@ export type IMeta = {
};
jsx_prop?: {
name: string;
comp_id: string;
is_root: boolean;
};
script?: {
el: ReactNode;
};
scope: {
val?: any;
def?: {
props?: Record<string, { value: string; visible: boolean }>;
props?: Record<
string,
{ value: string; type: "jsx" | "text" | "opt"; visible: boolean }
>;
local?: {
name: string;
idx: number;