From fdce172c57e83d12f01bbd98ffba2b4493fa4414 Mon Sep 17 00:00:00 2001
From: Zhiyuan Zheng <me@xmflsct.com>
Date: Sun, 10 Jan 2021 13:35:46 +0100
Subject: [PATCH] Try to fix search bar issue

https://github.com/react-navigation/react-navigation/issues/6746#issuecomment-583897436
---
 .../Timelines/Timeline/Shared/Content.tsx     |  2 +-
 src/screens/Shared/Search.tsx                 | 63 ++---------------
 src/screens/Shared/sharedScreens.tsx          | 67 +++++++++++++++++--
 src/utils/styles/constants.ts                 |  4 +-
 4 files changed, 71 insertions(+), 65 deletions(-)

diff --git a/src/components/Timelines/Timeline/Shared/Content.tsx b/src/components/Timelines/Timeline/Shared/Content.tsx
index 8ac4f632..7f25c841 100644
--- a/src/components/Timelines/Timeline/Shared/Content.tsx
+++ b/src/components/Timelines/Timeline/Shared/Content.tsx
@@ -52,7 +52,7 @@ const TimelineContent: React.FC<Props> = ({
           emojis={status.emojis}
           mentions={status.mentions}
           tags={status.tags}
-          numberOfLines={numberOfLines}
+          numberOfLines={highlighted ? 999 : numberOfLines}
           disableDetails={disableDetails}
         />
       )}
diff --git a/src/screens/Shared/Search.tsx b/src/screens/Shared/Search.tsx
index 2351582c..8913d354 100644
--- a/src/screens/Shared/Search.tsx
+++ b/src/screens/Shared/Search.tsx
@@ -5,7 +5,6 @@ import TimelineDefault from '@root/components/Timelines/Timeline/Default'
 import hookSearch from '@utils/queryHooks/search'
 import { StyleConstants } from '@utils/styles/constants'
 import { useTheme } from '@utils/styles/ThemeManager'
