fix
This commit is contained in:
Rizky
parent
978e58086c
commit
040db38e08
|
|
@ -86,6 +86,12 @@ export const EDGlobal = {
|
|||
ui: {
|
||||
tree: {
|
||||
search: "",
|
||||
searchMode: {
|
||||
Name: true,
|
||||
JS: false,
|
||||
HTML: false,
|
||||
CSS: false,
|
||||
},
|
||||
open: {} as Record<string, string[]>,
|
||||
},
|
||||
popup: {
|
||||
|
|
|
|||
|
|
@ -21,93 +21,175 @@ export const EdTreeSearch = () => {
|
|||
}, [local.sref, local.cursor, p.ui.tree.search]);
|
||||
|
||||
return (
|
||||
<div className="flex items-stretch h-[24px] border-b">
|
||||
<input
|
||||
name="search"
|
||||
ref={(ref) => {
|
||||
local.sref = ref;
|
||||
}}
|
||||
type="search"
|
||||
autoComplete="off"
|
||||
className={cx("flex-1 outline-none px-2 text-[13px] ")}
|
||||
placeholder="Search..."
|
||||
value={p.ui.tree.search}
|
||||
spellCheck={false}
|
||||
onInput={(e) => {
|
||||
local.cursor = e.currentTarget.selectionStart;
|
||||
p.ui.tree.search = e.currentTarget.value;
|
||||
p.render();
|
||||
}}
|
||||
onFocus={() => {
|
||||
local.focus = true;
|
||||
<div
|
||||
className="flex flex-col items-stretch border-b"
|
||||
onMouseOver={() => {
|
||||
if (local.focus) {
|
||||
local.hover = true;
|
||||
local.render();
|
||||
}}
|
||||
onBlur={() => {
|
||||
if (!local.hover && !p.ui.tree.search) {
|
||||
local.focus = false;
|
||||
}
|
||||
}}
|
||||
onMouseLeave={() => {
|
||||
local.hover = false;
|
||||
local.render();
|
||||
}}
|
||||
>
|
||||
<div className="flex items-stretch h-[24px] ">
|
||||
<input
|
||||
name="search"
|
||||
ref={(ref) => {
|
||||
local.sref = ref;
|
||||
}}
|
||||
type="search"
|
||||
autoComplete="off"
|
||||
className={cx("flex-1 outline-none px-2 text-[13px] ")}
|
||||
placeholder="Search..."
|
||||
value={p.ui.tree.search}
|
||||
spellCheck={false}
|
||||
onInput={(e) => {
|
||||
local.cursor = e.currentTarget.selectionStart;
|
||||
p.ui.tree.search = e.currentTarget.value;
|
||||
p.render();
|
||||
}}
|
||||
onFocus={() => {
|
||||
local.focus = true;
|
||||
local.render();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
}}
|
||||
onBlur={() => {
|
||||
if (!local.hover && !p.ui.tree.search) {
|
||||
local.focus = false;
|
||||
local.render();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{(local.focus || local.hover || p.ui.tree.search) && (
|
||||
<div className="p-1 bg-white text-xs border-t flex space-x-1 justify-between">
|
||||
<div className="flex space-x-1">
|
||||
{Object.entries(p.ui.tree.searchMode).map(([name, active]) => {
|
||||
return (
|
||||
<div
|
||||
className={cx(
|
||||
"px-1 cursor-pointer rounded-sm border-blue-500 border",
|
||||
active ? "bg-blue-500 text-white" : "hover:bg-blue-100"
|
||||
)}
|
||||
onClick={() => {
|
||||
(p.ui.tree.searchMode as any)[name] = !active;
|
||||
local.render();
|
||||
local.sref?.focus();
|
||||
}}
|
||||
key={name}
|
||||
>
|
||||
{name}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const doTreeSearch = (p: PG) => {
|
||||
let tree: NodeModel<EdMeta>[] = [];
|
||||
const [idxs, info] = uf.search(
|
||||
p.page.tree.map((e) => e.text),
|
||||
p.ui.tree.search
|
||||
);
|
||||
if (idxs && info) {
|
||||
let i = 0;
|
||||
for (const idx of idxs) {
|
||||
const item = p.page.tree[idx];
|
||||
const range = info.ranges[i++];
|
||||
let text = "";
|
||||
let tree: Record<string, { idx: number; node: NodeModel<EdMeta> }> = {};
|
||||
|
||||
let cur = range.shift();
|
||||
let open = true;
|
||||
for (let i = 0; i < item.text.length; i++) {
|
||||
if (typeof cur === "number") {
|
||||
if (i === cur) {
|
||||
if (open) {
|
||||
text += `<b>`;
|
||||
open = false;
|
||||
} else {
|
||||
text += `</b>`;
|
||||
open = true;
|
||||
if (p.ui.tree.searchMode.Name) {
|
||||
const [idxs, info] = uf.search(
|
||||
p.page.tree.map((e) => e.text),
|
||||
p.ui.tree.search
|
||||
);
|
||||
if (idxs && info) {
|
||||
let i = 0;
|
||||
for (const idx of idxs) {
|
||||
const item = p.page.tree[idx];
|
||||
const range = info.ranges[i];
|
||||
let text = "";
|
||||
|
||||
let cur = range.shift();
|
||||
let open = true;
|
||||
for (let i = 0; i < item.text.length; i++) {
|
||||
if (typeof cur === "number") {
|
||||
if (i === cur) {
|
||||
if (open) {
|
||||
text += `<b>`;
|
||||
open = false;
|
||||
} else {
|
||||
text += `</b>`;
|
||||
open = true;
|
||||
}
|
||||
cur = range.shift();
|
||||
}
|
||||
cur = range.shift();
|
||||
text += item.text[i];
|
||||
} else {
|
||||
text += item.text[i];
|
||||
}
|
||||
text += item.text[i];
|
||||
} else {
|
||||
text += item.text[i];
|
||||
}
|
||||
const el = (
|
||||
<div
|
||||
className={css`
|
||||
b {
|
||||
font-weight: bold;
|
||||
color: #df9100;
|
||||
text-decoration: underline;
|
||||
}
|
||||
`}
|
||||
dangerouslySetInnerHTML={{ __html: text }}
|
||||
/>
|
||||
);
|
||||
tree[item.id] = {
|
||||
idx: i,
|
||||
node: {
|
||||
...item,
|
||||
parent: "root",
|
||||
data: item.data
|
||||
? {
|
||||
...item.data,
|
||||
el,
|
||||
}
|
||||
: undefined,
|
||||
},
|
||||
};
|
||||
i++;
|
||||
}
|
||||
const el = (
|
||||
<div
|
||||
className={css`
|
||||
b {
|
||||
font-weight: bold;
|
||||
color: #df9100;
|
||||
text-decoration: underline;
|
||||
}
|
||||
`}
|
||||
dangerouslySetInnerHTML={{ __html: text }}
|
||||
/>
|
||||
);
|
||||
tree.push({
|
||||
...item,
|
||||
parent: "root",
|
||||
data: item.data
|
||||
? {
|
||||
...item.data,
|
||||
el,
|
||||
}
|
||||
: undefined,
|
||||
});
|
||||
}
|
||||
}
|
||||
return tree;
|
||||
|
||||
const search = p.ui.tree.search.toLowerCase();
|
||||
let i = 0;
|
||||
for (const row of p.page.tree) {
|
||||
const item = row.data?.item;
|
||||
if (item) {
|
||||
const js = item.adv?.js;
|
||||
if (js) {
|
||||
if (p.ui.tree.searchMode.JS) {
|
||||
if ((js as string).toLowerCase().includes(search)) {
|
||||
console.log(js);
|
||||
tree[item.id] = { idx: i++, node: { ...row, parent: "root" } };
|
||||
}
|
||||
}
|
||||
}
|
||||
const css = item.adv?.css;
|
||||
if (css) {
|
||||
if (p.ui.tree.searchMode.CSS) {
|
||||
if (css.toString().toLowerCase().includes(search)) {
|
||||
tree[item.id] = { idx: i++, node: { ...row, parent: "root" } };
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const html = item.adv?.html;
|
||||
if (html) {
|
||||
if (p.ui.tree.searchMode.HTML) {
|
||||
if (html.toString().toLowerCase().includes(search)) {
|
||||
tree[item.id] = { idx: i++, node: { ...row, parent: "root" } };
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return Object.values(tree)
|
||||
.sort((a, b) => a.idx - b.idx)
|
||||
.map((e) => e.node);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue