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 16:34:16 +07:00
parent 2dcb16a4f7
commit 1745a5eebc
6 changed files with 166 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/web/src/nova/ed/logic/tree/sync-walk.tsx
View File

@ -5,15 +5,13 @@ import { MContent } from "../../../../utils/types/general";
import { IItem, MItem } from "../../../../utils/types/item";
import { FNCompDef, FNComponent } from "../../../../utils/types/meta-fn";
import { MSection } from "../../../../utils/types/section";
import { EdMeta, IScope, PG, active } from "../ed-global";
import { EdMeta, IScope, PG } from "../ed-global";
import { loadCompSnapshot } from "./sync-walk-comp";
import {
ensureMItemProps,
ensureMProp,
ensurePropContent,
} from "./sync-walk-utils";
import { treeRebuild } from "./build";
import { waitUntil } from "web-utils";
const comp_added = new Set<string>();

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

@ -1,18 +1,35 @@
import { FC } from "react";
import { FMCompDef } from "../../../../../utils/types/meta-fn";
import { EdPropLabel } from "./prop-label";
import { useGlobal } from "web-utils";
import { EDGlobal, active } from "../../../logic/ed-global";
export const EdPropInstanceCode: FC<{
name: string;
mprop: FMCompDef;
}> = ({ name, mprop }) => {
const p = useGlobal(EDGlobal, "EDITOR");
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={() => {}}
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] select-none"
onClick={() => {
p.ui.popup.script.prop_name = name;
p.ui.popup.script.type = "prop-instance";
p.ui.popup.script.prop_kind = "value";
p.ui.popup.script.open = true;
if (active.instance.item_id && active.comp_id) {
active.item_id = active.instance.item_id;
active.comp_id = active.instance.comp_id;
active.instance.item_id = "";
active.instance.comp_id = "";
}
p.render();
}}
>
EDIT CODE
</div>

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

