Skip to content

Commit e45dc2a

Browse files
ayangwebayangweb
authored
fix: context menu search not working (#713)
1 parent 2d1ccb9 commit e45dc2a

2 files changed

Lines changed: 71 additions & 63 deletions

File tree

‎docs/content.en/docs/release-notes/_index.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ Information about release notes of Coco Server is provided here.
2323
- fix: toggle extension should register/unregister hotkey #691
2424
- fix: take coco server back on refresh #696
2525
- fix: some input fields couldn’t accept spaces #709
26+
- fix: context menu search not working #713
2627

2728
### ✈️ Improvements
2829

‎src/components/Search/ContextMenu.tsx‎

Lines changed: 70 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import { CONTEXT_MENU_PANEL_ID } from "@/constants";
2222
import { useShortcutsStore } from "@/stores/shortcutsStore";
2323
import VisibleKey from "../Common/VisibleKey";
2424
import platformAdapter from "@/utils/platformAdapter";
25+
import SearchEmpty from "../Common/SearchEmpty";
2526

2627
interface State {
2728
activeMenuIndex: number;
@@ -33,19 +34,16 @@ const ContextMenu = () => {
3334
const state = useReactive<State>({
3435
activeMenuIndex: 0,
3536
});
36-
const visibleContextMenu = useSearchStore((state) => {
37-
return state.visibleContextMenu;
38-
});
39-
const setVisibleContextMenu = useSearchStore((state) => {
40-
return state.setVisibleContextMenu;
41-
});
42-
const setOpenPopover = useShortcutsStore((state) => state.setOpenPopover);
43-
const selectedSearchContent = useSearchStore((state) => {
44-
return state.selectedSearchContent;
45-
});
37+
const { setOpenPopover } = useShortcutsStore();
4638
const [searchMenus, setSearchMenus] = useState<typeof menus>([]);
4739
const searchInputRef = useRef<HTMLInputElement>(null);
48-
const { selectedExtension, setVisibleExtensionDetail } = useSearchStore();
40+
const {
41+
visibleContextMenu,
42+
setVisibleContextMenu,
43+
selectedSearchContent,
44+
selectedExtension,
45+
setVisibleExtensionDetail,
46+
} = useSearchStore();
4947

5048
const title = useCreation(() => {
5149
if (selectedExtension) {
@@ -246,7 +244,7 @@ const ContextMenu = () => {
246244
};
247245

248246
return (
249-
searchMenus.length > 0 && (
247+
menus.length > 0 && (
250248
<>
251249
{visibleContextMenu && (
252250
<div
@@ -271,53 +269,59 @@ const ContextMenu = () => {
271269
>
272270
<div className="text-[#999] dark:text-[#666] truncate">{title}</div>
273271

274-
<ul className="flex flex-col -mx-2 p-0">
275-
{searchMenus.map((item, index) => {
276-
const { name, icon, keys, color, clickEvent } = item;
277-
278-
return (
279-
<li
280-
key={name}
281-
className={clsx(
282-
"flex justify-between items-center gap-2 px-2 py-2 rounded-lg cursor-pointer",
283-
{
284-
"bg-[#EDEDED] dark:bg-[#202126]":
285-
index === state.activeMenuIndex,
286-
}
287-
)}
288-
onMouseEnter={() => {
289-
state.activeMenuIndex = index;
290-
}}
291-
onClick={() => handleClick(clickEvent)}
292-
>
293-
<div className="flex items-center gap-2 text-black/80 dark:text-white/80">
294-
{cloneElement(icon, {
295-
className: "size-4",
296-
style: { color },
297-
})}
298-
299-
<span style={{ color }}>{name}</span>
300-
</div>
301-
302-
<div className="flex gap-[4px] text-black/60 dark:text-white/60">
303-
{keys.map((key) => (
304-
<kbd
305-
key={key}
306-
className={clsx(
307-
"flex justify-center items-center font-sans h-[20px] min-w-[20px] text-[10px] rounded-md border border-[#EDEDED] dark:border-white/10 bg-white dark:bg-[#202126]",
308-
{
309-
"px-1": key.length > 1,
310-
}
311-
)}
312-
>
313-
{key}
314-
</kbd>
315-
))}
316-
</div>
317-
</li>
318-
);
319-
})}
320-
</ul>
272+
{searchMenus.length > 0 ? (
273+
<ul className="flex flex-col -mx-2 p-0">
274+
{searchMenus.map((item, index) => {
275+
const { name, icon, keys, color, clickEvent } = item;
276+
277+
return (
278+
<li
279+
key={name}
280+
className={clsx(
281+
"flex justify-between items-center gap-2 px-2 py-2 rounded-lg cursor-pointer",
282+
{
283+
"bg-[#EDEDED] dark:bg-[#202126]":
284+
index === state.activeMenuIndex,
285+
}
286+
)}
287+
onMouseEnter={() => {
288+
state.activeMenuIndex = index;
289+
}}
290+
onClick={() => handleClick(clickEvent)}
291+
>
292+
<div className="flex items-center gap-2 text-black/80 dark:text-white/80">
293+
{cloneElement(icon, {
294+
className: "size-4",
295+
style: { color },
296+
})}
297+
298+
<span style={{ color }}>{name}</span>
299+
</div>
300+
301+
<div className="flex gap-[4px] text-black/60 dark:text-white/60">
302+
{keys.map((key) => (
303+
<kbd
304+
key={key}
305+
className={clsx(
306+
"flex justify-center items-center font-sans h-[20px] min-w-[20px] text-[10px] rounded-md border border-[#EDEDED] dark:border-white/10 bg-white dark:bg-[#202126]",
307+
{
308+
"px-1": key.length > 1,
309+
}
310+
)}
311+
>
312+
{key}
313+
</kbd>
314+
))}
315+
</div>
316+
</li>
317+
);
318+
})}
319+
</ul>
320+
) : (
321+
<div className="py-4">
322+
<SearchEmpty width={80} />
323+
</div>
324+
)}
321325

322326
<div className="-mx-3 p-2 border-t border-[#E6E6E6] dark:border-[#262626]">
323327
{visibleContextMenu && (
@@ -331,16 +335,19 @@ const ContextMenu = () => {
331335
<Input
332336
ref={searchInputRef}
333337
autoFocus
338+
autoCorrect="off"
334339
placeholder={t("search.contextMenu.search")}
335340
className="w-full bg-transparent"
336341
onChange={(event) => {
337-
const value = event.target.value;
342+
const value = event.target.value.trim();
338343

339-
setSearchMenus((prev) => {
340-
return prev.filter((item) => {
344+
const nextMenus = menus
345+
.filter((item) => !item.hide)
346+
.filter((item) => {
341347
return lowerCase(item.name).includes(lowerCase(value));
342348
});
343-
});
349+
350+
setSearchMenus(nextMenus);
344351
}}
345352
/>
346353
</VisibleKey>

0 commit comments

Comments
 (0)