2021-01-19 01:13:45 +01:00
|
|
|
import { HeaderCenter, HeaderLeft } from '@components/Header'
|
2021-01-16 00:00:31 +01:00
|
|
|
import { ParseEmojis } from '@components/Parse'
|
2021-01-07 22:18:14 +01:00
|
|
|
import { StackNavigationState, TypedNavigator } from '@react-navigation/native'
|
|
|
|
import { StackScreenProps } from '@react-navigation/stack'
|
2021-01-30 01:29:15 +01:00
|
|
|
import TabSharedAccount from '@screens/Tabs/Shared/Account'
|
|
|
|
import TabSharedAttachments from '@screens/Tabs/Shared/Attachments'
|
|
|
|
import TabSharedHashtag from '@screens/Tabs/Shared/Hashtag'
|
|
|
|
import TabSharedRelationships from '@screens/Tabs/Shared/Relationships'
|
|
|
|
import TabSharedSearch from '@screens/Tabs/Shared/Search'
|
|
|
|
import TabSharedToot from '@screens/Tabs/Shared/Toot'
|
2021-01-10 13:35:46 +01:00
|
|
|
import { StyleConstants } from '@utils/styles/constants'
|
|
|
|
import { useTheme } from '@utils/styles/ThemeManager'
|
|
|
|
import { debounce } from 'lodash'
|
|
|
|
import React, { useCallback, useState } from 'react'
|
2021-01-30 01:29:15 +01:00
|
|
|
import { Trans, useTranslation } from 'react-i18next'
|
2021-01-19 01:13:45 +01:00
|
|
|
import { Platform, StyleSheet, Text, View } from 'react-native'
|
2021-01-10 13:35:46 +01:00
|
|
|
import { TextInput } from 'react-native-gesture-handler'
|
2021-01-07 22:18:14 +01:00
|
|
|
import {
|
|
|
|
NativeStackNavigationEventMap,
|
2021-01-30 01:29:15 +01:00
|
|
|
NativeStackNavigationOptions,
|
2021-01-07 22:18:14 +01:00
|
|
|
NativeStackNavigatorProps
|
|
|
|
} from 'react-native-screens/lib/typescript/types'
|
|
|
|
|
2021-01-10 02:12:14 +01:00
|
|
|
export type BaseScreens =
|
2021-01-30 01:29:15 +01:00
|
|
|
| Nav.TabLocalStackParamList
|
|
|
|
| Nav.TabPublicStackParamList
|
|
|
|
| Nav.TabNotificationsStackParamList
|
|
|
|
| Nav.TabMeStackParamList
|
2021-01-07 22:18:14 +01:00
|
|
|
|
|
|
|
export type SharedAccountProp = StackScreenProps<
|
|
|
|
BaseScreens,
|
2021-01-30 01:29:15 +01:00
|
|
|
'Tab-Shared-Account'
|
2021-01-07 22:18:14 +01:00
|
|
|
>
|
|
|
|
|
2021-01-16 00:00:31 +01:00
|
|
|
export type SharedAttachmentsProp = StackScreenProps<
|
|
|
|
BaseScreens,
|
2021-01-30 01:29:15 +01:00
|
|
|
'Tab-Shared-Attachments'
|
2021-01-07 22:18:14 +01:00
|
|
|
>
|
|
|
|
|
|
|
|
export type SharedHashtagProp = StackScreenProps<
|
|
|
|
BaseScreens,
|
2021-01-30 01:29:15 +01:00
|
|
|
'Tab-Shared-Hashtag'
|
2021-01-07 22:18:14 +01:00
|
|
|
>
|
|
|
|
|
|
|
|
export type SharedRelationshipsProp = StackScreenProps<
|
|
|
|
BaseScreens,
|
2021-01-30 01:29:15 +01:00
|
|
|
'Tab-Shared-Relationships'
|
2021-01-07 22:18:14 +01:00
|
|
|
>
|
|
|
|
|
2021-01-16 00:00:31 +01:00
|
|
|
export type SharedSearchProp = StackScreenProps<
|
|
|
|
BaseScreens,
|
2021-01-30 01:29:15 +01:00
|
|
|
'Tab-Shared-Search'
|
2021-01-16 00:00:31 +01:00
|
|
|
>
|
|
|
|
|
2021-01-30 01:29:15 +01:00
|
|
|
export type SharedTootProp = StackScreenProps<BaseScreens, 'Tab-Shared-Toot'>
|
2021-01-07 22:18:14 +01:00
|
|
|
|
|
|
|
const sharedScreens = (
|
|
|
|
Stack: TypedNavigator<
|
|
|
|
BaseScreens,
|
|
|
|
StackNavigationState<Record<string, object | undefined>>,
|
|
|
|
NativeStackNavigationOptions,
|
|
|
|
NativeStackNavigationEventMap,
|
|
|
|
({
|
|
|
|
initialRouteName,
|
|
|
|
children,
|
|
|
|
screenOptions,
|
|
|
|
...rest
|
|
|
|
}: NativeStackNavigatorProps) => JSX.Element
|
|
|
|
>
|
|
|
|
) => {
|
2021-03-08 23:48:09 +01:00
|
|
|
const { mode, theme } = useTheme()
|
2020-11-30 00:24:53 +01:00
|
|
|
const { t } = useTranslation()
|
|
|
|
|
2021-01-10 13:35:46 +01:00
|
|
|
const [searchTerm, setSearchTerm] = useState<string>()
|
|
|
|
const onChangeText = useCallback(
|
|
|
|
debounce(text => setSearchTerm(text), 1000, {
|
|
|
|
trailing: true
|
|
|
|
}),
|
|
|
|
[]
|
|
|
|
)
|
|
|
|
|
2020-11-21 13:19:05 +01:00
|
|
|
return [
|
|
|
|
<Stack.Screen
|
2021-01-30 01:29:15 +01:00
|
|
|
key='Tab-Shared-Account'
|
|
|
|
name='Tab-Shared-Account'
|
|
|
|
component={TabSharedAccount}
|
2021-01-07 22:18:14 +01:00
|
|
|
options={({ navigation }: SharedAccountProp) => {
|
2020-12-17 09:44:03 +01:00
|
|
|
return {
|
|
|
|
headerTranslucent: true,
|
|
|
|
headerStyle: {
|
|
|
|
backgroundColor: `rgba(255, 255, 255, 0)`
|
|
|
|
},
|
|
|
|
headerCenter: () => null,
|
2020-12-26 23:27:53 +01:00
|
|
|
headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />
|
2020-12-17 09:44:03 +01:00
|
|
|
}
|
|
|
|
}}
|
2020-11-21 13:19:05 +01:00
|
|
|
/>,
|
|
|
|
<Stack.Screen
|
2021-01-30 01:29:15 +01:00
|
|
|
key='Tab-Shared-Attachments'
|
|
|
|
name='Tab-Shared-Attachments'
|
|
|
|
component={TabSharedAttachments}
|
2021-01-16 00:00:31 +01:00
|
|
|
options={({
|
|
|
|
route: {
|
|
|
|
params: { account }
|
|
|
|
},
|
|
|
|
navigation
|
|
|
|
}: SharedAttachmentsProp) => {
|
|
|
|
return {
|
|
|
|
headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />,
|
|
|
|
headerCenter: () => (
|
|
|
|
<Text numberOfLines={1}>
|
2021-01-30 01:29:15 +01:00
|
|
|
<Trans
|
|
|
|
i18nKey='sharedAttachments:heading'
|
|
|
|
components={[
|
|
|
|
<ParseEmojis
|
|
|
|
content={account.display_name || account.username}
|
|
|
|
emojis={account.emojis}
|
|
|
|
fontBold
|
|
|
|
/>,
|
|
|
|
<Text
|
|
|
|
style={{
|
|
|
|
...StyleConstants.FontStyle.M,
|
|
|
|
color: theme.primary,
|
|
|
|
fontWeight: StyleConstants.Font.Weight.Bold
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
]}
|
2021-01-16 00:00:31 +01:00
|
|
|
/>
|
|
|
|
</Text>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}}
|
|
|
|
/>,
|
2020-11-21 13:19:05 +01:00
|
|
|
<Stack.Screen
|
2021-01-30 01:29:15 +01:00
|
|
|
key='Tab-Shared-Hashtag'
|
|
|
|
name='Tab-Shared-Hashtag'
|
|
|
|
component={TabSharedHashtag}
|
2021-01-16 00:00:31 +01:00
|
|
|
options={({ route, navigation }: SharedHashtagProp) => ({
|
2021-02-05 01:13:57 +01:00
|
|
|
headerTitle: `#${decodeURIComponent(route.params.hashtag)}`,
|
|
|
|
...(Platform.OS === 'android' && {
|
|
|
|
headerCenter: () => (
|
|
|
|
<HeaderCenter
|
|
|
|
content={`#${decodeURIComponent(route.params.hashtag)}`}
|
|
|
|
/>
|
|
|
|
)
|
|
|
|
}),
|
2021-01-04 18:29:02 +01:00
|
|
|
headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />
|
|
|
|
})}
|
2020-12-23 01:31:11 +01:00
|
|
|
/>,
|
2020-12-25 18:20:09 +01:00
|
|
|
<Stack.Screen
|
2021-01-30 01:29:15 +01:00
|
|
|
key='Tab-Shared-Relationships'
|
|
|
|
name='Tab-Shared-Relationships'
|
|
|
|
component={TabSharedRelationships}
|
2021-01-16 00:00:31 +01:00
|
|
|
options={({ navigation }: SharedRelationshipsProp) => ({
|
2021-01-04 18:29:02 +01:00
|
|
|
headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />
|
|
|
|
})}
|
2021-01-07 22:18:14 +01:00
|
|
|
/>,
|
|
|
|
<Stack.Screen
|
2021-01-30 01:29:15 +01:00
|
|
|
key='Tab-Shared-Search'
|
|
|
|
name='Tab-Shared-Search'
|
2021-01-16 00:00:31 +01:00
|
|
|
options={({ navigation }: SharedSearchProp) => ({
|
2021-01-10 13:35:46 +01:00
|
|
|
headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />,
|
|
|
|
// https://github.com/react-navigation/react-navigation/issues/6746#issuecomment-583897436
|
|
|
|
headerCenter: () => (
|
|
|
|
<View style={styles.searchBar}>
|
2021-01-17 22:37:05 +01:00
|
|
|
<TextInput
|
|
|
|
editable={false}
|
|
|
|
children={
|
|
|
|
<Text
|
|
|
|
style={[
|
|
|
|
styles.textInput,
|
|
|
|
{
|
|
|
|
color: theme.primary
|
|
|
|
}
|
|
|
|
]}
|
2021-01-19 01:13:45 +01:00
|
|
|
children={t('sharedSearch:content.header.prefix')}
|
2021-01-17 22:37:05 +01:00
|
|
|
/>
|
|
|
|
}
|
|
|
|
/>
|
2021-01-10 13:35:46 +01:00
|
|
|
<TextInput
|
2021-03-08 23:48:09 +01:00
|
|
|
keyboardAppearance={mode}
|
2021-01-10 13:35:46 +01:00
|
|
|
style={[
|
|
|
|
styles.textInput,
|
|
|
|
{
|
2021-01-17 22:37:05 +01:00
|
|
|
flex: 1,
|
|
|
|
color: theme.primary,
|
|
|
|
paddingLeft: StyleConstants.Spacing.XS
|
2021-01-10 13:35:46 +01:00
|
|
|
}
|
|
|
|
]}
|
|
|
|
autoFocus
|
|
|
|
onChangeText={onChangeText}
|
|
|
|
autoCapitalize='none'
|
|
|
|
autoCorrect={false}
|
|
|
|
clearButtonMode='never'
|
|
|
|
keyboardType='web-search'
|
|
|
|
onSubmitEditing={({ nativeEvent: { text } }) =>
|
|
|
|
setSearchTerm(text)
|
|
|
|
}
|
2021-01-19 01:13:45 +01:00
|
|
|
placeholder={t('sharedSearch:content.header.placeholder')}
|
2021-01-10 13:35:46 +01:00
|
|
|
placeholderTextColor={theme.secondary}
|
|
|
|
returnKeyType='go'
|
|
|
|
/>
|
|
|
|
</View>
|
|
|
|
)
|
2021-01-07 22:18:14 +01:00
|
|
|
})}
|
2021-01-10 13:35:46 +01:00
|
|
|
>
|
2021-01-30 01:29:15 +01:00
|
|
|
{() => <TabSharedSearch searchTerm={searchTerm} />}
|
2021-01-10 13:35:46 +01:00
|
|
|
</Stack.Screen>,
|
2021-01-07 22:18:14 +01:00
|
|
|
<Stack.Screen
|
2021-01-30 01:29:15 +01:00
|
|
|
key='Tab-Shared-Toot'
|
|
|
|
name='Tab-Shared-Toot'
|
|
|
|
component={TabSharedToot}
|
2021-01-16 00:00:31 +01:00
|
|
|
options={({ navigation }: SharedTootProp) => ({
|
2021-01-19 01:13:45 +01:00
|
|
|
headerTitle: t('sharedToot:heading'),
|
|
|
|
...(Platform.OS === 'android' && {
|
|
|
|
headerCenter: () => <HeaderCenter content={t('sharedToot:heading')} />
|
|
|
|
}),
|
2021-01-07 22:18:14 +01:00
|
|
|
headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />
|
|
|
|
})}
|
2020-11-21 13:19:05 +01:00
|
|
|
/>
|
|
|
|
]
|
|
|
|
}
|
|
|
|
|
2021-01-10 13:35:46 +01:00
|
|
|
const styles = StyleSheet.create({
|
|
|
|
searchBar: {
|
|
|
|
flexBasis: '80%',
|
|
|
|
flexDirection: 'row',
|
|
|
|
alignItems: 'center'
|
|
|
|
},
|
|
|
|
textInput: {
|
2021-01-17 22:37:05 +01:00
|
|
|
fontSize: StyleConstants.Font.Size.M
|
2021-01-10 13:35:46 +01:00
|
|
|
}
|
|
|
|
})
|
|
|
|
|
2020-11-21 13:19:05 +01:00
|
|
|
export default sharedScreens
|