2021-01-26 12:17:25 +01:00
|
|
|
import { HeaderRight } from '@components/Header'
|
2020-12-13 14:04:25 +01:00
|
|
|
import Timeline from '@components/Timelines/Timeline'
|
2021-01-04 10:50:24 +01:00
|
|
|
import SegmentedControl from '@react-native-community/segmented-control'
|
|
|
|
import { useNavigation } from '@react-navigation/native'
|
2020-12-13 14:04:25 +01:00
|
|
|
import sharedScreens from '@screens/Shared/sharedScreens'
|
2021-01-26 12:17:25 +01:00
|
|
|
import { getLocalActiveIndex } from '@utils/slices/instancesSlice'
|
2020-12-13 14:04:25 +01:00
|
|
|
import { useTheme } from '@utils/styles/ThemeManager'
|
2021-01-14 00:43:35 +01:00
|
|
|
import React, { useCallback, useMemo, useState } from 'react'
|
2021-01-22 01:34:20 +01:00
|
|
|
import { useTranslation } from 'react-i18next'
|
2021-01-26 12:17:25 +01:00
|
|
|
import { Dimensions, StyleSheet } from 'react-native'
|
2021-01-04 10:50:24 +01:00
|
|
|
import { createNativeStackNavigator } from 'react-native-screens/native-stack'
|
2020-12-17 12:04:58 +01:00
|
|
|
import { TabView } from 'react-native-tab-view'
|
2021-01-14 22:53:01 +01:00
|
|
|
import ViewPagerAdapter from 'react-native-tab-view-viewpager-adapter'
|
2021-01-04 10:50:24 +01:00
|
|
|
import { useSelector } from 'react-redux'
|
2021-01-24 02:25:43 +01:00
|
|
|
import analytics from './analytics'
|
2020-10-24 16:44:32 +02:00
|
|
|
|
2021-01-26 12:17:25 +01:00
|
|
|
const Stack = createNativeStackNavigator<Nav.RemoteStackParamList>()
|
2020-10-24 16:44:32 +02:00
|
|
|
|
2021-01-26 12:17:25 +01:00
|
|
|
const Timelines: React.FC = () => {
|
2021-01-22 01:34:20 +01:00
|
|
|
const { t, i18n } = useTranslation()
|
2021-01-26 12:17:25 +01:00
|
|
|
const pages: { title: string; page: App.Pages }[] = [
|
|
|
|
{ title: t('public:heading.segments.left'), page: 'LocalPublic' },
|
|
|
|
{ title: t('public:heading.segments.right'), page: 'Local' }
|
|
|
|
]
|
2021-01-22 01:34:20 +01:00
|
|
|
|
2020-11-24 00:18:47 +01:00
|
|
|
const navigation = useNavigation()
|
2021-01-07 19:13:09 +01:00
|
|
|
const localActiveIndex = useSelector(getLocalActiveIndex)
|
2020-10-24 16:44:32 +02:00
|
|
|
|
2020-11-28 17:07:30 +01:00
|
|
|
const onPressSearch = useCallback(() => {
|
2021-01-26 12:17:25 +01:00
|
|
|
analytics('search_tap', { page: pages[segment].page })
|
|
|
|
navigation.navigate('Screen-Public', { screen: 'Screen-Shared-Search' })
|
2020-11-28 17:07:30 +01:00
|
|
|
}, [])
|
|
|
|
|
2021-01-26 12:17:25 +01:00
|
|
|
const routes = pages.map(p => ({ key: p.page }))
|
2020-12-20 17:53:24 +01:00
|
|
|
|
2021-01-01 16:48:16 +01:00
|
|
|
const renderScene = useCallback(
|
|
|
|
({
|
|
|
|
route
|
|
|
|
}: {
|
|
|
|
route: {
|
|
|
|
key: App.Pages
|
|
|
|
}
|
|
|
|
}) => {
|
2021-01-26 12:17:25 +01:00
|
|
|
return localActiveIndex !== null && <Timeline page={route.key} />
|
2021-01-01 16:48:16 +01:00
|
|
|
},
|
2021-01-07 19:13:09 +01:00
|
|
|
[localActiveIndex]
|
2021-01-01 16:48:16 +01:00
|
|
|
)
|
2020-11-28 17:07:30 +01:00
|
|
|
|
2021-01-22 01:34:20 +01:00
|
|
|
const { mode } = useTheme()
|
|
|
|
const [segment, setSegment] = useState(0)
|
2021-01-14 00:43:35 +01:00
|
|
|
const screenOptions = useMemo(() => {
|
2021-01-26 12:17:25 +01:00
|
|
|
if (localActiveIndex !== null) {
|
2021-01-14 00:43:35 +01:00
|
|
|
return {
|
|
|
|
headerCenter: () => (
|
2021-01-22 01:34:20 +01:00
|
|
|
<SegmentedControl
|
|
|
|
appearance={mode}
|
2021-01-26 12:17:25 +01:00
|
|
|
values={pages.map(p => p.title)}
|
2021-01-22 01:34:20 +01:00
|
|
|
selectedIndex={segment}
|
|
|
|
onChange={({ nativeEvent }) =>
|
|
|
|
setSegment(nativeEvent.selectedSegmentIndex)
|
|
|
|
}
|
|
|
|
style={styles.segmentsContainer}
|
|
|
|
/>
|
2021-01-14 00:43:35 +01:00
|
|
|
),
|
|
|
|
headerRight: () => (
|
|
|
|
<HeaderRight content='Search' onPress={onPressSearch} />
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
2021-01-22 01:34:20 +01:00
|
|
|
}, [localActiveIndex, mode, segment, i18n.language])
|
2021-01-14 00:43:35 +01:00
|
|
|
|
2021-01-14 22:53:01 +01:00
|
|
|
const renderPager = useCallback(props => <ViewPagerAdapter {...props} />, [])
|
|
|
|
|
2020-10-24 16:44:32 +02:00
|
|
|
return (
|
2021-01-13 01:03:46 +01:00
|
|
|
<Stack.Navigator
|
|
|
|
screenOptions={{ headerHideShadow: true, headerTopInsetEnabled: false }}
|
|
|
|
>
|
2021-01-26 12:17:25 +01:00
|
|
|
<Stack.Screen name='Screen-Remote-Root' options={screenOptions}>
|
2021-01-14 22:53:01 +01:00
|
|
|
{() => (
|
|
|
|
<TabView
|
|
|
|
lazy
|
|
|
|
swipeEnabled
|
|
|
|
renderPager={renderPager}
|
|
|
|
renderScene={renderScene}
|
|
|
|
renderTabBar={() => null}
|
|
|
|
onIndexChange={index => setSegment(index)}
|
|
|
|
navigationState={{ index: segment, routes }}
|
2021-01-16 00:00:31 +01:00
|
|
|
initialLayout={{ width: Dimensions.get('screen').width }}
|
2021-01-14 22:53:01 +01:00
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</Stack.Screen>
|
2020-10-30 20:03:44 +01:00
|
|
|
|
2021-01-26 12:17:25 +01:00
|
|
|
{sharedScreens(Stack as any)}
|
2020-10-24 16:44:32 +02:00
|
|
|
</Stack.Navigator>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2020-11-28 17:07:30 +01:00
|
|
|
const styles = StyleSheet.create({
|
2020-11-29 13:11:23 +01:00
|
|
|
segmentsContainer: {
|
2021-01-10 02:12:14 +01:00
|
|
|
flexBasis: '65%'
|
2020-11-28 17:07:30 +01:00
|
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
export default React.memo(Timelines, () => true)
|