🚸 fix(search-bar): 优化向下切换焦点交互

arvinxx · Feb 13, 2021 · 57d0ea7 · 57d0ea7
1 parent e5a1532
commit 57d0ea7
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 8 deletions.
diff --git a/src/contentScripts/searchBar/app/SearchInput/useKeyboardService.ts b/src/contentScripts/searchBar/app/SearchInput/useKeyboardService.ts
@@ -5,16 +5,16 @@ import { getServiceToken } from '@/utils';
 import { SearchService } from '../useSearchService';
 import { SearchBarService } from '../useSearchBarService';
 
-type FocusType = 'input' | 'options' | 'result';
-
 /**
  * Keyboard 需要的状态
  */
 export const useKeyboardService = () => {
- const { setType, optionKeys, optionActiveIndex } = useContext(SearchService);
+ const { setType, optionKeys, optionActiveIndex, isEmpty } = useContext(
+ SearchService,
+ );
  const { hide } = useContext(SearchBarService);
 
- const [focusKey, setFocusKey] = useState<FocusType>('input');
+ const [focusKey, setFocusKey] = useState<SearchBar.FocusType>('input');
  const inputRef = useRef<Input>(null);
 
  /**
@@ -39,11 +39,14 @@ export const useKeyboardService = () => {
  inputRef.current?.focus();
  setFocusKey('input');
  };
-
  const focusOnOptions = () => {
  inputRef.current?.blur();
  setFocusKey('options');
  };
+ const focusOnResult = () => {
+ inputRef.current?.blur();
+ setFocusKey('result');
+ };
 
  // 将焦点切换到 Options
  const onKeyDown = (event: KeyboardEvent) => {
@@ -83,7 +86,11 @@ export const useKeyboardService = () => {
  break;
  case 'ArrowDown':
  event.preventDefault();
- focusOnOptions();
+ if (isEmpty) {
+ focusOnOptions();
+ } else {
+ focusOnResult();
+ }
  break;
  default:
  }
@@ -96,12 +103,13 @@ export const useKeyboardService = () => {
  return () => {
  window.onkeydown = null;
  };
- }, [focusKey, optionActiveIndex]);
+ }, [focusKey, optionActiveIndex, isEmpty]);
 
  return {
- onKeyDown,
  focusKey,
  inputRef,
+
+ onKeyDown,
  focusOnInput,
  focusOnOptions,
  };

diff --git a/src/contentScripts/searchBar/app/useSearchService.ts b/src/contentScripts/searchBar/app/useSearchService.ts
@@ -11,6 +11,7 @@ import {
  combineLatest,
  filter,
  tap,
+ distinctUntilChanged,
 } from 'rxjs/operators';
 
 import { getServiceToken, request } from '@/utils';
@@ -66,6 +67,8 @@ export const useSearchService = () => {
  debounceTime(600),
  // 过滤掉没有值的情况
  filter((value) => value.length !== 0),
+ // 过滤相同值
+ distinctUntilChanged(),
  // 提供输入
  combineLatest(input$),
  // 3. 发起请求
@@ -104,6 +107,7 @@ export const useSearchService = () => {
  setType,
  related,
  setRelated,
+ isEmpty: data.length === 0,
  };
 };
 

diff --git a/types/SearchBar.d.ts b/types/SearchBar.d.ts
@@ -3,6 +3,7 @@ declare module SearchBar {
  key: SearchBar.SearchType;
  title: string;
  }
+ type FocusType = 'input' | 'options' | 'result';
 
  export interface User {
  id: number;