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: {