2021-01-01 23:10:47 +01:00
|
|
|
import { ParseEmojis } from '@components/Parse'
|
2020-10-30 00:49:05 +01:00
|
|
|
import { Feather } from '@expo/vector-icons'
|
2021-01-01 23:10:47 +01:00
|
|
|
import { useNavigation } from '@react-navigation/native'
|
2020-12-13 14:04:25 +01:00
|
|
|
import { StyleConstants } from '@utils/styles/constants'
|
2021-01-01 23:10:47 +01:00
|
|
|
import { useTheme } from '@utils/styles/ThemeManager'
|
2021-01-01 16:48:16 +01:00
|
|
|
import React, { useCallback, useMemo } from 'react'
|
2021-01-01 23:10:47 +01:00
|
|
|
import { useTranslation } from 'react-i18next'
|
2021-01-01 16:48:16 +01:00
|
|
|
import { Pressable, StyleSheet, View } from 'react-native'
|
2020-10-30 00:49:05 +01:00
|
|
|
|
2020-10-31 21:04:46 +01:00
|
|
|
export interface Props {
|
2020-12-03 01:28:56 +01:00
|
|
|
account: Mastodon.Account
|
2021-01-01 16:48:16 +01:00
|
|
|
action: 'favourite' | 'follow' | 'poll' | 'reblog' | 'pinned' | 'mention'
|
2020-10-31 21:04:46 +01:00
|
|
|
notification?: boolean
|
|
|
|
}
|
|
|
|
|
2020-12-03 01:28:56 +01:00
|
|
|
const TimelineActioned: React.FC<Props> = ({
|
|
|
|
account,
|
2020-10-30 00:49:05 +01:00
|
|
|
action,
|
|
|
|
notification = false
|
2020-10-31 21:04:46 +01:00
|
|
|
}) => {
|
2021-01-01 23:10:47 +01:00
|
|
|
const { t } = useTranslation('timeline')
|
2020-11-23 00:07:32 +01:00
|
|
|
const { theme } = useTheme()
|
2021-01-01 16:48:16 +01:00
|
|
|
const navigation = useNavigation()
|
2020-12-03 01:28:56 +01:00
|
|
|
const name = account.display_name || account.username
|
2020-11-23 00:07:32 +01:00
|
|
|
const iconColor = theme.primary
|
|
|
|
|
2021-01-01 16:48:16 +01:00
|
|
|
const content = (content: string) => (
|
|
|
|
<ParseEmojis content={content} emojis={account.emojis} size='S' />
|
2020-10-30 00:49:05 +01:00
|
|
|
)
|
2021-01-01 16:48:16 +01:00
|
|
|
|
|
|
|
const onPress = useCallback(() => {
|
|
|
|
navigation.push('Screen-Shared-Account', { account })
|
|
|
|
}, [])
|
|
|
|
|
|
|
|
const children = useMemo(() => {
|
|
|
|
switch (action) {
|
|
|
|
case 'pinned':
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<Feather
|
|
|
|
name='anchor'
|
|
|
|
size={StyleConstants.Font.Size.S}
|
|
|
|
color={iconColor}
|
|
|
|
style={styles.icon}
|
|
|
|
/>
|
2021-01-01 23:10:47 +01:00
|
|
|
{content(t('shared.actioned.pinned'))}
|
2021-01-01 16:48:16 +01:00
|
|
|
</>
|
|
|
|
)
|
|
|
|
break
|
|
|
|
case 'favourite':
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<Feather
|
|
|
|
name='heart'
|
|
|
|
size={StyleConstants.Font.Size.S}
|
|
|
|
color={iconColor}
|
|
|
|
style={styles.icon}
|
|
|
|
/>
|
|
|
|
<Pressable onPress={onPress}>
|
2021-01-01 23:10:47 +01:00
|
|
|
{content(t('shared.actioned.favourite', { name }))}
|
2021-01-01 16:48:16 +01:00
|
|
|
</Pressable>
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
break
|
|
|
|
case 'follow':
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<Feather
|
|
|
|
name='user-plus'
|
|
|
|
size={StyleConstants.Font.Size.S}
|
|
|
|
color={iconColor}
|
|
|
|
style={styles.icon}
|
|
|
|
/>
|
|
|
|
<Pressable onPress={onPress}>
|
2021-01-01 23:10:47 +01:00
|
|
|
{content(t('shared.actioned.follow', { name }))}
|
2021-01-01 16:48:16 +01:00
|
|
|
</Pressable>
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
break
|
|
|
|
case 'poll':
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<Feather
|
|
|
|
name='bar-chart-2'
|
|
|
|
size={StyleConstants.Font.Size.S}
|
|
|
|
color={iconColor}
|
|
|
|
style={styles.icon}
|
|
|
|
/>
|
2021-01-01 23:10:47 +01:00
|
|
|
{content(t('shared.actioned.poll'))}
|
2021-01-01 16:48:16 +01:00
|
|
|
</>
|
|
|
|
)
|
|
|
|
break
|
|
|
|
case 'reblog':
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<Feather
|
|
|
|
name='repeat'
|
|
|
|
size={StyleConstants.Font.Size.S}
|
|
|
|
color={iconColor}
|
|
|
|
style={styles.icon}
|
|
|
|
/>
|
|
|
|
<Pressable onPress={onPress}>
|
2021-01-01 23:10:47 +01:00
|
|
|
{content(
|
|
|
|
notification
|
|
|
|
? t('shared.actioned.reblog.notification', { name })
|
|
|
|
: t('shared.actioned.reblog.default', { name })
|
|
|
|
)}
|
2021-01-01 16:48:16 +01:00
|
|
|
</Pressable>
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
break
|
|
|
|
}
|
|
|
|
}, [])
|
|
|
|
|
|
|
|
return <View style={styles.actioned} children={children} />
|
2020-10-30 00:49:05 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
const styles = StyleSheet.create({
|
|
|
|
actioned: {
|
|
|
|
flexDirection: 'row',
|
2021-01-01 16:48:16 +01:00
|
|
|
marginBottom: StyleConstants.Spacing.S,
|
|
|
|
paddingLeft: StyleConstants.Avatar.M - StyleConstants.Font.Size.S,
|
|
|
|
paddingRight: StyleConstants.Spacing.Global.PagePadding
|
2020-10-30 00:49:05 +01:00
|
|
|
},
|
|
|
|
icon: {
|
2021-01-01 16:48:16 +01:00
|
|
|
paddingRight: StyleConstants.Spacing.S
|
2020-10-30 00:49:05 +01:00
|
|
|
}
|
|
|
|
})
|
|
|
|
|
2020-12-03 01:28:56 +01:00
|
|
|
export default React.memo(TimelineActioned, () => true)
|