-import { debounce } from 'lodash'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import {
   KeyboardAvoidingView,
@@ -16,53 +15,19 @@ import {
   View
 } from 'react-native'
 import { Chase } from 'react-native-animated-spinkit'
-import { TextInput } from 'react-native-gesture-handler'
 
-const ScreenSharedSearch: React.FC = () => {
+export interface Props {
+  searchTerm: string | undefined
+}
+
+const ScreenSharedSearch: React.FC<Props> = ({ searchTerm }) => {
   const navigation = useNavigation()
   const { theme } = useTheme()
-  const [searchTerm, setSearchTerm] = useState<string | undefined>()
   const { status, data, refetch } = hookSearch({
     term: searchTerm,
     options: { enabled: false }
   })
 
-  useEffect(() => {
-    const updateHeaderRight = () =>
-      navigation.setOptions({
-        headerCenter: () => (
-          <View style={styles.searchBar}>
-            <Text
-              style={{ ...StyleConstants.FontStyle.M, color: theme.primary }}
-            >
-              搜索
-            </Text>
-            <TextInput
-              style={[
-                styles.textInput,
-                {
-                  color: theme.primary
-                }
-              ]}
-              autoFocus
-              onChangeText={onChangeText}
-              autoCapitalize='none'
-              autoCorrect={false}
-              clearButtonMode='never'
-              keyboardType='web-search'
-              onSubmitEditing={({ nativeEvent: { text } }) =>
-                setSearchTerm(text)
-              }
-              placeholder={'些什么'}
-              placeholderTextColor={theme.secondary}
-              returnKeyType='go'
-            />
-          </View>
-        )
-      })
-    return updateHeaderRight()
-  }, [])
-
   const [setctionData, setSectionData] = useState<
     { title: string; data: any }[]
   >([])
@@ -89,12 +54,6 @@ const ScreenSharedSearch: React.FC = () => {
     [data]
   )
 
-  const onChangeText = useCallback(
-    debounce(text => setSearchTerm(text), 1000, {
-      trailing: true
-    }),
-    []
-  )
   useEffect(() => {
     if (searchTerm) {
       refetch()
@@ -233,20 +192,8 @@ const styles = StyleSheet.create({
   base: {
     minHeight: '100%'
   },
-  searchBar: {
-    flexBasis: '80%',
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  textInput: {
-    ...StyleConstants.FontStyle.M,
-    paddingLeft: StyleConstants.Spacing.XS,
-    marginBottom:
-      (StyleConstants.Font.LineHeight.M - StyleConstants.Font.Size.M) / 2
-  },
   emptyBase: {
     marginVertical: StyleConstants.Spacing.Global.PagePadding,
-    // paddingHorizontal: StyleConstants.Spacing.Global.PagePadding
     alignItems: 'center'
   },
   loading: { flex: 1, alignItems: 'center' },
diff --git a/src/screens/Shared/sharedScreens.tsx b/src/screens/Shared/sharedScreens.tsx
index fae9055e..3aade782 100644
--- a/src/screens/Shared/sharedScreens.tsx
+++ b/src/screens/Shared/sharedScreens.tsx
@@ -9,8 +9,13 @@ import ScreenSharedImagesViewer from '@screens/Shared/ImagesViewer'
 import ScreenSharedRelationships from '@screens/Shared/Relationships'
 import ScreenSharedSearch from '@screens/Shared/Search'
 import ScreenSharedToot from '@screens/Shared/Toot'
-import React from 'react'
+import { StyleConstants } from '@utils/styles/constants'
+import { useTheme } from '@utils/styles/ThemeManager'
+import { debounce } from 'lodash'
+import React, { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { StyleSheet, Text, View } from 'react-native'
+import { TextInput } from 'react-native-gesture-handler'
 import { NativeStackNavigationOptions } from 'react-native-screens/lib/typescript'
 import {
   NativeStackNavigationEventMap,
@@ -69,8 +74,17 @@ const sharedScreens = (
     }: NativeStackNavigatorProps) => JSX.Element
   >
 ) => {
+  const { theme } = useTheme()
   const { t } = useTranslation()
 
+  const [searchTerm, setSearchTerm] = useState<string>()
+  const onChangeText = useCallback(
+    debounce(text => setSearchTerm(text), 1000, {
+      trailing: true
+    }),
+    []
+  )
+
   return [
     <Stack.Screen
       key='Screen-Shared-Account'
@@ -134,11 +148,42 @@ const sharedScreens = (
     <Stack.Screen
       key='Screen-Shared-Search'
       name='Screen-Shared-Search'
-      component={ScreenSharedSearch}
       options={({ navigation }: any) => ({
-        headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />
+        headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />,
+        // https://github.com/react-navigation/react-navigation/issues/6746#issuecomment-583897436
+        headerCenter: () => (
+          <View style={styles.searchBar}>
+            <Text
+              style={{ ...StyleConstants.FontStyle.M, color: theme.primary }}
+            >
+              搜索
+            </Text>
+            <TextInput
+              style={[
+                styles.textInput,
+                {
+                  color: theme.primary
+                }
+              ]}
+              autoFocus
+              onChangeText={onChangeText}
+              autoCapitalize='none'
+              autoCorrect={false}
+              clearButtonMode='never'
+              keyboardType='web-search'
+              onSubmitEditing={({ nativeEvent: { text } }) =>
+                setSearchTerm(text)
+              }
+              placeholder={'些什么'}
+              placeholderTextColor={theme.secondary}
+              returnKeyType='go'
+            />
+          </View>
+        )
       })}
-    />,
+    >
+      {() => <ScreenSharedSearch searchTerm={searchTerm} />}
+    </Stack.Screen>,
     <Stack.Screen
       key='Screen-Shared-Toot'
       name='Screen-Shared-Toot'
@@ -151,4 +196,18 @@ const sharedScreens = (
   ]
 }
 
+const styles = StyleSheet.create({
+  searchBar: {
+    flexBasis: '80%',
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  textInput: {
+    ...StyleConstants.FontStyle.M,
+    paddingLeft: StyleConstants.Spacing.XS,
+    marginBottom:
+      (StyleConstants.Font.LineHeight.M - StyleConstants.Font.Size.M) / 2
+  }
+})
+
 export default sharedScreens
diff --git a/src/utils/styles/constants.ts b/src/utils/styles/constants.ts
index a74707de..3aaf55f0 100644
--- a/src/utils/styles/constants.ts
+++ b/src/utils/styles/constants.ts
@@ -3,13 +3,13 @@ const Base = 4
 export const StyleConstants = {
   Font: {
     Size: { S: 14, M: 16, L: 18 },
-    LineHeight: { S: 20, M: 22, L: 26 },
+    LineHeight: { S: 20, M: 22, L: 30 },
     Weight: { Bold: '600' as '600' }
   },
   FontStyle: {
     S: { fontSize: 14, lineHeight: 20 },
     M: { fontSize: 16, lineHeight: 22 },
-    L: { fontSize: 20, lineHeight: 26 }
+    L: { fontSize: 20, lineHeight: 30 }
   },
 
   Spacing: {