midsuit
/
prasi-bun
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip fix

This commit is contained in:
Rizky 2023-12-08 11:11:14 +07:00
parent 4756ba0979
commit 2dcb16a4f7
6 changed files with 166 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/web/src/nova/ed/logic/ed-global.ts
View File

@ -158,6 +158,8 @@ export const EDGlobal = {
siteTypes: {} as Record<string, string>,
loaded: false,
do_edit: async (newval: string, all?: boolean) => {},
db: null as any,
api: null as any,
},
page: {
root_id: "root",

38
app/web/src/nova/ed/panel/side/prop-instance.tsx
View File

@ -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 (
<div
key={name}
@ -130,12 +141,25 @@ export const EdSidePropInstance: FC<{ meta: EdMeta }> = ({ meta }) => {
local.render();
}}
>
<>
{type === "text" && (
<EdPropInstanceText mprop={mprop} name={name} />
)}
{type !== "text" && <div className="p-1">{name}</div>}
</>
{hasCode ? (
<>
<EdPropInstanceCode mprop={mprop} name={name} />
</>
) : (
<>
{type === "text" && (
<EdPropInstanceText mprop={mprop} name={name} />
)}
{type === "option" && (
<EdPropInstanceOptions mprop={mprop} name={name} />
)}
{type === "content-element" && (
<div className="min-h-[28px] px-1 flex items-center">
{name}
</div>
)}
</>
)}
</div>
);
})}

32
app/web/src/nova/ed/panel/side/prop-instance/prop-code.tsx
View File

@ -1,3 +1,31 @@
export const propCode = () => {
return <div className="flex">Code</div>;
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 (
<div className="flex items-center min-h-[28px]">
<EdPropLabel name={name} />
<div className="flex-1 flex justify-end pr-1">
<div
className="m-1 px-1 bg-white cursor-pointer hover:bg-blue-500 hover:text-white hover:border-blue-500 font-mono border border-slate-300 text-[11px]"
onClick={() => {}}
>
EDIT CODE
</div>
<div
className={
"my-1 px-1 bg-white cursor-pointer hover:bg-blue-500 hover:text-white hover:border-blue-500 font-mono border border-slate-300 text-[11px] flex items-center"
}
dangerouslySetInnerHTML={{
__html: `<svg width="12" height="12" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.85355 2.14645C5.04882 2.34171 5.04882 2.65829 4.85355 2.85355L3.70711 4H9C11.4853 4 13.5 6.01472 13.5 8.5C13.5 10.9853 11.4853 13 9 13H5C4.72386 13 4.5 12.7761 4.5 12.5C4.5 12.2239 4.72386 12 5 12H9C10.933 12 12.5 10.433 12.5 8.5C12.5 6.567 10.933 5 9 5H3.70711L4.85355 6.14645C5.04882 6.34171 5.04882 6.65829 4.85355 6.85355C4.65829 7.04882 4.34171 7.04882 4.14645 6.85355L2.14645 4.85355C1.95118 4.65829 1.95118 4.34171 2.14645 4.14645L4.14645 2.14645C4.34171 1.95118 4.65829 1.95118 4.85355 2.14645Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>`,
}}
></div>
</div>
</div>
);
};

98
app/web/src/nova/ed/panel/side/prop-instance/prop-option.tsx Normal file
View File

@ -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 (
<div className="flex items-center min-h-[28px]">
<EdPropLabel name={name} />
<div className="flex flex-1 justify-end">
{mode === "button" && (
<div className="flex-1 pt-1 px-2 flex flex-wrap justify-end space-x-1">
{Array.isArray(metaOptions) &&
metaOptions.map((item, idx) => {
return (
<div
key={idx}
className={cx(
"flex px-2 text-xs mb-1 border rounded-sm cursor-pointer justify-center ",
item.value !== evalue
? "bg-white text-blue-700 hover:bg-blue-50 hover:border-blue-500"
: "bg-blue-700 text-white border-blue-700"
)}
onClick={() => {}}
>
{item.label}
</div>
);
})}
</div>
)}
</div>
</div>
);
};

20
app/web/src/nova/ed/panel/side/prop-instance/prop-text.tsx
View File

@ -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 = (
<div className="pl-1 w-[70px] overflow-hidden text-ellipsis whitespace-nowrap">
{name}
</div>
);
return (
<div className="flex items-center">
{name.length > 8 ? (
<Tooltip content={name} placement="left" delay={100}>
{label}
</Tooltip>
) : (
label
)}
<div className="flex items-center min-h-[28px]">
<EdPropLabel name={name} />
<AutoHeightTextarea
className="flex-1 outline-none border-l p-1 ml-1 overflow-hidden focus:bg-blue-50"
value={local.value || ""}

1
app/web/src/nova/ed/panel/tree/node/render.tsx
View File

@ -35,6 +35,7 @@ export const nodeRender: NodeRender<EdMeta> = (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) {