From 9d5dbea14da877be0b8f53a1f2309b4d31ec0b54 Mon Sep 17 00:00:00 2001
From: hilezir <pleasurazy@gmail.com>
Date: Fri, 19 Jun 2020 18:26:02 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=97=9C=E6=B3=A8=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E7=9A=84=E7=AF=A9=E9=81=B8=E6=A1=86=EF=BC=8C=E5=B0=87?=
 =?UTF-8?q?=E6=8F=90=E7=A4=BA=20enter=20key=20=E7=9A=84=E4=BD=9C=E7=94=A8?=
 =?UTF-8?q?=EF=BC=8C=E6=9C=83=E6=89=93=E9=96=8B=E7=AC=AC=E4=B8=80=E5=80=8B?=
 =?UTF-8?q?=E7=AF=A9=E9=81=B8=E7=B5=90=E6=9E=9C=E7=9A=84=E4=B8=8B=E5=96=AE?=
 =?UTF-8?q?=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../WatchlistHeader/WatchlistHeader.tsx       | 59 ++++++++++---------
 src/i18n.tsx                                  |  3 +
 2 files changed, 35 insertions(+), 27 deletions(-)

diff --git a/src/components/WatchlistHeader/WatchlistHeader.tsx b/src/components/WatchlistHeader/WatchlistHeader.tsx
index ec9a1b9..3bcfb89 100644
--- 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
index 650a11f..2a379d7 100644
--- 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',