2021-02-08 23:19:55 +01:00
|
|
|
import analytics from '@components/analytics'
|
|
|
|
import { HeaderRight } from '@components/Header'
|
2021-02-08 23:47:20 +01:00
|
|
|
import Timeline from '@components/Timeline'
|
2021-02-27 16:33:54 +01:00
|
|
|
import TimelineDefault from '@components/Timeline/Default'
|
2021-02-08 23:19:55 +01:00
|
|
|
import SegmentedControl from '@react-native-community/segmented-control'
|
2021-08-21 01:45:43 +02:00
|
|
|
import { createNativeStackNavigator } from '@react-navigation/native-stack'
|
2021-08-29 15:25:38 +02:00
|
|
|
import {
|
|
|
|
ScreenTabsScreenProps,
|
|
|
|
TabPublicStackParamList
|
|
|
|
} from '@utils/navigation/navigators'
|
2021-02-27 16:33:54 +01:00
|
|
|
import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
|
2021-02-08 23:19:55 +01:00
|
|
|
import { useTheme } from '@utils/styles/ThemeManager'
|
|
|
|
import React, { useCallback, useMemo, useState } from 'react'
|
|
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
import { Dimensions, StyleSheet } from 'react-native'
|
|
|
|
import { TabView } from 'react-native-tab-view'
|
2021-08-29 15:25:38 +02:00
|
|
|
import TabSharedRoot from './Shared/Root'
|
2021-02-08 23:19:55 +01:00
|
|
|
|
2021-08-29 15:25:38 +02:00
|
|
|
const Stack = createNativeStackNavigator<TabPublicStackParamList>()
|
2020-10-24 02:47:57 +02:00
|
|
|
|
2021-01-30 01:29:15 +01:00
|
|
|
const TabPublic = React.memo(
|
2021-08-29 15:25:38 +02:00
|
|
|
({ navigation }: ScreenTabsScreenProps<'Tab-Public'>) => {
|
2021-03-28 23:31:10 +02:00
|
|
|
const { t, i18n } = useTranslation('screenTabs')
|
2021-02-08 23:19:55 +01:00
|
|
|
const { mode } = useTheme()
|
|
|
|
|
|
|
|
const [segment, setSegment] = useState(0)
|
2021-02-27 16:33:54 +01:00
|
|
|
const pages: {
|
|
|
|
title: string
|
|
|
|
key: App.Pages
|
|
|
|
}[] = [
|
|
|
|
{
|
2021-03-28 23:31:10 +02:00
|
|
|
title: t('tabs.public.segments.left'),
|
2021-02-27 16:33:54 +01:00
|
|
|
key: 'LocalPublic'
|
|
|
|
},
|
|
|
|
{
|
2021-03-28 23:31:10 +02:00
|
|
|
title: t('tabs.public.segments.right'),
|
2021-02-27 16:33:54 +01:00
|
|
|
key: 'Local'
|
|
|
|
}
|
2021-02-08 23:19:55 +01:00
|
|
|
]
|
|
|
|
const screenOptionsRoot = useMemo(
|
|
|
|
() => ({
|
2021-08-21 01:45:43 +02:00
|
|
|
headerTitle: () => (
|
2021-02-08 23:19:55 +01:00
|
|
|
<SegmentedControl
|
|
|
|
appearance={mode}
|
|
|
|
values={pages.map(p => p.title)}
|
|
|
|
selectedIndex={segment}
|
|
|
|
onChange={({ nativeEvent }) =>
|
|
|
|
setSegment(nativeEvent.selectedSegmentIndex)
|
|
|
|
}
|
|
|
|
style={styles.segmentsContainer}
|
|
|
|
/>
|
|
|
|
),
|
|
|
|
headerRight: () => (
|
|
|
|
<HeaderRight
|
2021-04-09 21:43:12 +02:00
|
|
|
accessibilityLabel={t('common.search.accessibilityLabel')}
|
|
|
|
accessibilityHint={t('common.search.accessibilityHint')}
|
2021-02-08 23:19:55 +01:00
|
|
|
content='Search'
|
|
|
|
onPress={() => {
|
2021-02-27 16:33:54 +01:00
|
|
|
analytics('search_tap', { page: pages[segment].key })
|
2021-03-14 00:47:55 +01:00
|
|
|
navigation.navigate('Tab-Public', {
|
|
|
|
screen: 'Tab-Shared-Search',
|
|
|
|
params: { text: undefined }
|
|
|
|
})
|
2021-02-08 23:19:55 +01:00
|
|
|
}}
|
|
|
|
/>
|
|
|
|
)
|
|
|
|
}),
|
|
|
|
[mode, segment, i18n.language]
|
|
|
|
)
|
|
|
|
|
2021-02-27 16:33:54 +01:00
|
|
|
const routes = pages.map(p => ({ key: p.key }))
|
2021-03-15 22:30:29 +01:00
|
|
|
|
2021-02-08 23:19:55 +01:00
|
|
|
const renderScene = useCallback(
|
|
|
|
({
|
2021-02-27 16:33:54 +01:00
|
|
|
route: { key: page }
|
2021-02-08 23:19:55 +01:00
|
|
|
}: {
|
|
|
|
route: {
|
|
|
|
key: App.Pages
|
|
|
|
}
|
|
|
|
}) => {
|
2021-02-27 16:33:54 +01:00
|
|
|
const queryKey: QueryKeyTimeline = ['Timeline', { page }]
|
2021-03-14 00:47:55 +01:00
|
|
|
const renderItem = ({ item }: any) => (
|
2021-02-27 16:33:54 +01:00
|
|
|
<TimelineDefault item={item} queryKey={queryKey} />
|
|
|
|
)
|
|
|
|
return <Timeline queryKey={queryKey} customProps={{ renderItem }} />
|
2021-02-08 23:19:55 +01:00
|
|
|
},
|
2021-02-27 16:33:54 +01:00
|
|
|
[]
|
2021-02-08 23:19:55 +01:00
|
|
|
)
|
|
|
|
const children = useCallback(
|
2021-03-15 22:30:29 +01:00
|
|
|
() => (
|
|
|
|
// @ts-ignore
|
|
|
|
<TabView
|
|
|
|
lazy
|
|
|
|
swipeEnabled
|
|
|
|
renderScene={renderScene}
|
|
|
|
renderTabBar={() => null}
|
|
|
|
onIndexChange={index => setSegment(index)}
|
|
|
|
navigationState={{ index: segment, routes }}
|
|
|
|
initialLayout={{ width: Dimensions.get('screen').width }}
|
|
|
|
/>
|
|
|
|
),
|
|
|
|
[segment]
|
2021-02-08 23:19:55 +01:00
|
|
|
)
|
|
|
|
|
|
|
|
return (
|
2021-08-21 01:45:43 +02:00
|
|
|
<Stack.Navigator screenOptions={{ headerShadowVisible: false }}>
|
2021-02-08 23:19:55 +01:00
|
|
|
<Stack.Screen
|
|
|
|
name='Tab-Public-Root'
|
|
|
|
options={screenOptionsRoot}
|
|
|
|
children={children}
|
|
|
|
/>
|
2021-08-29 15:25:38 +02:00
|
|
|
{TabSharedRoot({ Stack })}
|
2021-02-08 23:19:55 +01:00
|
|
|
</Stack.Navigator>
|
|
|
|
)
|
2021-01-22 01:34:20 +01:00
|
|
|
},
|
|
|
|
() => true
|
|
|
|
)
|
2020-10-31 21:04:46 +01:00
|
|
|
|
2021-02-08 23:19:55 +01:00
|
|
|
const styles = StyleSheet.create({
|
|
|
|
segmentsContainer: {
|
|
|
|
flexBasis: '65%'
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
2021-01-30 01:29:15 +01:00
|
|
|
export default TabPublic
|