2020-10-24 16:44:32 +02:00
|
|
|
import React, { useEffect, useRef, useState } from 'react'
|
|
|
|
import PropTypes from 'prop-types'
|
|
|
|
import { Animated, Dimensions, View } from 'react-native'
|
|
|
|
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'
|
|
|
|
|
|
|
|
const Stack = createNativeStackNavigator()
|
|
|
|
|
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)
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
const nbr = setTimeout(() => setRenderHeader(true), 50)
|
|
|
|
return
|
|
|
|
}, [])
|
|
|
|
|
|
|
|
const moveAnimation = useRef(new Animated.Value(0)).current
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Stack.Navigator
|
|
|
|
screenOptions={{
|
|
|
|
statusBarAnimation: 'none',
|
|
|
|
headerRight: () =>
|
|
|
|
renderHeader ? (
|
|
|
|
<Feather name='search' size={24} color='black' />
|
|
|
|
) : null,
|
|
|
|
headerCenter: () =>
|
|
|
|
renderHeader ? (
|
|
|
|
<SegmentedControl
|
2020-10-24 19:15:05 +02:00
|
|
|
values={[content[0].title, content[1].title]}
|
2020-10-24 16:44:32 +02:00
|
|
|
selectedIndex={segment}
|
|
|
|
onChange={e => {
|
|
|
|
setSegment(e.nativeEvent.selectedSegmentIndex)
|
|
|
|
Animated.timing(moveAnimation, {
|
|
|
|
toValue:
|
|
|
|
-e.nativeEvent.selectedSegmentIndex *
|
|
|
|
Dimensions.get('window').width,
|
|
|
|
duration: 250,
|
|
|
|
useNativeDriver: false
|
|
|
|
}).start()
|
|
|
|
}}
|
|
|
|
style={{ width: 150, height: 30 }}
|
|
|
|
/>
|
|
|
|
) : null
|
|
|
|
}}
|
|
|
|
>
|
2020-10-24 19:15:05 +02:00
|
|
|
<Stack.Screen name={name}>
|
2020-10-24 16:44:32 +02:00
|
|
|
{props => (
|
|
|
|
<Animated.View
|
|
|
|
style={{
|
|
|
|
flexDirection: 'row',
|
|
|
|
width: Dimensions.get('window').width * 2,
|
|
|
|
left: moveAnimation
|
|
|
|
}}
|
|
|
|
{...props}
|
|
|
|
>
|
|
|
|
<View style={{ width: Dimensions.get('window').width }}>
|
2020-10-24 19:15:05 +02:00
|
|
|
<Timeline timeline={content[0].timeline} />
|
2020-10-24 16:44:32 +02:00
|
|
|
</View>
|
|
|
|
<View style={{ width: Dimensions.get('window').width }}>
|
2020-10-24 19:15:05 +02:00
|
|
|
<Timeline timeline={content[1].timeline} />
|
2020-10-24 16:44:32 +02:00
|
|
|
</View>
|
|
|
|
</Animated.View>
|
|
|
|
)}
|
|
|
|
</Stack.Screen>
|
|
|
|
</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-24 19:15:05 +02:00
|
|
|
timeline: Timeline.propTypes.timeline
|
2020-10-24 16:44:32 +02:00
|
|
|
})
|
|
|
|
).isRequired
|
|
|
|
}
|