@ -3,7 +3,7 @@ import { Tooltip } from "../../../../../utils/ui/tooltip";
export const EdPropLabel: FC<{ name: string }> = ({ name }) => {
const label = (
<div className="pl-1 w-[70px] overflow-hidden text-ellipsis whitespace-nowrap">
<div className="pl-1 min-w-[70px] overflow-hidden text-ellipsis whitespace-nowrap flex items-center">
{name}
</div>
);

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

@ -1,4 +1,5 @@
import { FC } from "react";
import Downshift from "downshift";
import { FC, useEffect } from "react";
import { useGlobal, useLocal } from "web-utils";
import { createAPI, createDB } from "../../../../../utils/script/init-api";
import { FMCompDef, FNCompDef } from "../../../../../utils/types/meta-fn";
@ -65,12 +66,126 @@ else metaOptions = resOpt;
eval(`evalue = ${prop.value}`);
} catch (e) {}
useEffect(() => {
if (Array.isArray(metaOptions)) {
local.val = evalue;
local.render();
}
}, [evalue]);
const onChange = (val: string) => {
mprop.doc?.transact(() => {
mprop.set("value", val);
mprop.set("valueBuilt", val);
});
};
let mode = prop.meta?.option_mode;
if (!mode) mode = "button";
return (
<div className="flex items-center min-h-[28px]">
<div className="flex items-stretch min-h-[28px]">
<EdPropLabel name={name} />
<div className="flex flex-1 justify-end">
{mode === "dropdown" && (
<>
<Downshift
inputValue={local.val}
isOpen={local.isOpen}
onOuterClick={() => {
local.isOpen = false;
local.render();
}}
onInputValueChange={(e) => {
local.val = e;
local.isOpen = true;
local.render();
}}
onChange={(sel) => {
console.log(sel);
if (!sel) {
local.val = evalue;
local.isOpen = false;
local.render();
} else {
const val = JSON.stringify(sel.value);
local.isOpen = false;
onChange(val);
}
}}
itemToString={(item) => (item ? item.value : "")}
>
{({
getInputProps,
getItemProps,
getLabelProps,
getMenuProps,
isOpen,
inputValue,
highlightedIndex,
selectedItem,
getRootProps,
}) => (
<div className="border-l self-stretch">
<div
style={{ display: "inline-block" }}
{...getRootProps({}, { suppressRefError: true })}
>
<input
{...getInputProps()}
onFocus={() => {
local.val = "";
local.isOpen = true;
local.render();
}}
onClick={() => {
local.isOpen = true;
local.render();
}}
onBlur={() => {
local.val = evalue;
local.isOpen = false;
local.render();
}}
type="search"
spellCheck={false}
className="flex-1 self-stretch font-mono border-2 border-transparent outline-none bg-transparent focus:bg-white focus:border-blue-500 border-slate-300 text-[11px] min-h-[28px] pl-1 "
/>
</div>
<ul
{...getMenuProps()}
className="absolute z-10 border right-0 bg-white max-h-[300px] overflow-y-auto overflow-x-hidden"
>
{isOpen
? metaOptions
.filter(
(item) =>
!inputValue || item.value.includes(inputValue)
)
.map((item, index) => (
<li
{...getItemProps({
key: item.value,
index,
item,
})}
className={cx(
"min-w-[180px] px-2 py-[2px] border-b",
selectedItem === item &&
highlightedIndex !== index &&
`bg-blue-500 text-white`,
highlightedIndex === index && `bg-blue-200`
)}
>
{item.label || item.value}
</li>
))
: null}
</ul>
</div>
)}
</Downshift>
</>
)}
{mode === "button" && (
<div className="flex-1 pt-1 px-2 flex flex-wrap justify-end space-x-1">
{Array.isArray(metaOptions) &&
@ -79,12 +194,14 @@ else metaOptions = resOpt;
<div
key={idx}
className={cx(
"flex px-2 text-xs mb-1 border rounded-sm cursor-pointer justify-center ",
"flex px-2 text-xs mb-1 border rounded-sm cursor-pointer justify-center select-none items-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={() => {}}
onClick={() => {
onChange(`"${item.value}"`);
}}
>
{item.label}
</div>

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

@ -40,7 +40,7 @@ export const EdPropInstanceText: FC<{
<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"
className="flex-1 outline-none border-l p-1 overflow-hidden focus:bg-blue-50"
value={local.value || ""}
spellCheck={false}
onChange={(e) => {

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

@ -10,6 +10,7 @@ import { EdTreeName } from "./item/name";
import { treeItemKeyMap } from "./key-map";
const jsxPropLoadingRender = {} as Record<string, string>;
const jsxPropVisCache = {} as Record<string, any>;
export const nodeRender: NodeRender<EdMeta> = (node, prm) => {
const p = useGlobal(EDGlobal, "EDITOR");
@ -32,22 +33,31 @@ export const nodeRender: NodeRender<EdMeta> = (node, prm) => {
const meta = getMetaById(p, node.data?.parent_item.id);
if (meta) {
if (meta.propvis) {
jsxPropVisCache[node.data.item.id] = meta.propvis;
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 (jsxPropVisCache[node.data.item.id]) {
meta.propvis = jsxPropVisCache[node.data.item.id];
if (meta.propvis) {
if (meta.propvis[node.data.jsx_prop_name] === false) return <></>;
}
} else {
if (!jsxPropLoadingRender[meta.item.id]) {
setTimeout(p.render, 100);
setTimeout(p.render, 500);
jsxPropLoadingRender[meta.item.id] = node.data.jsx_prop_name;
}
if (jsxPropLoadingRender[meta.item.id] === node.data.jsx_prop_name) {
return (
<div
className={"relative border-b flex items-stretch min-h-[26px]"}
>
<Loading backdrop={false} />
</div>
);
}
return <></>;
}
if (jsxPropLoadingRender[meta.item.id] === node.data.jsx_prop_name) {
return (
<div
className={"relative border-b flex items-stretch min-h-[26px]"}
>
<Loading backdrop={false} />
</div>
);
}
return <></>;
}
}
}