mirror of https://github.com/tooot-app/app
74 lines
2.2 KiB
TypeScript
74 lines
2.2 KiB
TypeScript
import SegmentedControl from '@react-native-community/segmented-control'
|
|
import { useNavigation } from '@react-navigation/native'
|
|
import { useTheme } from '@utils/styles/ThemeManager'
|
|
import React, { useEffect, useState } from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import { Dimensions, StyleSheet, View } from 'react-native'
|
|
import { TabView } from 'react-native-tab-view'
|
|
import RelationshipsList from './Relationships/List'
|
|
import { SharedRelationshipsProp } from './sharedScreens'
|
|
|
|
const ScreenSharedRelationships: React.FC<SharedRelationshipsProp> = ({
|
|
route: {
|
|
params: { account, initialType }
|
|
}
|
|
}) => {
|
|
const { t } = useTranslation('sharedRelationships')
|
|
const { mode } = useTheme()
|
|
const navigation = useNavigation()
|
|
|
|
const [segment, setSegment] = useState(initialType === 'following' ? 0 : 1)
|
|
useEffect(() => {
|
|
const updateHeaderRight = () =>
|
|
navigation.setOptions({
|
|
headerCenter: () => (
|
|
<View style={styles.segmentsContainer}>
|
|
<SegmentedControl
|
|
appearance={mode}
|
|
values={[t('heading.segments.left'), t('heading.segments.right')]}
|
|
selectedIndex={segment}
|
|
onChange={({ nativeEvent }) =>
|
|
setSegment(nativeEvent.selectedSegmentIndex)
|
|
}
|
|
/>
|
|
</View>
|
|
)
|
|
})
|
|
return updateHeaderRight()
|
|
}, [segment, mode])
|
|
|
|
const routes: {
|
|
key: SharedRelationshipsProp['route']['params']['initialType']
|
|
}[] = [{ key: 'following' }, { key: 'followers' }]
|
|
|
|
const renderScene = ({
|
|
route
|
|
}: {
|
|
route: {
|
|
key: SharedRelationshipsProp['route']['params']['initialType']
|
|
}
|
|
}) => {
|
|
return <RelationshipsList id={account.id} type={route.key} />
|
|
}
|
|
|
|
return (
|
|
<TabView
|
|
lazy
|
|
swipeEnabled
|
|
renderScene={renderScene}
|
|
renderTabBar={() => null}
|
|
onIndexChange={index => setSegment(index)}
|
|
navigationState={{ index: segment, routes }}
|
|
initialLayout={{ width: Dimensions.get('screen').width }}
|
|
/>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
segmentsContainer: {
|
|
flexBasis: '60%'
|
|
}
|
|
})
|
|
|
|
export default React.memo(ScreenSharedRelationships, () => true)
|