tooot/src/components/Timelines.tsx

118 lines
3.3 KiB
TypeScript
Raw Normal View History

2020-12-17 12:04:58 +01:00
import React, { useCallback, useEffect, useState } from 'react'
import { Dimensions, StyleSheet, View } from 'react-native'
2020-10-24 16:44:32 +02:00
import SegmentedControl from '@react-native-community/segmented-control'
2020-11-21 13:19:05 +01:00
import { createNativeStackNavigator } from 'react-native-screens/native-stack'
import { useSelector } from 'react-redux'
2020-10-24 16:44:32 +02:00
2020-12-13 14:04:25 +01:00
import Timeline from '@components/Timelines/Timeline'
import sharedScreens from '@screens/Shared/sharedScreens'
2020-12-17 12:04:58 +01:00
import { getLocalUrl, getRemoteUrl } from '@utils/slices/instancesSlice'
2020-12-13 14:04:25 +01:00
import { useTheme } from '@utils/styles/ThemeManager'
2020-11-24 00:18:47 +01:00
import { useNavigation } from '@react-navigation/native'
2020-12-13 14:04:25 +01:00
import getCurrentTab from '@utils/getCurrentTab'
2020-12-13 23:38:37 +01:00
import { HeaderRight } from './Header'
2020-12-17 12:04:58 +01:00
import { TabView } from 'react-native-tab-view'
2020-10-24 16:44:32 +02:00
const Stack = createNativeStackNavigator()
2020-10-31 21:04:46 +01:00
export interface Props {
2020-11-24 00:18:47 +01:00
name: 'Screen-Local-Root' | 'Screen-Public-Root'
content: { title: string; page: App.Pages }[]
2020-10-31 21:04:46 +01:00
}
2020-11-21 13:19:05 +01:00
const Timelines: React.FC<Props> = ({ name, content }) => {
2020-11-24 00:18:47 +01:00
const navigation = useNavigation()
const { mode } = useTheme()
const localRegistered = useSelector(getLocalUrl)
const publicDomain = useSelector(getRemoteUrl)
2020-10-24 16:44:32 +02:00
const [segment, setSegment] = useState(0)
const [renderHeader, setRenderHeader] = useState(false)
useEffect(() => {
const nbr = setTimeout(() => setRenderHeader(true), 50)
return
}, [])
2020-11-28 17:07:30 +01:00
const onPressSearch = useCallback(() => {
navigation.navigate(getCurrentTab(navigation), {
screen: 'Screen-Shared-Search'
})
}, [])
2020-12-20 17:53:24 +01:00
const routes = content
.filter(p =>
localRegistered ? p : p.page === 'RemotePublic' ? p : undefined
)
.map(p => ({ key: p.page }))
2020-12-17 12:04:58 +01:00
const renderScene = ({
route
}: {
route: {
key: App.Pages
}
}) => {
2020-12-20 17:53:24 +01:00
return (
(localRegistered || route.key === 'RemotePublic') && (
<Timeline page={route.key} />
)
)
2020-12-17 12:04:58 +01:00
}
2020-11-28 17:07:30 +01:00
2020-12-20 23:49:35 +01:00
const screenComponent = useCallback(
() => (
<TabView
lazy
swipeEnabled
renderScene={renderScene}
renderTabBar={() => null}
onIndexChange={index => setSegment(index)}
navigationState={{ index: segment, routes }}
initialLayout={{ width: Dimensions.get('window').width }}
/>
),
[segment]
)
2020-10-24 16:44:32 +02:00
return (
2020-10-26 00:27:53 +01:00
<Stack.Navigator>
<Stack.Screen
name={name}
options={{
2020-11-24 00:18:47 +01:00
headerTitle: name === 'Screen-Public-Root' ? publicDomain : '',
...(renderHeader &&
localRegistered && {
headerCenter: () => (
<View style={styles.segmentsContainer}>
<SegmentedControl
2020-11-29 18:08:31 +01:00
appearance={mode}
values={[content[0].title, content[1].title]}
selectedIndex={segment}
2020-12-17 12:04:58 +01:00
onChange={({ nativeEvent }) =>
setSegment(nativeEvent.selectedSegmentIndex)
}
/>
</View>
2020-11-24 00:18:47 +01:00
),
headerRight: () => (
2020-12-13 23:38:37 +01:00
<HeaderRight icon='search' onPress={onPressSearch} />
2020-11-24 00:18:47 +01:00
)
})
2020-10-26 00:27:53 +01:00
}}
>
2020-12-20 23:49:35 +01:00
{screenComponent}
2020-10-24 16:44:32 +02:00
</Stack.Screen>
2020-10-30 20:03:44 +01:00
{sharedScreens(Stack)}
2020-10-24 16:44:32 +02:00
</Stack.Navigator>
)
}
2020-11-28 17:07:30 +01:00
const styles = StyleSheet.create({
segmentsContainer: {
flexBasis: '60%'
2020-11-28 17:07:30 +01:00
}
})
export default React.memo(Timelines, () => true)