tooot/src/screens/Tabs/Me/Switch.tsx

113 lines
3.5 KiB
TypeScript
Raw Normal View History

2022-08-12 16:44:28 +02:00
import AccountButton from '@components/AccountButton'
2021-05-12 22:45:51 +02:00
import ComponentInstance from '@components/Instance'
import CustomText from '@components/Text'
import { getInstanceActive, getInstances } from '@utils/slices/instancesSlice'
2021-05-12 22:45:51 +02:00
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
2022-02-22 23:14:09 +01:00
import React, { useEffect, useRef } from 'react'
2021-01-19 01:13:45 +01:00
import { useTranslation } from 'react-i18next'
import { KeyboardAvoidingView, Platform, StyleSheet, View } from 'react-native'
2021-05-12 22:45:51 +02:00
import { ScrollView } from 'react-native-gesture-handler'
2022-01-30 22:51:03 +01:00
import { useSelector } from 'react-redux'
2021-01-07 19:13:09 +01:00
2021-05-12 22:45:51 +02:00
const TabMeSwitch: React.FC = () => {
2021-03-28 23:31:10 +02:00
const { t } = useTranslation('screenTabs')
2022-02-12 14:51:01 +01:00
const { colors } = useTheme()
2021-05-12 22:45:51 +02:00
const instances = useSelector(getInstances, () => true)
const instanceActive = useSelector(getInstanceActive, () => true)
const scrollViewRef = useRef<ScrollView>(null)
2022-02-22 23:14:09 +01:00
useEffect(() => {
2022-02-23 00:08:06 +01:00
setTimeout(
() => scrollViewRef.current?.scrollToEnd({ animated: true }),
150
)
}, [scrollViewRef.current])
2021-05-12 22:45:51 +02:00
2021-01-07 19:13:09 +01:00
return (
<KeyboardAvoidingView
style={{ flex: 1 }}
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
2021-01-14 00:43:35 +01:00
>
<ScrollView
ref={scrollViewRef}
style={{ marginBottom: StyleConstants.Spacing.L * 2 }}
keyboardShouldPersistTaps='always'
>
2022-02-22 23:14:09 +01:00
<View>
<CustomText
fontStyle='M'
style={{
textAlign: 'center',
paddingVertical: StyleConstants.Spacing.S,
color: colors.primaryDefault
}}
>
2022-02-22 23:14:09 +01:00
{t('me.switch.new')}
</CustomText>
2022-02-22 23:14:09 +01:00
<ComponentInstance
scrollViewRef={scrollViewRef}
disableHeaderImage
goBack
/>
</View>
<View
style={{
marginTop: StyleConstants.Spacing.S,
paddingTop: StyleConstants.Spacing.M,
marginHorizontal: StyleConstants.Spacing.Global.PagePadding,
borderTopWidth: StyleSheet.hairlineWidth,
borderTopColor: colors.border
}}
>
<CustomText
fontStyle='M'
style={{
textAlign: 'center',
paddingVertical: StyleConstants.Spacing.S,
color: colors.primaryDefault
}}
>
{t('me.switch.existing')}
</CustomText>
<View
style={{
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
marginTop: StyleConstants.Spacing.M
}}
>
{instances.length
? instances
.slice()
.sort((a, b) =>
`${a.uri}${a.account.acct}`.localeCompare(
`${b.uri}${b.account.acct}`
)
2021-05-12 22:45:51 +02:00
)
.map((instance, index) => {
const localAccount = instances[instanceActive!]
return (
<AccountButton
key={index}
instance={instance}
selected={
instance.url === localAccount.url &&
instance.token === localAccount.token &&
instance.account.id === localAccount.account.id
}
/>
)
})
: null}
</View>
2021-05-12 22:45:51 +02:00
</View>
</ScrollView>
</KeyboardAvoidingView>
2021-01-07 19:13:09 +01:00
)
}
2021-05-09 21:59:03 +02:00
export default TabMeSwitch