refactor: 關注列表的篩選框，將提示 enter key 的作用，會打開第一個篩選結果的下單框

aqzhyi · Jun 19, 2020 · 9d5dbea · 9d5dbea
1 parent 4b5386c
commit 9d5dbea
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 27 deletions.
diff --git a/src/components/WatchlistHeader/WatchlistHeader.tsx b/src/components/WatchlistHeader/WatchlistHeader.tsx
@@ -4,7 +4,7 @@ import { Provider } from 'react-redux'
 import store, { useTypedSelector } from '@/store/_store'
 import { i18n } from '@/i18n'
 import { GM } from '@/GM'
-import { InputGroup, Button, ControlGroup } from '@blueprintjs/core'
+import { Tooltip } from '@blueprintjs/core'
 import { storage } from '@/storage'
 import { useAppSelector } from '@/hooks/useAppSelector'
 import { useAppDispatch } from '@/hooks/useAppDispatch'
@@ -81,32 +81,37 @@ export const WatchlistHeader: React.FC = () => {
   return (
     <Stack horizontal tokens={{ childrenGap: 16 }} className={NAME_HAS_FLAG}>
       <Stack.Item>
-        <TextField
-          componentRef={searchBoxRef}
-          placeholder={i18n.輸入以過濾()}
-          iconProps={{ iconName: filterText ? 'FilterSolid' : 'Filter' }}
-          onChange={(event, newValue) => {
-            filterTextSet(newValue)
-            showMeBy(newValue)
-
-            if (!newValue) {
-              toggleListInvested(shouldShowInvested)
-            }
-          }}
-          onMouseEnter={() => {
-            // setTimeout 避免 polyfills-es5 報錯 Cannot assign to read only property 'event' of object '[object Object]'
-            globalThis.setTimeout(() => {
-              searchBoxRef.current?.focus()
-            })
-          }}
-          onKeyDown={event => {
-            if (event.key.toLowerCase() === 'enter') {
-              $('[automation-id="buy-sell-button-container-buy"]:visible')
-                .eq(0)
-                .click()
-            }
-          }}
-        />
+        <Tooltip
+          position='left'
+          content={i18n.回車鍵使彈出下單框()}
+        >
+          <TextField
+            componentRef={searchBoxRef}
+            placeholder={i18n.輸入以過濾()}
+            iconProps={{ iconName: filterText ? 'FilterSolid' : 'Filter' }}
+            onChange={(event, newValue) => {
+              filterTextSet(newValue)
+              showMeBy(newValue)
+
+              if (!newValue) {
+                toggleListInvested(shouldShowInvested)
+              }
+            }}
+            onMouseEnter={() => {
+              // setTimeout 避免 polyfills-es5 報錯 Cannot assign to read only property 'event' of object '[object Object]'
+              globalThis.setTimeout(() => {
+                searchBoxRef.current?.focus()
+              })
+            }}
+            onKeyDown={event => {
+              if (event.key.toLowerCase() === 'enter') {
+                $('[automation-id="buy-sell-button-container-buy"]:visible')
+                  .eq(0)
+                  .click()
+              }
+            }}
+          />
+        </Tooltip>
       </Stack.Item>
 
       <Stack.Item>

diff --git a/src/i18n.tsx b/src/i18n.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react'
 
 const zh = {
+  回車鍵使彈出下單框: () => '使用 enter 時，將會自動開啟第一個篩選標的之下單框',
   使已投資顯示: () => '已投資',
   左下入金按鈕: (value: number) => `入金（${value}）銀行賣出`,
   使鎖定下單重複一致: () => '自動上次',
@@ -57,6 +58,8 @@ const zh = {
 }
 
 const en: typeof zh = {
+  回車鍵使彈出下單框: () =>
+    'Use Enter key to popup the first result of filter items.',
   使已投資顯示: () => 'Invested',
   左下入金按鈕: (value: number) => `Deposit（${value}）Sold`,
   使鎖定下單重複一致: () => 'Same Order',