tooot/src/components/Timeline/Shared/Avatar.tsx

62 lines
1.9 KiB
TypeScript

import GracefullyImage from '@components/GracefullyImage'
import { useNavigation } from '@react-navigation/native'
import { StackNavigationProp } from '@react-navigation/stack'
import { TabLocalStackParamList } from '@utils/navigation/navigators'
import { StyleConstants } from '@utils/styles/constants'
import React, { useContext } from 'react'
import { useTranslation } from 'react-i18next'
import StatusContext from './Context'
export interface Props {
account?: Mastodon.Account
}
const TimelineAvatar: React.FC<Props> = ({ account }) => {
const { status, highlighted, disableDetails, disableOnPress, isConversation } =
useContext(StatusContext)
const actualAccount = account || status?.account
if (!actualAccount) return null
const { t } = useTranslation('componentTimeline')
const navigation = useNavigation<StackNavigationProp<TabLocalStackParamList>>()
return (
<GracefullyImage
{...(highlighted && {
accessibilityLabel: t('shared.avatar.accessibilityLabel', {
name: actualAccount.display_name
}),
accessibilityHint: t('shared.avatar.accessibilityHint', {
name: actualAccount.display_name
})
})}
onPress={() =>
!disableOnPress && navigation.push('Tab-Shared-Account', { account: actualAccount })
}
sources={{
default: { uri: actualAccount.avatar },
static: { uri: actualAccount.avatar_static }
}}
dimension={
disableDetails || isConversation
? {
width: StyleConstants.Avatar.XS,
height: StyleConstants.Avatar.XS
}
: {
width: StyleConstants.Avatar.M,
height: StyleConstants.Avatar.M
}
}
style={{
borderRadius: StyleConstants.Avatar.M,
overflow: 'hidden',
marginRight: StyleConstants.Spacing.S
}}
dim
/>
)
}
export default TimelineAvatar