tooot/src/stacks/common/TimelinesCombined.jsx

109 lines
3.3 KiB
React
Raw Normal View History

2020-10-24 16:44:32 +02:00
import React, { useEffect, useRef, useState } from 'react'
import PropTypes from 'prop-types'
2020-10-29 14:52:28 +01:00
import { Dimensions, FlatList, View } from 'react-native'
2020-10-24 16:44:32 +02:00
import { createNativeStackNavigator } from 'react-native-screens/native-stack'
import SegmentedControl from '@react-native-community/segmented-control'
import { Feather } from '@expo/vector-icons'
import Timeline from './Timeline'
2020-10-30 20:03:44 +01:00
import sharedScreens from 'src/stacks/Shared/sharedScreens'
2020-10-24 16:44:32 +02:00
const Stack = createNativeStackNavigator()
2020-10-29 14:52:28 +01:00
function Page ({ item: { page } }) {
return (
<View style={{ width: Dimensions.get('window').width }}>
<Timeline page={page} />
</View>
)
}
2020-10-24 19:15:05 +02:00
export default function TimelinesCombined ({ name, content }) {
2020-10-24 16:44:32 +02:00
const [segment, setSegment] = useState(0)
const [renderHeader, setRenderHeader] = useState(false)
2020-10-29 14:52:28 +01:00
const [segmentManuallyTriggered, setSegmentManuallyTriggered] = useState(
false
)
2020-10-24 16:44:32 +02:00
useEffect(() => {
const nbr = setTimeout(() => setRenderHeader(true), 50)
return
}, [])
2020-10-29 14:52:28 +01:00
const horizontalPaging = useRef()
2020-10-24 16:44:32 +02:00
return (
2020-10-26 00:27:53 +01:00
<Stack.Navigator>
<Stack.Screen
name={name}
options={{
statusBarAnimation: 'none',
headerRight: () =>
renderHeader ? (
<Feather name='search' size={24} color='black' />
) : null,
headerCenter: () =>
renderHeader ? (
<SegmentedControl
values={[content[0].title, content[1].title]}
selectedIndex={segment}
2020-10-29 14:52:28 +01:00
onChange={({ nativeEvent }) => {
setSegmentManuallyTriggered(true)
setSegment(nativeEvent.selectedSegmentIndex)
horizontalPaging.current.scrollToIndex({
index: nativeEvent.selectedSegmentIndex
})
2020-10-26 00:27:53 +01:00
}}
style={{ width: 150, height: 30 }}
/>
) : null
}}
>
2020-10-29 14:52:28 +01:00
{() => (
<FlatList
style={{ width: Dimensions.get('window').width, height: '100%' }}
data={content}
keyExtractor={({ page }) => page}
renderItem={({ item, index }) => {
return <Page key={index} item={item} />
2020-10-24 16:44:32 +02:00
}}
2020-10-29 14:52:28 +01:00
ref={horizontalPaging}
bounces={false}
getItemLayout={(data, index) => ({
length: Dimensions.get('window').width,
offset: Dimensions.get('window').width * index,
index
})}
horizontal
onMomentumScrollEnd={() => setSegmentManuallyTriggered(false)}
onScroll={({ nativeEvent }) =>
!segmentManuallyTriggered &&
setSegment(
nativeEvent.contentOffset.x <=
Dimensions.get('window').width / 2
? 0
: 1
)
}
pagingEnabled
showsHorizontalScrollIndicator={false}
/>
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>
)
}
TimelinesCombined.propTypes = {
2020-10-24 19:15:05 +02:00
name: PropTypes.string.isRequired,
content: PropTypes.arrayOf(
2020-10-24 16:44:32 +02:00
PropTypes.exact({
title: PropTypes.string.isRequired,
2020-10-31 02:22:08 +01:00
page: Timeline.propTypes.page,
instance: PropTypes.oneOf(['local', 'remote'])
2020-10-24 16:44:32 +02:00
})
).isRequired
}