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

fix

This commit is contained in:
Rizky 2024-06-25 05:34:13 +07:00
parent 42c1142cfa
commit 3bbf39c803
1 changed files with 144 additions and 178 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import { FC, Fragment, useEffect } from "react"; import { FC, Fragment, useCallback, useEffect } from "react";
import { useGlobal, useLocal } from "web-utils"; import { useGlobal, useLocal } from "web-utils";
import { apiProxy } from "../../../../../base/load/api/api-proxy"; import { apiProxy } from "../../../../../base/load/api/api-proxy";
import { dbProxy } from "../../../../../base/load/db/db-proxy"; import { dbProxy } from "../../../../../base/load/db/db-proxy";
@ -43,6 +43,8 @@ export const EdPropInstanceOptions: FC<{
options: [] as MetaOption[], options: [] as MetaOption[],
optDeps: [] as any[], optDeps: [] as any[],
resetOnDeps: false as boolean | (() => any[]), resetOnDeps: false as boolean | (() => any[]),
open: false,
pendingVal: null as any,
}); });
const p = useGlobal(EDGlobal, "EDITOR"); const p = useGlobal(EDGlobal, "EDITOR");
@ -184,14 +186,29 @@ export const EdPropInstanceOptions: FC<{
eval(`evalue = ${prop.value}`); eval(`evalue = ${prop.value}`);
} catch (e) {} } catch (e) {}
if (local.open) {
evalue = local.pendingVal;
} else {
local.pendingVal = evalue;
}
useEffect(() => { useEffect(() => {
if (Array.isArray(local.options) && !Array.isArray(evalue)) { if (Array.isArray(local.options) && !Array.isArray(evalue)) {
if (mode !== "checkbox") {
local.val = evalue; local.val = evalue;
local.render(); local.render();
} }
}
}, [evalue]); }, [evalue]);
const onChange = (val: string, item: MetaOption | undefined) => { const onChange = useCallback(
(val: string, item: MetaOption | undefined) => {
if (local.open) {
eval(`local.pendingVal = ${val}`);
local.render();
return;
}
mprop.doc?.transact(() => { mprop.doc?.transact(() => {
mprop.set("value", val); mprop.set("value", val);
mprop.set("valueBuilt", val); mprop.set("valueBuilt", val);
@ -209,7 +226,9 @@ export const EdPropInstanceOptions: FC<{
} }
} }
}); });
}; },
[local.open]
);
let mode = cprop.meta?.option_mode; let mode = cprop.meta?.option_mode;
if (!mode) mode = "button"; if (!mode) mode = "button";
@ -283,6 +302,18 @@ export const EdPropInstanceOptions: FC<{
{mode === "checkbox" && ( {mode === "checkbox" && (
<Popover <Popover
placement="top" placement="top"
onOpenChange={(open) => {
local.open = open;
local.render();
if (!open) {
onChange(JSON.stringify(local.pendingVal), null as any);
} else {
local.pendingVal = null;
local.render();
}
}}
open={local.open}
content={ content={
<div <div
className={cx( className={cx(
@ -315,72 +346,19 @@ export const EdPropInstanceOptions: FC<{
} }
}); });
return ( return (
<Fragment key={idx}>
<SingleCheckbox <SingleCheckbox
item={item} item={item}
idx={idx} idx={idx}
val={val} val={val}
key={idx}
depth={0} depth={0}
onChange={(val) => { onChange={(val) => {
onChange(JSON.stringify(val), item); onChange(JSON.stringify(val), item);
local.render(); local.render();
}} }}
found={found}
render={local.render}
/> />
{item.options &&
found &&
item.options.map((child, idx) => {
const sub_found = found.checked.find(
(e: any) => {
if (!item.options) {
return e === child.value;
} else {
if (
typeof e === "object" &&
e.value === child.value
) {
return true;
}
return false;
}
}
);
return (
<Fragment key={idx}>
<SingleCheckbox
key={idx}
item={child}
idx={idx}
depth={1}
val={found.checked}
onChange={(newval) => {
onChange(JSON.stringify(val), child);
local.render();
}}
/>
{child.options &&
sub_found &&
child.options.map((item, sidx) => {
return (
<SingleCheckbox
item={item}
idx={idx}
key={sidx}
depth={2}
val={sub_found.checked}
onChange={(newval) => {
onChange(
JSON.stringify(val),
item
);
local.render();
}}
/>
);
})}
</Fragment>
);
})}
</Fragment>
); );
})} })}
</div> </div>
@ -390,7 +368,10 @@ export const EdPropInstanceOptions: FC<{
> >
<div <div
className="flex flex-1 items-stretch bg-white border hover:border-blue-500 hover:bg-blue-50 rounded-sm select-none cursor-pointer m-[3px]" className="flex flex-1 items-stretch bg-white border hover:border-blue-500 hover:bg-blue-50 rounded-sm select-none cursor-pointer m-[3px]"
onClick={() => {}} onClick={() => {
local.open = true;
local.render();
}}
ref={(el) => { ref={(el) => {
if (!local.checkbox.width && el) { if (!local.checkbox.width && el) {
const bound = el.getBoundingClientRect(); const bound = el.getBoundingClientRect();
@ -421,70 +402,22 @@ export const EdPropInstanceOptions: FC<{
); );
}; };
const CheckboxLayer = ({
value,
render,
evalue,
onChange,
}: {
value: MetaOption[];
render: () => void;
onChange: (val: string, item: MetaOption | undefined) => void;
evalue: Array<any>;
}) => {
return (
<div className={cx("flex flex-col bg-white")}>
{Array.isArray(value) &&
value.map((item, idx) => {
const val: any[] = Array.isArray(evalue) ? evalue : [];
const found = val.find((e) => {
if (!item.options) {
return e === item.value;
} else {
if (typeof e === "object" && e.value === item.value) {
return true;
}
return false;
}
});
return (
<Fragment key={idx}>
<SingleCheckbox
item={item}
idx={idx}
val={val}
depth={0}
onChange={(val) => {
onChange(JSON.stringify(val), item);
render();
}}
/>
{item.options && found && (
<CheckboxLayer
value={item.options}
render={render}
evalue={found.checked}
onChange={onChange}
/>
)}
</Fragment>
);
})}
</div>
);
};
const SingleCheckbox = ({ const SingleCheckbox = ({
val, val,
item, item,
idx, idx,
onChange, onChange,
depth, depth,
found,
render,
}: { }: {
item: MetaOption; item: MetaOption;
idx: number; idx: number;
depth: number; depth: number;
val: any[]; val: any[];
found: any;
onChange: (val: MetaOption[], item: MetaOption) => void; onChange: (val: MetaOption[], item: MetaOption) => void;
render: () => void;
}) => { }) => {
const is_check = !!val.find((e) => { const is_check = !!val.find((e) => {
if (!item.options) { if (!item.options) {
@ -530,6 +463,7 @@ const SingleCheckbox = ({
}, []); }, []);
return ( return (
<>
<div <div
className={cx( className={cx(
"flex pl-1 text-xs cursor-pointer select-none space-x-1 items-center", "flex pl-1 text-xs cursor-pointer select-none space-x-1 items-center",
@ -576,6 +510,38 @@ const SingleCheckbox = ({
{!is_check ? unchecked : checked} {!is_check ? unchecked : checked}
<div>{item.label}</div> <div>{item.label}</div>
</div> </div>
{item.options &&
found &&
item.options.map((child, idx) => {
const sub_found = found.checked.find((e: any) => {
if (!item.options) {
return e === child.value;
} else {
if (typeof e === "object" && e.value === child.value) {
return true;
}
return false;
}
});
return (
<SingleCheckbox
key={idx}
item={child}
idx={idx}
depth={depth + 1}
val={found.checked}
found={sub_found}
onChange={(newval) => {
onChange(val, child);
render();
}}
render={render}
/>
);
})}
</>
); );
}; };