2021-01-24 02:25:43 +01:00
|
|
|
import analytics from '@components/analytics'
|
2021-01-03 02:00:26 +01:00
|
|
|
import Icon from '@components/Icon'
|
2021-01-01 23:10:47 +01:00
|
|
|
import { ParseEmojis } from '@components/Parse'
|
|
|
|
import { useNavigation } from '@react-navigation/native'
|
2021-01-24 02:25:43 +01:00
|
|
|
import { StackNavigationProp } from '@react-navigation/stack'
|
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-04 10:50:24 +01:00
|
|
|
action: Mastodon.Notification['type'] | ('reblog' | 'pinned')
|
2020-10-31 21:04:46 +01:00
|
|
|
notification?: boolean
|
|
|
|
}
|
|
|
|
|
2021-02-27 16:33:54 +01:00
|
|
|
const TimelineActioned = React.memo(
|
|
|
|
({ account, action, notification = false }: Props) => {
|
|
|
|
const { t } = useTranslation('componentTimeline')
|
|
|
|
const { theme } = useTheme()
|
|
|
|
const navigation = useNavigation<
|
|
|
|
StackNavigationProp<Nav.TabLocalStackParamList>
|
|
|
|
>()
|
|
|
|
const name = account.display_name || account.username
|
|
|
|
const iconColor = theme.primary
|
2020-11-23 00:07:32 +01:00
|
|
|
|
2021-02-27 16:33:54 +01:00
|
|
|
const content = (content: string) => (
|
|
|
|
<ParseEmojis content={content} emojis={account.emojis} size='S' />
|
|
|
|
)
|
2021-01-01 16:48:16 +01:00
|
|
|
|
2021-02-27 16:33:54 +01:00
|
|
|
const onPress = useCallback(() => {
|
|
|
|
analytics('timeline_shared_actioned_press', { action })
|
|
|
|
navigation.push('Tab-Shared-Account', { account })
|
|
|
|
}, [])
|
2021-01-01 16:48:16 +01:00
|
|
|
|
2021-02-27 16:33:54 +01:00
|
|
|
const children = useMemo(() => {
|
|
|
|
switch (action) {
|
|
|
|
case 'pinned':
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<Icon
|
|
|
|
name='Anchor'
|
|
|
|
size={StyleConstants.Font.Size.S}
|
|
|
|
color={iconColor}
|
|
|
|
style={styles.icon}
|
|
|
|
/>
|
|
|
|
{content(t('shared.actioned.pinned'))}
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
break
|
|
|
|
case 'favourite':
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<Icon
|
|
|
|
name='Heart'
|
|
|
|
size={StyleConstants.Font.Size.S}
|
|
|
|
color={iconColor}
|
|
|
|
style={styles.icon}
|
|
|
|
/>
|
|
|
|
<Pressable onPress={onPress}>
|
|
|
|
{content(t('shared.actioned.favourite', { name }))}
|
|
|
|
</Pressable>
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
break
|
|
|
|
case 'follow':
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<Icon
|
|
|
|
name='UserPlus'
|
|
|
|
size={StyleConstants.Font.Size.S}
|
|
|
|
color={iconColor}
|
|
|
|
style={styles.icon}
|
|
|
|
/>
|
|
|
|
<Pressable onPress={onPress}>
|
|
|
|
{content(t('shared.actioned.follow', { name }))}
|
|
|
|
</Pressable>
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
break
|
|
|
|
case 'follow_request':
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<Icon
|
|
|
|
name='UserPlus'
|
|
|
|
size={StyleConstants.Font.Size.S}
|
|
|
|
color={iconColor}
|
|
|
|
style={styles.icon}
|
|
|
|
/>
|
|
|
|
<Pressable onPress={onPress}>
|
|
|
|
{content(t('shared.actioned.follow_request', { name }))}
|
|
|
|
</Pressable>
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
break
|
|
|
|
case 'poll':
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<Icon
|
|
|
|
name='BarChart2'
|
|
|
|
size={StyleConstants.Font.Size.S}
|
|
|
|
color={iconColor}
|
|
|
|
style={styles.icon}
|
|
|
|
/>
|
|
|
|
{content(t('shared.actioned.poll'))}
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
break
|
|
|
|
case 'reblog':
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<Icon
|
|
|
|
name='Repeat'
|
|
|
|
size={StyleConstants.Font.Size.S}
|
|
|
|
color={iconColor}
|
|
|
|
style={styles.icon}
|
|
|
|
/>
|
|
|
|
<Pressable onPress={onPress}>
|
|
|
|
{content(
|
|
|
|
notification
|
|
|
|
? t('shared.actioned.reblog.notification', { name })
|
|
|
|
: t('shared.actioned.reblog.default', { name })
|
|
|
|
)}
|
|
|
|
</Pressable>
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
break
|
|
|
|
case 'status':
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<Icon
|
|
|
|
name='Activity'
|
|
|
|
size={StyleConstants.Font.Size.S}
|
|
|
|
color={iconColor}
|
|
|
|
style={styles.icon}
|
|
|
|
/>
|
|
|
|
<Pressable onPress={onPress}>
|
|
|
|
{content(t('shared.actioned.status', { name }))}
|
|
|
|
</Pressable>
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
break
|
|
|
|
}
|
|
|
|
}, [])
|
2021-01-01 16:48:16 +01:00
|
|
|
|
2021-02-27 16:33:54 +01:00
|
|
|
return <View style={styles.actioned} children={children} />
|
|
|
|
},
|
|
|
|
() => true
|
|
|
|
)
|
2020-10-30 00:49:05 +01:00
|
|
|
|
|
|
|
const styles = StyleSheet.create({
|
|
|
|
actioned: {
|
|
|
|
flexDirection: 'row',
|
2021-01-03 02:00:26 +01:00
|
|
|
alignItems: 'center',
|
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-03 02:00:26 +01:00
|
|
|
marginRight: StyleConstants.Spacing.S
|
2020-10-30 00:49:05 +01:00
|
|
|
}
|
|
|
|
})
|
|
|
|
|
2021-02-27 16:33:54 +01:00
|
|
|
export default TimelineActioned
|