This commit is contained in:
Rizky 2023-11-25 19:36:56 +07:00
parent 3ee9550064
commit 74c194586a
5 changed files with 46 additions and 12 deletions

View File

@ -123,6 +123,7 @@ export type EdMeta = {
};
el?: ReactElement;
is_layout?: boolean;
is_jsx_prop?: boolean;
/** script related meta **/
propval?: Record<string, any>;
idexed_scope: Record<string, any>;

View File

@ -56,7 +56,7 @@ export const treeRebuild = async (p: PG, arg?: { note?: string }) => {
meta: p.page.meta,
},
{
isLayout: true,
is_layout: true,
mitem: e,
parent_item: { id: p.page.root_id },
tree_root_id: p.page.root_id,
@ -129,7 +129,7 @@ export const treeRebuild = async (p: PG, arg?: { note?: string }) => {
tree: p.page.tree,
},
{
isLayout: false,
is_layout: false,
mitem: e,
parent_item: { id: p.page.root_id },
tree_root_id: p.page.root_id,

View File

@ -91,7 +91,7 @@ const walkCompTree = async (p: PG, mitem: MItem, loaded: Set<string>) => {
},
{
mitem,
isLayout: false,
is_layout: false,
parent_item: { id: "root" },
portal,
tree_root_id: "root",

View File

@ -69,7 +69,7 @@ export const syncWalkMap = (
warn_component_loaded?: boolean;
},
arg: {
isLayout: boolean;
is_layout: boolean;
mitem: MItem | MSection;
portal: {
in: Record<string, EdMeta>;
@ -77,6 +77,7 @@ export const syncWalkMap = (
};
parent_item: EdMeta["parent_item"];
parent_mcomp?: EdMeta["parent_mcomp"];
is_jsx_prop?: boolean;
skip_add_tree?: boolean;
tree_root_id: string;
each?: (meta: EdMeta) => void;
@ -157,7 +158,7 @@ export const syncWalkMap = (
parent_item,
parent_mcomp: parent_mcomp,
idexed_scope: {},
is_layout: arg.isLayout,
is_layout: arg.is_layout,
};
if (item.name.startsWith("⬅")) {
arg.portal.in[item.name] = meta;
@ -195,9 +196,10 @@ export const syncWalkMap = (
const mcontent = ensurePropContent(mprop, k);
if (mcontent) {
syncWalkMap(p, {
isLayout: arg.isLayout,
is_layout: arg.is_layout,
tree_root_id: arg.tree_root_id,
mitem: mcontent,
is_jsx_prop: true,
parent_item: { id: item.id, mitem: mitem as MItem },
parent_mcomp: { mitem: mitem as MItem, mcomp },
portal: arg.portal,
@ -214,7 +216,7 @@ export const syncWalkMap = (
const childs = mcomp.get("childs")?.map((e) => e) || [];
for (const e of childs) {
syncWalkMap(p, {
isLayout: arg.isLayout,
is_layout: arg.is_layout,
tree_root_id: arg.tree_root_id,
mitem: e,
parent_item: { id: item.id, mitem: mitem as MItem },
@ -233,10 +235,11 @@ export const syncWalkMap = (
}
const meta: EdMeta = {
is_layout: arg.isLayout,
is_layout: arg.is_layout,
item,
mitem: mitem as MItem,
parent_item,
is_jsx_prop: arg.is_jsx_prop,
parent_mcomp: parent_mcomp,
idexed_scope: {},
};
@ -263,7 +266,7 @@ export const syncWalkMap = (
const childs = mitem.get("childs")?.map((e) => e) || [];
for (const e of childs) {
syncWalkMap(p, {
isLayout: arg.isLayout,
is_layout: arg.is_layout,
tree_root_id: arg.tree_root_id,
mitem: e,
parent_item: { id: item.id, mitem: mitem as MItem },

View File

@ -22,6 +22,7 @@ export const EdTreeName = ({
const mitem = node.data?.mitem;
if (!item || !mitem) return <></>;
const is_jsx_prop = !!node.data?.is_jsx_prop;
const isRenaming = p.ui.tree.rename_id === item.id;
return (
@ -72,7 +73,7 @@ export const EdTreeName = ({
/>
) : (
<div className="flex flex-col">
<Name name={node.text} />
<Name name={node.text} is_jsx_prop={is_jsx_prop} />
{/* <div className={"text-[11px] text-gray-500 -mt-1"}>{item.id}</div> */}
</div>
)}
@ -80,7 +81,37 @@ export const EdTreeName = ({
);
};
const Name: FC<{ name: string }> = ({ name }) => {
const Name: FC<{ name: string; is_jsx_prop: boolean }> = ({
name,
is_jsx_prop,
}) => {
if (is_jsx_prop) {
return (
<div className="flex items-center space-x-1">
<div className="flex text-purple-500 border border-purple-400 items-center justify-center font-mono text-[8px] px-[2px]">
PROP
</div>
<div>{name}</div>
</div>
);
}
if (name.startsWith("jsx:")) {
return (
<div className="flex items-center space-x-1">
<div className="flex text-purple-500 border border-purple-400 pr-1 items-center justify-center">
<div
dangerouslySetInnerHTML={{
__html: `<svg width="9px" height="9px" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.69667 0.0403541C8.90859 0.131038 9.03106 0.354857 8.99316 0.582235L8.0902 6.00001H12.5C12.6893 6.00001 12.8625 6.10701 12.9472 6.27641C13.0319 6.4458 13.0136 6.6485 12.8999 6.80001L6.89997 14.8C6.76167 14.9844 6.51521 15.0503 6.30328 14.9597C6.09135 14.869 5.96888 14.6452 6.00678 14.4178L6.90974 9H2.49999C2.31061 9 2.13748 8.893 2.05278 8.72361C1.96809 8.55422 1.98636 8.35151 2.09999 8.2L8.09997 0.200038C8.23828 0.0156255 8.48474 -0.0503301 8.69667 0.0403541ZM3.49999 8.00001H7.49997C7.64695 8.00001 7.78648 8.06467 7.88148 8.17682C7.97648 8.28896 8.01733 8.43723 7.99317 8.5822L7.33027 12.5596L11.5 7.00001H7.49997C7.353 7.00001 7.21347 6.93534 7.11846 6.8232C7.02346 6.71105 6.98261 6.56279 7.00678 6.41781L7.66968 2.44042L3.49999 8.00001Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>`,
}}
></div>
<div className="font-mono text-[9px]">JSX</div>
</div>
<div>{name.substring(4)}</div>
</div>
);
}
if (name.startsWith("jsx=")) {
return (
<div className="flex items-center space-x-1">
@ -94,7 +125,6 @@ const Name: FC<{ name: string }> = ({ name }) => {
`,
}}
></div>
<div>{name.substring(4)}</div>
</div>
);