tooot/src/components/Account.tsx

83 lines
2.2 KiB
TypeScript
Raw Normal View History

2021-01-04 18:29:02 +01:00
import { ParseEmojis } from '@components/Parse'
2021-01-24 02:25:43 +01:00
import { useNavigation } from '@react-navigation/native'
import { StackNavigationProp } from '@react-navigation/stack'
2021-08-29 15:25:38 +02:00
import { TabLocalStackParamList } from '@utils/navigation/navigators'
2021-01-04 18:29:02 +01:00
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
2021-01-24 02:25:43 +01:00
import React, { useCallback } from 'react'
2021-01-16 00:00:31 +01:00
import { Pressable, StyleSheet, Text, View } from 'react-native'
2021-01-24 02:25:43 +01:00
import analytics from './analytics'
2021-01-16 00:00:31 +01:00
import GracefullyImage from './GracefullyImage'
2021-01-04 18:29:02 +01:00
export interface Props {
account: Mastodon.Account
2021-01-24 02:25:43 +01:00
onPress?: () => void
origin?: string
2021-01-04 18:29:02 +01:00
}
2021-01-24 02:25:43 +01:00
const ComponentAccount: React.FC<Props> = ({
account,
onPress: customOnPress,
origin
}) => {
2021-01-04 18:29:02 +01:00
const { theme } = useTheme()
2021-01-24 02:25:43 +01:00
const navigation = useNavigation<
2021-08-29 15:25:38 +02:00
StackNavigationProp<TabLocalStackParamList>
2021-01-24 02:25:43 +01:00
>()
const onPress = useCallback(() => {
analytics('search_account_press', { page: origin })
2021-01-30 01:29:15 +01:00
navigation.push('Tab-Shared-Account', { account })
2021-01-24 02:25:43 +01:00
}, [])
2021-01-04 18:29:02 +01:00
return (
<Pressable
2021-04-09 21:43:12 +02:00
accessibilityRole='button'
2021-01-04 18:29:02 +01:00
style={[styles.itemDefault, styles.itemAccount]}
2021-01-24 02:25:43 +01:00
onPress={customOnPress || onPress}
2021-01-04 18:29:02 +01:00
>
2021-01-16 00:00:31 +01:00
<GracefullyImage
uri={{ original: account.avatar_static }}
2021-01-04 18:29:02 +01:00
style={styles.itemAccountAvatar}
/>
<View>
<Text numberOfLines={1}>
<ParseEmojis
content={account.display_name || account.username}
emojis={account.emojis}
size='S'
fontBold
/>
</Text>
<Text
numberOfLines={1}
style={[styles.itemAccountAcct, { color: theme.secondary }]}
>
@{account.acct}
</Text>
</View>
</Pressable>
)
}
const styles = StyleSheet.create({
itemDefault: {
paddingHorizontal: StyleConstants.Spacing.Global.PagePadding,
paddingVertical: StyleConstants.Spacing.M
},
itemAccount: {
flexDirection: 'row',
alignItems: 'center'
},
itemAccountAvatar: {
alignSelf: 'flex-start',
width: StyleConstants.Avatar.S,
height: StyleConstants.Avatar.S,
borderRadius: 6,
marginRight: StyleConstants.Spacing.S
},
itemAccountAcct: { marginTop: StyleConstants.Spacing.XS }
})
export default ComponentAccount