wip fix render
This commit is contained in:
Rizky
parent
17ef781e60
commit
67b0e50afb
|
|
@ -36,6 +36,7 @@ const EmptyComp = {
|
|||
|
||||
const target = { active_id: false as any };
|
||||
export const active = {
|
||||
hover_id: "",
|
||||
get item_id() {
|
||||
if (target.active_id === false) {
|
||||
target.active_id = localStorage.getItem("prasi-active-id") || "";
|
||||
|
|
@ -63,6 +64,7 @@ export type EdMeta = {
|
|||
};
|
||||
|
||||
export const EDGlobal = {
|
||||
mode: "" as "desktop" | "mobile",
|
||||
user: { id: "", username: "", client_id: "" },
|
||||
clients: {} as Record<string, { id: string; username: string }>,
|
||||
status: "init" as
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { createId } from "@paralleldrive/cuid2";
|
||||
import { decompress } from "wasm-gzip";
|
||||
import { syncronize } from "y-pojo";
|
||||
import { TypedMap } from "yjs-types";
|
||||
import { TypedArray, TypedMap } from "yjs-types";
|
||||
import { MContent } from "../../../../utils/types/general";
|
||||
import { IItem, MItem } from "../../../../utils/types/item";
|
||||
import {
|
||||
|
|
@ -10,7 +10,7 @@ import {
|
|||
FNCompDef,
|
||||
FNComponent,
|
||||
} from "../../../../utils/types/meta-fn";
|
||||
import { DComp, IRoot } from "../../../../utils/types/root";
|
||||
import { DComp } from "../../../../utils/types/root";
|
||||
import { MSection } from "../../../../utils/types/section";
|
||||
import { EdMeta, PG } from "../ed-global";
|
||||
|
||||
|
|
@ -28,7 +28,6 @@ export const treeRebuild = async (p: PG, arg?: { note?: string }) => {
|
|||
const loaded = new Set<string>();
|
||||
await Promise.all(
|
||||
sections.map((e) => {
|
||||
p.page.entry.push(e.get("id"));
|
||||
return walkLoad(p, e, loaded);
|
||||
})
|
||||
);
|
||||
|
|
@ -66,6 +65,7 @@ export const treeRebuild = async (p: PG, arg?: { note?: string }) => {
|
|||
|
||||
p.page.building = false;
|
||||
p.render();
|
||||
p.page.render();
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -80,7 +80,11 @@ const mapItem = (mitem: MContent, item: any) => {
|
|||
}
|
||||
item[k] = val;
|
||||
} else {
|
||||
item[k] = [];
|
||||
if (!item[k]) item[k] = [];
|
||||
const childs = e as unknown as TypedArray<{}>;
|
||||
childs.forEach((c) => {
|
||||
item[k].push({ id: c.get("id") });
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,25 +5,20 @@ export const EdApi = () => {
|
|||
return (
|
||||
<TopBtn
|
||||
style="slim"
|
||||
className={cx(
|
||||
"font-mono text-[10px]",
|
||||
css`
|
||||
.text {
|
||||
border-top: 1px solid #ddd;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
&:hover .text {
|
||||
border-top: 1px solid white;
|
||||
border-bottom: 1px solid white;
|
||||
}
|
||||
`
|
||||
)}
|
||||
innerClassName="flex-1 flex items-center justify-center"
|
||||
popover={(popover) => <EdApiServer popover={popover} />}
|
||||
placement="right"
|
||||
>
|
||||
<div className="h-[26px] flex items-center justify-center">
|
||||
<div className="text">API</div>
|
||||
</div>
|
||||
<div
|
||||
className="flex-1 min-h-[26px] flex items-center justify-center"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
|
||||
<svg width="20px" height="20px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.94358 2.25H14.0564C15.8942 2.24998 17.3498 2.24997 18.489 2.40314C19.6614 2.56076 20.6104 2.89288 21.3588 3.64124C22.1071 4.38961 22.4392 5.33856 22.5969 6.51098C22.75 7.65019 22.75 9.10583 22.75 10.9436V13.0564C22.75 14.8942 22.75 16.3498 22.5969 17.489C22.4392 18.6614 22.1071 19.6104 21.3588 20.3588C20.6104 21.1071 19.6614 21.4392 18.489 21.5969C17.3498 21.75 15.8942 21.75 14.0564 21.75H9.94359C8.10583 21.75 6.65019 21.75 5.51098 21.5969C4.33856 21.4392 3.38961 21.1071 2.64124 20.3588C1.89288 19.6104 1.56076 18.6614 1.40314 17.489C1.24997 16.3498 1.24998 14.8942 1.25 13.0564V10.9436C1.24998 9.10582 1.24997 7.65019 1.40314 6.51098C1.56076 5.33856 1.89288 4.38961 2.64124 3.64124C3.38961 2.89288 4.33856 2.56076 5.51098 2.40314C6.65019 2.24997 8.10582 2.24998 9.94358 2.25ZM5.71085 3.88976C4.70476 4.02502 4.12511 4.27869 3.7019 4.7019C3.27869 5.12511 3.02502 5.70476 2.88976 6.71085C2.75159 7.73851 2.75 9.09318 2.75 11V11.25H21.25V11C21.25 9.09318 21.2484 7.73851 21.1102 6.71085C20.975 5.70476 20.7213 5.12511 20.2981 4.7019C19.8749 4.27869 19.2952 4.02502 18.2892 3.88976C17.2615 3.75159 15.9068 3.75 14 3.75H10C8.09318 3.75 6.73851 3.75159 5.71085 3.88976ZM21.25 12.75H2.75V13C2.75 14.9068 2.75159 16.2615 2.88976 17.2892C3.02502 18.2952 3.27869 18.8749 3.7019 19.2981C4.12511 19.7213 4.70476 19.975 5.71085 20.1102C6.73851 20.2484 8.09318 20.25 10 20.25H14C15.9068 20.25 17.2615 20.2484 18.2892 20.1102C19.2952 19.975 19.8749 19.7213 20.2981 19.2981C20.7213 18.8749 20.975 18.2952 21.1102 17.2892C21.2484 16.2615 21.25 14.9068 21.25 13V12.75ZM6 5.75C6.41421 5.75 6.75 6.08579 6.75 6.5V8.5C6.75 8.91421 6.41421 9.25 6 9.25C5.58579 9.25 5.25 8.91421 5.25 8.5V6.5C5.25 6.08579 5.58579 5.75 6 5.75ZM9 5.75C9.41421 5.75 9.75 6.08579 9.75 6.5V8.5C9.75 8.91421 9.41421 9.25 9 9.25C8.58579 9.25 8.25 8.91421 8.25 8.5V6.5C8.25 6.08579 8.58579 5.75 9 5.75ZM12.75 7.5C12.75 7.08579 13.0858 6.75 13.5 6.75H18C18.4142 6.75 18.75 7.08579 18.75 7.5C18.75 7.91421 18.4142 8.25 18 8.25H13.5C13.0858 8.25 12.75 7.91421 12.75 7.5ZM6 14.75C6.41421 14.75 6.75 15.0858 6.75 15.5V17.5C6.75 17.9142 6.41421 18.25 6 18.25C5.58579 18.25 5.25 17.9142 5.25 17.5V15.5C5.25 15.0858 5.58579 14.75 6 14.75ZM9 14.75C9.41421 14.75 9.75 15.0858 9.75 15.5V17.5C9.75 17.9142 9.41421 18.25 9 18.25C8.58579 18.25 8.25 17.9142 8.25 17.5V15.5C8.25 15.0858 8.58579 14.75 9 14.75ZM12.75 16.5C12.75 16.0858 13.0858 15.75 13.5 15.75H18C18.4142 15.75 18.75 16.0858 18.75 16.5C18.75 16.9142 18.4142 17.25 18 17.25H13.5C13.0858 17.25 12.75 16.9142 12.75 16.5Z" fill="currentColor"/>
|
||||
</svg>`,
|
||||
}}
|
||||
></div>
|
||||
</TopBtn>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -7,24 +7,19 @@ export const EdSiteJS = () => {
|
|||
return (
|
||||
<TopBtn
|
||||
style="slim"
|
||||
className="font-bold font-mono"
|
||||
innerClassName="flex-1 flex items-center justify-center"
|
||||
onClick={() => {
|
||||
p.ui.popup.code.open = true;
|
||||
p.render();
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 256 256"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
fillRule="evenodd"
|
||||
d="M212.24 83.76l-56-56A6 6 0 00152 26H56a14 14 0 00-14 14v72a6 6 0 0012 0V40a2 2 0 012-2h90v50a6 6 0 006 6h50v122a2 2 0 01-2 2h-24a6 6 0 000 12h24a14 14 0 0014-14V88a6 6 0 00-1.76-4.24zM158 46.48L193.52 82H158zm-12.17 149.58a18.89 18.89 0 01-8.31 13.81c-4.82 3.19-10.87 4.14-16.36 4.14a58.89 58.89 0 01-14.68-2 6 6 0 013.23-11.56c3.71 1 15.58 3.11 21.19-.62a6.85 6.85 0 003-5.34c.58-4.43-2.08-6.26-14.2-9.76-9.31-2.69-23.37-6.75-21.57-20.94a18.61 18.61 0 018.08-13.54c11.11-7.49 29.18-3 31.21-2.48a6 6 0 01-3.06 11.6c-3.78-1-15.85-3-21.45.84a6.59 6.59 0 00-2.88 5.08c-.41 3.22 2.14 4.78 13 7.91 9.89 2.89 24.81 7.2 22.8 22.86zM78 152v38a24 24 0 01-48 0 6 6 0 0112 0 12 12 0 0024 0v-38a6 6 0 0112 0z"
|
||||
></path>
|
||||
</svg>
|
||||
<div
|
||||
className="flex-1 min-h-[26px] flex items-center justify-center"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
<svg width="16px" height="16px" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.573 0.275 C 11.507 0.294,11.421 0.327,11.382 0.348 C 11.343 0.369,9.999 1.520,8.396 2.906 C 6.792 4.291,5.462 5.424,5.440 5.424 C 5.418 5.424,4.776 4.956,4.013 4.384 C 3.251 3.813,2.585 3.327,2.533 3.306 C 2.383 3.243,2.065 3.256,1.920 3.330 C 1.754 3.416,0.189 4.975,0.094 5.150 C -0.036 5.390,-0.020 5.704,0.134 5.916 C 0.175 5.973,0.709 6.473,1.319 7.026 C 1.930 7.579,2.426 8.041,2.421 8.052 C 2.417 8.064,1.926 8.494,1.330 9.009 C 0.734 9.523,0.208 9.990,0.162 10.045 C -0.015 10.259,-0.044 10.597,0.093 10.849 C 0.189 11.024,1.752 12.583,1.920 12.670 C 2.086 12.757,2.417 12.759,2.573 12.675 C 2.632 12.644,3.273 12.173,3.997 11.629 L 5.315 10.641 5.424 10.741 C 5.484 10.796,6.713 11.909,8.154 13.214 C 10.000 14.885,10.820 15.610,10.926 15.667 L 11.076 15.747 11.750 15.747 L 12.424 15.747 14.055 14.933 C 15.555 14.185,15.695 14.110,15.803 13.991 C 16.016 13.754,16.000 14.232,16.000 8.253 C 16.000 2.432,16.009 2.785,15.849 2.554 C 15.791 2.470,15.439 2.223,14.215 1.406 C 13.358 0.834,12.602 0.341,12.535 0.311 C 12.435 0.266,12.348 0.255,12.053 0.248 C 11.816 0.243,11.652 0.252,11.573 0.275 M13.272 2.580 L 14.505 3.400 14.506 8.220 L 14.507 13.040 13.302 13.640 L 12.098 14.240 11.813 14.240 L 11.529 14.240 8.660 11.644 C 7.082 10.216,5.748 9.028,5.697 9.003 C 5.498 8.909,5.197 8.902,5.036 8.989 C 5.002 9.007,4.385 9.464,3.664 10.004 C 2.943 10.545,2.342 10.987,2.329 10.987 C 2.299 10.987,1.852 10.539,1.868 10.525 C 2.541 9.948,3.946 8.731,4.050 8.634 C 4.136 8.553,4.219 8.442,4.260 8.354 C 4.317 8.227,4.325 8.180,4.314 8.011 C 4.304 7.853,4.286 7.788,4.223 7.687 C 4.170 7.601,3.769 7.221,2.994 6.520 L 1.844 5.480 2.075 5.247 C 2.202 5.118,2.317 5.013,2.331 5.013 C 2.344 5.013,2.975 5.478,3.731 6.046 C 5.227 7.169,5.268 7.194,5.541 7.162 C 5.619 7.153,5.733 7.122,5.794 7.093 C 5.856 7.064,6.297 6.703,6.773 6.291 C 7.250 5.879,7.784 5.417,7.960 5.265 C 8.136 5.113,9.120 4.263,10.147 3.375 C 11.173 2.488,12.019 1.761,12.026 1.761 C 12.034 1.760,12.594 2.129,13.272 2.580 M11.640 4.257 C 11.611 4.263,11.539 4.286,11.480 4.308 C 11.421 4.329,10.401 5.046,9.213 5.901 C 6.867 7.590,6.920 7.547,6.851 7.854 C 6.825 7.969,6.825 8.031,6.851 8.146 C 6.919 8.453,6.868 8.410,9.213 10.099 C 10.401 10.954,11.427 11.675,11.493 11.700 C 11.840 11.833,12.236 11.671,12.422 11.320 L 12.493 11.187 12.493 8.000 L 12.493 4.813 12.422 4.680 C 12.333 4.512,12.208 4.391,12.053 4.324 C 11.926 4.268,11.729 4.236,11.640 4.257 M10.980 8.757 L 10.973 9.514 9.927 8.764 C 9.352 8.351,8.881 8.007,8.881 8.000 C 8.881 7.993,9.352 7.649,9.927 7.236 L 10.973 6.486 10.980 7.243 C 10.984 7.659,10.984 8.341,10.980 8.757 " stroke="none" fill="currentColor" fill-rule="evenodd"></path></svg>`,
|
||||
}}
|
||||
></div>
|
||||
</TopBtn>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import { useLocal } from "web-utils";
|
|||
export const TopBtn = ({
|
||||
children,
|
||||
className,
|
||||
innerClassName,
|
||||
disabled,
|
||||
underlight,
|
||||
onClick,
|
||||
|
|
@ -15,6 +16,7 @@ export const TopBtn = ({
|
|||
}: {
|
||||
children: ReactNode;
|
||||
className?: string;
|
||||
innerClassName?: string;
|
||||
disabled?: boolean;
|
||||
underlight?: string;
|
||||
onClick?: React.MouseEventHandler<HTMLDivElement>;
|
||||
|
|
@ -76,6 +78,7 @@ export const TopBtn = ({
|
|||
local.open = open;
|
||||
local.render();
|
||||
}}
|
||||
className={innerClassName}
|
||||
placement={placement}
|
||||
>
|
||||
{result}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { useGlobal } from "web-utils";
|
||||
import { Loading } from "../../../../utils/ui/loading";
|
||||
import { View } from "../../../view/view";
|
||||
import { EDGlobal } from "../../logic/ed-global";
|
||||
import { EDGlobal, active } from "../../logic/ed-global";
|
||||
import { loadComponent } from "../../logic/tree/build";
|
||||
|
||||
export const EdMain = () => {
|
||||
|
|
@ -11,6 +11,7 @@ export const EdMain = () => {
|
|||
{!!p.page.building && <Loading backdrop={false} />}
|
||||
{!p.page.building && (
|
||||
<View
|
||||
mode={p.mode}
|
||||
component={{
|
||||
map: p.comp.map,
|
||||
load(id_comp) {
|
||||
|
|
@ -27,6 +28,30 @@ export const EdMain = () => {
|
|||
bind={({ render }) => {
|
||||
p.page.render = render;
|
||||
}}
|
||||
hidden={(item) => {
|
||||
if (item.hidden) return true;
|
||||
return false;
|
||||
}}
|
||||
hover={{
|
||||
get(item) {
|
||||
return active.hover_id === item.id;
|
||||
},
|
||||
set(id) {
|
||||
active.hover_id = id;
|
||||
p.render();
|
||||
p.page.render();
|
||||
},
|
||||
}}
|
||||
active={{
|
||||
get(item) {
|
||||
return active.item_id === item.id;
|
||||
},
|
||||
set(id) {
|
||||
active.item_id = id;
|
||||
p.render();
|
||||
p.page.render();
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ const EdPaneResize = (arg: {
|
|||
<>
|
||||
{local.dragging && (
|
||||
<div
|
||||
className="absolute inset-0 cursor-ew-resize"
|
||||
className="fixed z-50 inset-0 cursor-ew-resize"
|
||||
onPointerOver={() => {
|
||||
local.inzone = true;
|
||||
}}
|
||||
|
|
@ -67,8 +67,8 @@ const EdPaneResize = (arg: {
|
|||
<div className={cx("relative")}>
|
||||
<div
|
||||
className={cx(
|
||||
"w-[4px] absolute inset-0 -mx-[2px] cursor-ew-resize hover:bg-blue-400 transition-all duration-700",
|
||||
local.dragging && "bg-blue-400"
|
||||
"w-[4px] absolute inset-0 z-50 -mx-[2px] cursor-ew-resize hover:bg-blue-800 transition-all duration-700",
|
||||
local.dragging && "bg-blue-800"
|
||||
)}
|
||||
onDoubleClick={() => {
|
||||
arg.onResize(local.default);
|
||||
|
|
|
|||
|
|
@ -37,6 +37,12 @@ export const EdTreeName = ({
|
|||
onFocus={(e) => {
|
||||
e.currentTarget.select();
|
||||
}}
|
||||
onBlur={() => {
|
||||
item.name = local.rename;
|
||||
mitem.set("name", item.name);
|
||||
p.ui.tree.rename_id = "";
|
||||
p.render();
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
e.stopPropagation();
|
||||
if (e.key === "Enter" || e.key === "Escape") {
|
||||
|
|
|
|||
|
|
@ -42,7 +42,8 @@ export const nodeRender: NodeRender<EdMeta> = (node, prm) => {
|
|||
`,
|
||||
active.item_id === item.id
|
||||
? ["bg-blue-100"]
|
||||
: ["hover:bg-blue-50", isComponent && `bg-purple-50`]
|
||||
: [isComponent && `bg-purple-50`],
|
||||
active.hover_id === item.id && "bg-blue-50"
|
||||
)}
|
||||
onKeyDown={(e) => {
|
||||
p.ui.prevent_indent_hook = true;
|
||||
|
|
@ -237,6 +238,12 @@ export const nodeRender: NodeRender<EdMeta> = (node, prm) => {
|
|||
active.item_id = item.id;
|
||||
p.ui.tree.search = "";
|
||||
p.render();
|
||||
p.page.render();
|
||||
}}
|
||||
onMouseOver={() => {
|
||||
active.hover_id = item.id;
|
||||
p.render();
|
||||
p.page.render();
|
||||
}}
|
||||
>
|
||||
<div className="focus hidden absolute left-0 bottom-0 top-0 w-[4px] bg-blue-500"></div>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,26 @@
|
|||
import { ReactElement } from "react";
|
||||
import { IContent } from "../../../utils/types/general";
|
||||
import { IItem } from "../../../utils/types/item";
|
||||
import { ISection } from "../../../utils/types/section";
|
||||
import { IText } from "../../../utils/types/text";
|
||||
import { EdMeta } from "../../ed/logic/ed-global";
|
||||
|
||||
export const ViewGlobal = {
|
||||
mode: "init" as "init" | "load-code" | "loading-code" | "ready" | "rebuild",
|
||||
mode: "" as "desktop" | "mobile",
|
||||
status: "init" as "init" | "load-code" | "loading-code" | "ready" | "rebuild",
|
||||
current: { site_id: "", page_id: "" },
|
||||
meta: {} as Record<string, EdMeta>,
|
||||
entry: [] as string[],
|
||||
bodyCache: null as null | ReactElement,
|
||||
view: {
|
||||
hidden: undefined as undefined | ((item: IContent) => boolean),
|
||||
active: undefined as
|
||||
| undefined
|
||||
| { get: (item: IContent) => boolean; set: (id: string) => void },
|
||||
hover: undefined as
|
||||
| undefined
|
||||
| { get: (item: IContent) => boolean; set: (id: string) => void },
|
||||
},
|
||||
};
|
||||
|
||||
export type VG = typeof ViewGlobal & { render: () => void };
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ export const vInit = (
|
|||
) => {
|
||||
const { load, site_id, page_id } = arg;
|
||||
|
||||
v.mode = "load-code";
|
||||
v.status = "load-code";
|
||||
v.current.site_id = site_id;
|
||||
v.current.page_id = page_id;
|
||||
|
||||
|
|
|
|||
|
|
@ -9,12 +9,12 @@ const codeMap = {
|
|||
export const vLoadCode = async (v: VG, forceLoad?: boolean) => {
|
||||
if (forceLoad) {
|
||||
codeLoaded.clear();
|
||||
v.mode = "load-code";
|
||||
v.status = "load-code";
|
||||
v.render();
|
||||
}
|
||||
|
||||
if (v.mode === "load-code") {
|
||||
v.mode = "loading-code";
|
||||
if (v.status === "load-code") {
|
||||
v.status = "loading-code";
|
||||
|
||||
const { site_id, page_id } = v.current;
|
||||
const w = window as any;
|
||||
|
|
@ -78,7 +78,7 @@ export const vLoadCode = async (v: VG, forceLoad?: boolean) => {
|
|||
|
||||
await Promise.all(promises);
|
||||
|
||||
v.mode = "rebuild";
|
||||
v.status = "rebuild";
|
||||
v.render();
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { useGlobal } from "web-utils";
|
||||
import { ViewGlobal } from "../logic/global";
|
||||
import { VSection } from "./section";
|
||||
import { ViewMeta } from "./meta/meta";
|
||||
|
||||
export const VEntry = () => {
|
||||
const v = useGlobal(ViewGlobal, "VIEW");
|
||||
|
|
@ -8,7 +8,7 @@ export const VEntry = () => {
|
|||
return (
|
||||
<>
|
||||
{v.entry.map((section_id) => {
|
||||
return <VSection id={section_id} key={section_id} />;
|
||||
return <ViewMeta id={section_id} key={section_id} />;
|
||||
})}
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,11 +0,0 @@
|
|||
import { FC } from "react";
|
||||
import { useGlobal } from "web-utils";
|
||||
import { ViewGlobal } from "../logic/global";
|
||||
|
||||
export const ViewMeta: FC<{ id: string }> = ({ id }) => {
|
||||
const v = useGlobal(ViewGlobal, "VIEW");
|
||||
|
||||
const meta = v.meta[id];
|
||||
const item = meta.item;
|
||||
return <div></div>;
|
||||
};
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import { FC, ReactNode } from "react";
|
||||
import { IItem } from "../../../../utils/types/item";
|
||||
import { IText } from "../../../../utils/types/text";
|
||||
import { ISection } from "../../../../utils/types/section";
|
||||
import { ViewMeta } from "./meta";
|
||||
|
||||
export const ViewMetaChildren: FC<{ item: IItem | IText | ISection }> = ({
|
||||
item,
|
||||
}) => {
|
||||
const children: ReactNode[] = [];
|
||||
|
||||
if (item.type !== "text") {
|
||||
for (const child of item.childs) {
|
||||
children.push(<ViewMeta id={child.id} key={child.id} />);
|
||||
}
|
||||
} else {
|
||||
return <span dangerouslySetInnerHTML={{ __html: item.html }}></span>;
|
||||
}
|
||||
|
||||
return <>{children}</>;
|
||||
};
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
import { FC } from "react";
|
||||
import { useGlobal } from "web-utils";
|
||||
import { ViewGlobal } from "../../logic/global";
|
||||
import { ViewMetaRender } from "./render";
|
||||
import { ViewMetaScript } from "./script";
|
||||
|
||||
export const ViewMeta: FC<{ id: string }> = ({ id }) => {
|
||||
const v = useGlobal(ViewGlobal, "VIEW");
|
||||
|
||||
const meta = v.meta[id];
|
||||
const item = meta.item;
|
||||
|
||||
if (item.hidden && v.view.hidden) {
|
||||
if (v.view.hidden(item)) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
if (item.adv) {
|
||||
if (item.adv.js) {
|
||||
return <ViewMetaScript v={v} item={item} />;
|
||||
}
|
||||
}
|
||||
|
||||
return <ViewMetaRender item={item} v={v} />;
|
||||
};
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
import { FC } from "react";
|
||||
import { IContent } from "../../../../utils/types/general";
|
||||
import { VG } from "../../logic/global";
|
||||
import { ViewMetaChildren } from "./children";
|
||||
import { produceCSS } from "../../../../utils/css/gen";
|
||||
|
||||
export const ViewMetaRender: FC<{ item: IContent; v: VG; props?: any }> = ({
|
||||
item,
|
||||
v,
|
||||
props,
|
||||
}) => {
|
||||
const className = produceCSS(item, {
|
||||
mode: v.mode,
|
||||
hover: v.view.hover ? v.view.hover.get(item) : undefined,
|
||||
active: v.view.active ? v.view.active.get(item) : undefined,
|
||||
});
|
||||
|
||||
return (
|
||||
<div
|
||||
className={className}
|
||||
{...props}
|
||||
onPointerOver={
|
||||
v.view.hover
|
||||
? (e) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
v.view.hover?.set(item.id);
|
||||
}
|
||||
: props?.onPointerOver
|
||||
}
|
||||
onClick={
|
||||
v.view.active
|
||||
? (e) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
v.view.active?.set(item.id);
|
||||
}
|
||||
: props?.onClick
|
||||
}
|
||||
>
|
||||
<ViewMetaChildren item={item} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import { FC } from "react";
|
||||
import { IItem } from "../../../../utils/types/item";
|
||||
import { ISection } from "../../../../utils/types/section";
|
||||
import { IText } from "../../../../utils/types/text";
|
||||
import { VG } from "../../logic/global";
|
||||
import { ViewMetaRender } from "./render";
|
||||
|
||||
export const ViewMetaScript: FC<{
|
||||
v: VG;
|
||||
item: IItem | IText | ISection;
|
||||
}> = ({ item, v }) => {
|
||||
return <ViewMetaRender item={item} v={v} />;
|
||||
};
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
import { FC } from "react";
|
||||
import { ViewMeta } from "./meta";
|
||||
|
||||
export const VSection: FC<{ id: string }> = ({ id }) => {
|
||||
return <ViewMeta id={id} />;
|
||||
};
|
||||
|
|
@ -1,51 +1,64 @@
|
|||
import { FC } from "react";
|
||||
import { useGlobal } from "web-utils";
|
||||
import { Loading } from "../../utils/ui/loading";
|
||||
import { ViewGlobal } from "./logic/global";
|
||||
import { VG, ViewGlobal } from "./logic/global";
|
||||
import { vInit } from "./logic/init";
|
||||
import { vLoadCode } from "./logic/load-code";
|
||||
import { VLoad, VLoadComponent } from "./logic/types";
|
||||
import { VEntry } from "./render/entry";
|
||||
import { IContent } from "../../utils/types/general";
|
||||
|
||||
export const View: FC<{
|
||||
load: VLoad;
|
||||
component: VLoadComponent;
|
||||
site_id: string;
|
||||
page_id: string;
|
||||
mode: "desktop" | "mobile";
|
||||
bind?: (arg: { render: () => void }) => void;
|
||||
}> = ({ load, site_id, page_id, bind: onLoad }) => {
|
||||
hidden?: (item: IContent) => boolean;
|
||||
hover?: { get: (item: IContent) => boolean; set: (id: string) => void };
|
||||
active?: { get: (item: IContent) => boolean; set: (id: string) => void };
|
||||
}> = ({ load, site_id, page_id, bind, hover, active, hidden }) => {
|
||||
const v = useGlobal(ViewGlobal, "VIEW");
|
||||
|
||||
if (hidden) v.view.hidden = hidden;
|
||||
if (hover) v.view.hover = hover;
|
||||
if (active) v.view.active = active;
|
||||
|
||||
if (v.current.page_id !== page_id || v.current.site_id !== site_id) {
|
||||
v.mode = "init";
|
||||
v.status = "init";
|
||||
}
|
||||
|
||||
if (onLoad) {
|
||||
onLoad({
|
||||
if (bind) {
|
||||
bind({
|
||||
render() {
|
||||
v.mode = "rebuild";
|
||||
v.status = "rebuild";
|
||||
v.render();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
if (v.mode === "init") {
|
||||
if (v.status === "init") {
|
||||
vInit(v, { load, page_id, site_id });
|
||||
if (v.mode === "init") {
|
||||
if (v.status === "init") {
|
||||
return <Loading backdrop={false} note="init" />;
|
||||
}
|
||||
}
|
||||
|
||||
if (v.mode === "load-code" || v.mode === "loading-code") {
|
||||
if (v.status === "load-code" || v.status === "loading-code") {
|
||||
vLoadCode(v);
|
||||
if (v.mode === "load-code" || v.mode === "loading-code") {
|
||||
if (v.status === "load-code" || v.status === "loading-code") {
|
||||
return <Loading backdrop={false} note="load" />;
|
||||
}
|
||||
}
|
||||
|
||||
if (v.mode === "rebuild") {
|
||||
if (v.status === "rebuild") {
|
||||
if (load.mode === "tree_meta") {
|
||||
v.meta = load.meta;
|
||||
v.entry = load.entry;
|
||||
}
|
||||
v.bodyCache = <VEntry />;
|
||||
v.mode = "ready";
|
||||
v.status = "ready";
|
||||
}
|
||||
|
||||
return <div className="flex flex-1 flex-col relative">{v.bodyCache}</div>;
|
||||
|
|
|
|||
Loading…
Reference in New Issue