fix
This commit is contained in:
rizrmd
parent
30446a29ce
commit
cb0a9b5360
|
|
@ -32,8 +32,7 @@ export const EdPropInstanceOptions: FC<{
|
||||||
const prop = mprop.toJSON() as FNCompDef;
|
const prop = mprop.toJSON() as FNCompDef;
|
||||||
const local = useLocal({
|
const local = useLocal({
|
||||||
codeEditing: false,
|
codeEditing: false,
|
||||||
loading: false,
|
loading: true,
|
||||||
loaded: false as any,
|
|
||||||
isOpen: false,
|
isOpen: false,
|
||||||
val: "",
|
val: "",
|
||||||
metaFn: null as null | (() => Promise<MetaOption[]>),
|
metaFn: null as null | (() => Promise<MetaOption[]>),
|
||||||
|
|
@ -47,13 +46,12 @@ export const EdPropInstanceOptions: FC<{
|
||||||
|
|
||||||
config.opt[name] = () => {
|
config.opt[name] = () => {
|
||||||
local.metaFn = null;
|
local.metaFn = null;
|
||||||
local.loaded = null;
|
|
||||||
local.loading = false;
|
local.loading = false;
|
||||||
local.render();
|
local.render();
|
||||||
};
|
};
|
||||||
|
|
||||||
if (cprop.meta?.options || cprop.meta?.optionsBuilt) {
|
if (cprop.meta?.options || cprop.meta?.optionsBuilt) {
|
||||||
if (!local.loaded || !local.metaFn) {
|
if (!local.metaFn || local.optDeps.length > 0) {
|
||||||
let fn = "" as any;
|
let fn = "" as any;
|
||||||
let arg = {};
|
let arg = {};
|
||||||
try {
|
try {
|
||||||
|
|
@ -132,8 +130,6 @@ export const EdPropInstanceOptions: FC<{
|
||||||
console.error(e);
|
console.error(e);
|
||||||
console.warn(fn.toString(), arg);
|
console.warn(fn.toString(), arg);
|
||||||
}
|
}
|
||||||
} else {
|
|
||||||
local.options = local.loaded;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -144,7 +140,7 @@ export const EdPropInstanceOptions: FC<{
|
||||||
const res = local.metaFn();
|
const res = local.metaFn();
|
||||||
const callback = (e: any) => {
|
const callback = (e: any) => {
|
||||||
local.loading = false;
|
local.loading = false;
|
||||||
local.loaded = e;
|
local.options = e;
|
||||||
local.render();
|
local.render();
|
||||||
};
|
};
|
||||||
if (res instanceof Promise) {
|
if (res instanceof Promise) {
|
||||||
|
|
@ -155,6 +151,9 @@ export const EdPropInstanceOptions: FC<{
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error(e);
|
console.error(e);
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
|
local.loading = false;
|
||||||
|
local.render();
|
||||||
}
|
}
|
||||||
}, local.optDeps);
|
}, local.optDeps);
|
||||||
|
|
||||||
|
|
@ -205,175 +204,195 @@ export const EdPropInstanceOptions: FC<{
|
||||||
<div className="flex items-stretch min-h-[28px]">
|
<div className="flex items-stretch min-h-[28px]">
|
||||||
<EdPropLabel name={label || name} labelClick={labelClick} />
|
<EdPropLabel name={label || name} labelClick={labelClick} />
|
||||||
<div className="flex flex-1 justify-end items-stretch">
|
<div className="flex flex-1 justify-end items-stretch">
|
||||||
{mode === "dropdown" && (
|
{local.loading ? (
|
||||||
<select
|
<div className="flex flex-1 justify-center items-center">
|
||||||
value={evalue}
|
Loading...
|
||||||
className="flex-1 border-l outline-none"
|
|
||||||
onChange={(ev) => {
|
|
||||||
onChange(
|
|
||||||
`"${ev.currentTarget.value}"`,
|
|
||||||
local.options.find((e) => e.value === ev.currentTarget.value)
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{Array.isArray(local.options) &&
|
|
||||||
local.options.map((item, idx) => {
|
|
||||||
return (
|
|
||||||
<option key={idx} value={item.value}>
|
|
||||||
{item.label}
|
|
||||||
</option>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</select>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{mode === "button" && (
|
|
||||||
<div className="flex-1 pt-1 px-1 flex flex-wrap justify-end space-x-1">
|
|
||||||
{Array.isArray(local.options) &&
|
|
||||||
local.options.map((item, idx) => {
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={idx}
|
|
||||||
className={cx(
|
|
||||||
"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={() => {
|
|
||||||
onChange(`"${item.value}"`, item);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{item.label}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
) : (
|
||||||
|
<>
|
||||||
{mode === "checkbox" && (
|
{mode === "dropdown" && (
|
||||||
<Popover
|
<select
|
||||||
placement="top"
|
value={evalue}
|
||||||
content={
|
className="flex-1 border-l outline-none"
|
||||||
<div
|
onChange={(ev) => {
|
||||||
className={cx(
|
onChange(
|
||||||
"relative max-h-[400px] min-w-[200px] overflow-y-auto overflow-x-hidden",
|
`"${ev.currentTarget.value}"`,
|
||||||
css`
|
local.options.find(
|
||||||
margin: 0px -8px -6px -8px;
|
(e) => e.value === ev.currentTarget.value
|
||||||
background: white;
|
)
|
||||||
padding: 5px 0px 0px 0px;
|
);
|
||||||
width: ${local.checkbox.width}px;
|
}}
|
||||||
`
|
|
||||||
)}
|
|
||||||
>
|
>
|
||||||
<div className={cx("flex flex-col bg-white")}>
|
{Array.isArray(local.options) &&
|
||||||
{Array.isArray(local.options) &&
|
local.options.map((item, idx) => {
|
||||||
local.options.map((item, idx) => {
|
return (
|
||||||
const val: any[] = Array.isArray(evalue) ? evalue : [];
|
<option key={idx} value={item.value}>
|
||||||
const found = val.find((e) => {
|
{item.label}
|
||||||
if (!item.options) {
|
</option>
|
||||||
return e === item.value;
|
);
|
||||||
} else {
|
})}
|
||||||
if (typeof e === "object" && e.value === item.value) {
|
</select>
|
||||||
return true;
|
)}
|
||||||
}
|
|
||||||
return false;
|
{mode === "button" && (
|
||||||
}
|
<div className="flex-1 pt-1 px-1 flex flex-wrap justify-end space-x-1">
|
||||||
});
|
{Array.isArray(local.options) &&
|
||||||
return (
|
local.options.map((item, idx) => {
|
||||||
<Fragment key={idx}>
|
return (
|
||||||
<SingleCheckbox
|
<div
|
||||||
item={item}
|
key={idx}
|
||||||
idx={idx}
|
className={cx(
|
||||||
val={val}
|
"flex px-2 text-xs mb-1 border rounded-sm cursor-pointer justify-center select-none items-center",
|
||||||
depth={0}
|
item.value !== evalue
|
||||||
onChange={(val) => {
|
? "bg-white text-blue-700 hover:bg-blue-50 hover:border-blue-500"
|
||||||
onChange(JSON.stringify(val), item);
|
: "bg-blue-700 text-white border-blue-700"
|
||||||
local.render();
|
)}
|
||||||
}}
|
onClick={() => {
|
||||||
/>
|
onChange(`"${item.value}"`, item);
|
||||||
{item.options &&
|
}}
|
||||||
found &&
|
>
|
||||||
item.options.map((child, idx) => {
|
{item.label}
|
||||||
const sub_found = found.checked.find((e: any) => {
|
</div>
|
||||||
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>
|
</div>
|
||||||
}
|
)}
|
||||||
asChild
|
|
||||||
>
|
{mode === "checkbox" && (
|
||||||
<div
|
<Popover
|
||||||
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]"
|
placement="top"
|
||||||
onClick={() => {}}
|
content={
|
||||||
ref={(el) => {
|
<div
|
||||||
if (!local.checkbox.width && el) {
|
className={cx(
|
||||||
const bound = el.getBoundingClientRect();
|
"relative max-h-[400px] min-w-[200px] overflow-y-auto overflow-x-hidden",
|
||||||
local.checkbox.width = bound.width;
|
css`
|
||||||
setTimeout(local.render, 500);
|
margin: 0px -8px -6px -8px;
|
||||||
|
background: white;
|
||||||
|
padding: 5px 0px 0px 0px;
|
||||||
|
width: ${local.checkbox.width}px;
|
||||||
|
`
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className={cx("flex flex-col bg-white")}>
|
||||||
|
{Array.isArray(local.options) &&
|
||||||
|
local.options.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);
|
||||||
|
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>
|
||||||
}
|
}
|
||||||
}}
|
asChild
|
||||||
>
|
>
|
||||||
<div className="flex-1 flex items-center">
|
<div
|
||||||
<div className="px-1">
|
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]"
|
||||||
{Array.isArray(evalue)
|
onClick={() => {}}
|
||||||
? evalue.length === 0
|
ref={(el) => {
|
||||||
? "Select Item"
|
if (!local.checkbox.width && el) {
|
||||||
: `${evalue.length} selected`
|
const bound = el.getBoundingClientRect();
|
||||||
: `Select Item`}
|
local.checkbox.width = bound.width;
|
||||||
|
setTimeout(local.render, 500);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="flex-1 flex items-center">
|
||||||
|
<div className="px-1">
|
||||||
|
{Array.isArray(evalue)
|
||||||
|
? evalue.length === 0
|
||||||
|
? "Select Item"
|
||||||
|
: `${evalue.length} selected`
|
||||||
|
: `Select Item`}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="pr-1 pt-[2px]">
|
||||||
|
<ChevronDown />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Popover>
|
||||||
<div className="pr-1 pt-[2px]">
|
)}
|
||||||
<ChevronDown />
|
</>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Popover>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue