tooot/src/screens/AccountSelection.tsx

149 lines
3.9 KiB
TypeScript
Raw Normal View History

2022-08-12 16:44:28 +02:00
import AccountButton from '@components/AccountButton'
import CustomText from '@components/Text'
import navigationRef from '@utils/navigation/navigationRef'
2022-08-12 16:44:28 +02:00
import { RootStackScreenProps } from '@utils/navigation/navigators'
2023-01-08 16:59:35 +01:00
import { getReadableAccounts } from '@utils/storage/actions'
2022-08-12 16:44:28 +02:00
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import * as VideoThumbnails from 'expo-video-thumbnails'
import React, { useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { FlatList, Image, ScrollView, View } from 'react-native'
const Share = ({
text,
media
}: {
text?: string | undefined
media?:
| {
uri: string
mime: string
}[]
| undefined
}) => {
const { colors } = useTheme()
const [images, setImages] = useState<string[]>([])
useEffect(() => {
const prepareThumbs = async (media: { uri: string; mime: string }[]) => {
const thumbs: string[] = []
for (const m of media) {
if (m.mime.startsWith('image/')) {
thumbs.push(m.uri)
} else if (m.mime.startsWith('video/')) {
const { uri } = await VideoThumbnails.getThumbnailAsync(m.uri)
thumbs.push(uri)
}
}
setImages(thumbs)
}
if (media) {
prepareThumbs(media)
}
}, [])
if (text) {
return (
<CustomText
fontSize='S'
style={{
color: colors.primaryDefault,
padding: StyleConstants.Spacing.M,
borderWidth: 1,
borderColor: colors.shimmerHighlight,
2023-02-12 18:38:06 +01:00
borderRadius: StyleConstants.BorderRadius
2022-08-12 16:44:28 +02:00
}}
children={text}
/>
)
}
if (media) {
return (
<View
style={{
padding: StyleConstants.Spacing.M,
borderWidth: 1,
borderColor: colors.shimmerHighlight,
2023-02-12 18:38:06 +01:00
borderRadius: StyleConstants.BorderRadius
2022-08-12 16:44:28 +02:00
}}
>
<FlatList
horizontal
data={images}
renderItem={({ item }) => (
<Image source={{ uri: item }} style={{ width: 88, height: 88 }} />
)}
2022-11-20 16:14:08 +01:00
ItemSeparatorComponent={() => <View style={{ width: StyleConstants.Spacing.S }} />}
2022-08-12 16:44:28 +02:00
/>
</View>
)
}
return null
}
// Only needed when data incoming into the app when there are multiple accounts
const ScreenAccountSelection = ({
route: {
params: { share }
}
}: RootStackScreenProps<'Screen-AccountSelection'>) => {
const { colors } = useTheme()
const { t } = useTranslation('screenAccountSelection')
2023-01-29 22:18:33 +01:00
const accounts = getReadableAccounts()
2022-08-12 16:44:28 +02:00
return (
2022-11-20 16:14:08 +01:00
<ScrollView
style={{ marginBottom: StyleConstants.Spacing.L * 2 }}
keyboardShouldPersistTaps='always'
>
<View
style={{
marginHorizontal: StyleConstants.Spacing.Global.PagePadding
}}
2022-08-12 16:44:28 +02:00
>
2022-11-20 16:14:08 +01:00
{share ? <Share {...share} /> : null}
<CustomText
fontStyle='M'
fontWeight='Bold'
style={{
textAlign: 'center',
marginTop: StyleConstants.Spacing.L,
marginBottom: StyleConstants.Spacing.S,
color: colors.primaryDefault
}}
>
{t('content.select_account')}
</CustomText>
2022-08-12 16:44:28 +02:00
<View
style={{
2022-11-20 16:14:08 +01:00
flex: 1,
flexDirection: 'row',
flexWrap: 'wrap',
marginTop: StyleConstants.Spacing.M
2022-08-12 16:44:28 +02:00
}}
>
2023-01-08 16:59:35 +01:00
{accounts.map((account, index) => {
return (
<AccountButton
key={index}
2023-01-29 22:18:33 +01:00
account={{ ...account, active: false }}
2023-01-08 16:59:35 +01:00
additionalActions={() =>
navigationRef.navigate('Screen-Compose', {
type: 'share',
...share
})
}
/>
)
})}
2022-08-12 16:44:28 +02:00
</View>
2022-11-20 16:14:08 +01:00
</View>
</ScrollView>
2022-08-12 16:44:28 +02:00
)
}
export default ScreenAccountSelection