From 64be97d07f79004336c97d8f5c114dd29590a642 Mon Sep 17 00:00:00 2001 From: moonrailgun Date: Wed, 13 Oct 2021 18:20:07 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=BF=AB=E9=80=9F=E5=88=87?= =?UTF-8?q?=E6=8D=A2=E5=8A=9F=E8=83=BD=E7=9A=84=E6=95=B4=E7=90=86=E4=B8=8E?= =?UTF-8?q?=E6=8B=86=E5=88=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../index.tsx} | 51 ++----------------- .../useQuickSwitcherActionContext.tsx | 17 +++++++ .../useQuickSwitcherFilteredActions.tsx | 42 +++++++++++++++ 3 files changed, 64 insertions(+), 46 deletions(-) rename web/src/components/{QuickSwitcher.tsx => QuickSwitcher/index.tsx} (73%) create mode 100644 web/src/components/QuickSwitcher/useQuickSwitcherActionContext.tsx create mode 100644 web/src/components/QuickSwitcher/useQuickSwitcherFilteredActions.tsx diff --git a/web/src/components/QuickSwitcher.tsx b/web/src/components/QuickSwitcher/index.tsx similarity index 73% rename from web/src/components/QuickSwitcher.tsx rename to web/src/components/QuickSwitcher/index.tsx index af573ad9..de42a6d4 100644 --- a/web/src/components/QuickSwitcher.tsx +++ b/web/src/components/QuickSwitcher/index.tsx @@ -1,52 +1,16 @@ import { stopPropagation } from '@/utils/dom-helper'; import { Input } from 'antd'; -import React, { useCallback, useMemo, useState } from 'react'; +import React, { useCallback, useState } from 'react'; import { t } from 'tailchat-shared'; -import { PortalAdd, PortalRemove } from './Portal'; -import _take from 'lodash/take'; +import { PortalAdd, PortalRemove } from '../Portal'; import clsx from 'clsx'; import { useGlobalKeyDown } from '@/hooks/useGlobalKeyDown'; import { isArrowDown, isArrowUp, isEnterHotkey } from '@/utils/hot-key'; -import { useHistory } from 'react-router'; +import { useQuickSwitcherActionContext } from './useQuickSwitcherActionContext'; +import { useQuickSwitcherFilteredActions } from './useQuickSwitcherFilteredActions'; let currentQuickSwitcherKey: number | null = null; -interface QuickActionContext { - navigate: (url: string) => void; -} - -interface QuickAction { - key: string; - label: string; - action: (context: QuickActionContext) => void; -} - -const builtinActions: QuickAction[] = [ - { - key: 'personal', - label: t('个人主页'), - action({ navigate }) { - navigate('/main/personal/friends'); - }, - }, - { - key: 'plugins', - label: t('插件中心'), - action({ navigate }) { - navigate('/main/personal/plugins'); - }, - }, -]; - -function useQuickSwitcherActionContext(): QuickActionContext { - const history = useHistory(); - return { - navigate: (url) => { - history.push(url); - }, - }; -} - const QuickSwitcher: React.FC = React.memo(() => { const [keyword, setKeyword] = useState(''); const [selectedIndex, setSelectedIndex] = useState(0); @@ -61,12 +25,7 @@ const QuickSwitcher: React.FC = React.memo(() => { currentQuickSwitcherKey = null; }, []); - const filteredActions = useMemo(() => { - return _take( - builtinActions.filter((action) => action.label.includes(keyword)), - 5 - ); - }, [keyword]); + const filteredActions = useQuickSwitcherFilteredActions(keyword); useGlobalKeyDown((e) => { if (isArrowUp(e)) { diff --git a/web/src/components/QuickSwitcher/useQuickSwitcherActionContext.tsx b/web/src/components/QuickSwitcher/useQuickSwitcherActionContext.tsx new file mode 100644 index 00000000..408f53ab --- /dev/null +++ b/web/src/components/QuickSwitcher/useQuickSwitcherActionContext.tsx @@ -0,0 +1,17 @@ +import { useHistory } from 'react-router'; + +export interface QuickActionContext { + navigate: (url: string) => void; +} + +/** + * 快速切换操作上下文信息 + */ +export function useQuickSwitcherActionContext(): QuickActionContext { + const history = useHistory(); + return { + navigate: (url) => { + history.push(url); + }, + }; +} diff --git a/web/src/components/QuickSwitcher/useQuickSwitcherFilteredActions.tsx b/web/src/components/QuickSwitcher/useQuickSwitcherFilteredActions.tsx new file mode 100644 index 00000000..63525f5b --- /dev/null +++ b/web/src/components/QuickSwitcher/useQuickSwitcherFilteredActions.tsx @@ -0,0 +1,42 @@ +import { t } from 'tailchat-shared'; +import _take from 'lodash/take'; +import { useMemo } from 'react'; +import type { QuickActionContext } from './useQuickSwitcherActionContext'; + +interface QuickAction { + key: string; + label: string; + action: (context: QuickActionContext) => void; +} + +const builtinActions: QuickAction[] = [ + { + key: 'personal', + label: t('个人主页'), + action({ navigate }) { + navigate('/main/personal/friends'); + }, + }, + { + key: 'plugins', + label: t('插件中心'), + action({ navigate }) { + navigate('/main/personal/plugins'); + }, + }, +]; + +/** + * 过滤快速搜索操作 + * @param keyword 关键字 + */ +export function useQuickSwitcherFilteredActions(keyword: string) { + const filteredActions = useMemo(() => { + return _take( + builtinActions.filter((action) => action.label.includes(keyword)), + 5 + ); + }, [keyword]); + + return filteredActions; +}