From f8d1bb7cd4187e7121d987c954e9cf47da87f6ef Mon Sep 17 00:00:00 2001 From: yuruo Date: Wed, 5 Jun 2024 14:48:48 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20=E6=B7=BB=E5=8A=A0(ui):=20=E5=BC=95?= =?UTF-8?q?=E5=85=A5useCodeSelect=E9=92=A9=E5=AD=90=E5=8A=9F=E8=83=BD?= =?UTF-8?q?=E4=BB=A5=E6=9B=BF=E6=8D=A2=E6=97=A7=E7=9A=84=E9=80=BB=E8=BE=91?= =?UTF-8?q?=20=20=20=20=E2=9C=A8=20=E6=B7=BB=E5=8A=A0(ui):=20=E5=BC=95?= =?UTF-8?q?=E5=85=A5useSearch=E9=92=A9=E5=AD=90=E4=BB=A5=E6=9B=BF=E4=BB=A3?= =?UTF-8?q?=E6=97=A7=E6=90=9C=E7=B4=A2=E9=80=BB=E8=BE=91=20=20=20=20?= =?UTF-8?q?=E2=99=BB=EF=B8=8F=20=E9=87=8D=E6=9E=84(ui):=20=E9=80=9A?= =?UTF-8?q?=E8=BF=87=E4=BD=BF=E7=94=A8=E6=96=B0=E7=9A=84=E9=92=A9=E5=AD=90?= =?UTF-8?q?=E5=87=BD=E6=95=B0=EF=BC=8C=E9=87=8D=E6=9E=84=E7=BB=93=E6=9E=9C?= =?UTF-8?q?=E5=92=8C=E6=90=9C=E7=B4=A2=E7=BB=84=E4=BB=B6=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../renderer/src/components/Result/index.tsx | 36 +++------------ .../renderer/src/components/Search/index.tsx | 16 ++----- .../src/renderer/src/hooks/useCodeSelect.ts | 44 +++++++++++++++++++ .../src/renderer/src/hooks/useSearch.ts | 17 +++++++ 4 files changed, 69 insertions(+), 44 deletions(-) create mode 100644 ui/autoMate/src/renderer/src/hooks/useCodeSelect.ts create mode 100644 ui/autoMate/src/renderer/src/hooks/useSearch.ts diff --git a/ui/autoMate/src/renderer/src/components/Result/index.tsx b/ui/autoMate/src/renderer/src/components/Result/index.tsx index 029081e..04a0567 100644 --- a/ui/autoMate/src/renderer/src/components/Result/index.tsx +++ b/ui/autoMate/src/renderer/src/components/Result/index.tsx @@ -1,38 +1,12 @@ -import useCode from "@renderer/hooks/useCode" -import { useCallback, useEffect, useState } from "react" + +import useCodeSelect from '@renderer/hooks/useCodeSelect' import styles from './styles.module.scss' export default function Result() { - const {data} = useCode() - const [currentIndex, setCurrentIndex] = useState(0) - const handleKeyEvent = useCallback((e: KeyboardEvent) => { - // 初始没有数据，所以data.length为0 ，防止向上箭头，将数据变为-1 - if (data.length === 0) return - switch(e.key){ - case 'ArrowUp': - setCurrentIndex(currentIndex - 1 < 0 ? data.length - 1 : currentIndex - 1) - break - case 'ArrowDown': - setCurrentIndex(currentIndex + 1 >= data.length ? 0 : currentIndex + 1) - break - case 'Enter': - console.log(data[currentIndex].content) - break - } - // 将 data 和 currentIndex 变化时，重新定义该函数 - }, [data, currentIndex]) - useEffect(() => { - document.addEventListener('keydown', handleKeyEvent) - // 如果 data 发生变化，先前的事件监听器会被移除，然后再添加新的监听器，以确保使用最新的 data - // 如果不移除，data变化会不停添加监听器 - return () => { - document.removeEventListener('keydown', handleKeyEvent) - } - }, [handleKeyEvent]) + const {data, id} = useCodeSelect() return (
- {currentIndex} - {data.map((item, index) => ( -
+ {data.map((item) => ( +

{item.content}

))} diff --git a/ui/autoMate/src/renderer/src/components/Search/index.tsx b/ui/autoMate/src/renderer/src/components/Search/index.tsx index 48a1f7f..295c9ed 100644 --- a/ui/autoMate/src/renderer/src/components/Search/index.tsx +++ b/ui/autoMate/src/renderer/src/components/Search/index.tsx @@ -1,18 +1,8 @@ -import useCode from "@renderer/hooks/useCode" -import { ChangeEvent, useState } from "react" -import { codes } from "@renderer/data" +import useSearch from "@renderer/hooks/useSearch" + export default function Search(): JSX.Element { - const {setData} = useCode() - const [search, setSearch] = useState('') - const handleSearch = (e: ChangeEvent) => { - setSearch(e.target.value) - setData( - codes.filter((code) => - code.content.toLowerCase().includes(e.target.value.toLowerCase() || '@@@@@@') - ) - ) - } + const {search, handleSearch} = useSearch() return (
diff --git a/ui/autoMate/src/renderer/src/hooks/useCodeSelect.ts b/ui/autoMate/src/renderer/src/hooks/useCodeSelect.ts new file mode 100644 index 0000000..68bede2 --- /dev/null +++ b/ui/autoMate/src/renderer/src/hooks/useCodeSelect.ts @@ -0,0 +1,44 @@ +import useCode from "@renderer/hooks/useCode" +import { useCallback, useEffect, useState } from "react" +export default()=>{ + const {data} = useCode() + const [id, setId] = useState(0) + const handleKeyEvent = useCallback((e: KeyboardEvent) => { + // 初始没有数据，所以data.length为0 ，防止向上箭头，将数据变为-1 + if (data.length === 0) return + switch(e.key){ + case 'ArrowUp': + setId((id)=>{ + // 找到当前id的索引 + const index = data.findIndex((item)=>item.id === id) + return data[index - 1]?.id || data[data.length - 1].id + }) + break + case 'ArrowDown': + setId((id)=>{ + // 找到当前id的索引 + const index = data.findIndex((item)=>item.id === id) + return data[index + 1]?.id || data[0].id + }) + break + case 'Enter': { + const content = data.find((item)=>item.id == id)?.content + if (content) console.log(content) + break + } + } + // 将 data 和 currentIndex 变化时，重新定义该函数，currentIndex会更新为最新值 + }, [data, id]) + useEffect(() => { + document.addEventListener('keydown', handleKeyEvent) + // 如果 data 发生变化，先前的事件监听器会被移除，然后再添加新的监听器，以确保使用最新的 data + // 如果不移除，data变化会不停添加监听器 + return () => { + document.removeEventListener('keydown', handleKeyEvent) + } + }, [handleKeyEvent]) + // 当输入数据变化时，将当前索引重置为0 + useEffect(() => setId(0), [data]) + return {data, id} +} + diff --git a/ui/autoMate/src/renderer/src/hooks/useSearch.ts b/ui/autoMate/src/renderer/src/hooks/useSearch.ts new file mode 100644 index 0000000..2555895 --- /dev/null +++ b/ui/autoMate/src/renderer/src/hooks/useSearch.ts @@ -0,0 +1,17 @@ +import useCode from "@renderer/hooks/useCode" +import { ChangeEvent, useState } from "react" +import { codes } from "@renderer/data" +export default()=>{ + const {setData} = useCode() + const [search, setSearch] = useState('') + const handleSearch = (e: ChangeEvent) => { + setSearch(e.target.value) + setData( + codes.filter((code) => + code.content.toLowerCase().includes(e.target.value.toLowerCase() || '@@@@@@') + ) + ) + } + return {search, handleSearch} +} +