tooot/src/components/Timelines/Timeline/Default.tsx

138 lines
4.2 KiB
TypeScript
Raw Normal View History

2020-11-28 17:07:30 +01:00
import React, { useCallback, useMemo } from 'react'
2020-10-29 14:52:28 +01:00
import { Dimensions, Pressable, StyleSheet, View } from 'react-native'
import { useNavigation } from '@react-navigation/native'
2020-12-13 14:04:25 +01:00
import TimelineActioned from '@components/Timelines/Timeline/Shared/Actioned'
import TimelineActions from '@components/Timelines/Timeline/Shared/Actions'
import TimelineAttachment from '@components/Timelines/Timeline/Shared/Attachment'
import TimelineAvatar from '@components/Timelines/Timeline/Shared/Avatar'
import TimelineCard from '@components/Timelines/Timeline/Shared/Card'
import TimelineContent from '@components/Timelines/Timeline/Shared/Content'
import TimelineHeaderDefault from '@components/Timelines/Timeline/Shared/HeaderDefault'
import TimelinePoll from '@components/Timelines/Timeline/Shared/Poll'
2020-12-03 01:28:56 +01:00
2020-12-13 14:04:25 +01:00
import { StyleConstants } from '@utils/styles/constants'
2020-10-29 14:52:28 +01:00
2020-10-31 21:04:46 +01:00
export interface Props {
2020-11-22 00:46:23 +01:00
item: Mastodon.Status
2020-12-18 23:58:53 +01:00
queryKey: QueryKey.Timeline
2020-12-14 23:44:57 +01:00
index: number
pinnedLength?: number
2020-12-12 22:19:18 +01:00
highlighted?: boolean
2020-10-31 21:04:46 +01:00
}
2020-11-23 00:07:32 +01:00
// When the poll is long
2020-12-12 22:19:18 +01:00
const TimelineDefault: React.FC<Props> = ({
item,
queryKey,
2020-12-14 23:44:57 +01:00
index,
pinnedLength,
2020-12-12 22:19:18 +01:00
highlighted = false
}) => {
const isRemotePublic = queryKey[0] === 'RemotePublic'
2020-10-29 14:52:28 +01:00
const navigation = useNavigation()
2020-11-22 00:46:23 +01:00
let actualStatus = item.reblog ? item.reblog : item
2020-12-12 22:19:18 +01:00
const contentWidth = highlighted
? Dimensions.get('window').width -
StyleConstants.Spacing.Global.PagePadding * 2 // Global page padding on both sides
: Dimensions.get('window').width -
StyleConstants.Spacing.Global.PagePadding * 2 - // Global page padding on both sides
StyleConstants.Avatar.S - // Avatar width
StyleConstants.Spacing.S // Avatar margin to the right
2020-10-29 14:52:28 +01:00
const tootOnPress = useCallback(
2020-11-28 17:07:30 +01:00
() =>
!isRemotePublic &&
2020-12-18 00:00:45 +01:00
navigation.push('Screen-Shared-Toot', {
2020-12-12 12:49:29 +01:00
toot: actualStatus
2020-11-28 17:07:30 +01:00
}),
[]
)
const tootChildren = useMemo(
2020-11-28 17:07:30 +01:00
() => (
2020-12-12 22:19:18 +01:00
<View
2020-12-13 23:02:54 +01:00
style={{
paddingTop: highlighted ? StyleConstants.Spacing.S : 0,
paddingLeft: highlighted
? 0
: StyleConstants.Avatar.S + StyleConstants.Spacing.S
}}
2020-12-12 22:19:18 +01:00
>
2020-12-03 01:28:56 +01:00
{actualStatus.content.length > 0 && (
2020-12-12 22:19:18 +01:00
<TimelineContent status={actualStatus} highlighted={highlighted} />
2020-12-03 01:28:56 +01:00
)}
{actualStatus.poll && (
2020-12-03 10:39:37 +01:00
<TimelinePoll queryKey={queryKey} status={actualStatus} />
2020-11-28 17:07:30 +01:00
)}
{actualStatus.media_attachments.length > 0 && (
2020-12-03 01:28:56 +01:00
<TimelineAttachment status={actualStatus} width={contentWidth} />
2020-11-28 17:07:30 +01:00
)}
2020-12-03 01:28:56 +01:00
{actualStatus.card && <TimelineCard card={actualStatus.card} />}
2020-12-12 22:19:18 +01:00
</View>
2020-11-28 17:07:30 +01:00
),
2020-12-03 01:28:56 +01:00
[actualStatus.poll?.voted]
2020-11-28 17:07:30 +01:00
)
2020-12-03 01:28:56 +01:00
return (
<View style={styles.statusView}>
2020-12-14 23:44:57 +01:00
{item.reblog ? (
2020-12-03 01:28:56 +01:00
<TimelineActioned action='reblog' account={item.account} />
2020-12-14 23:44:57 +01:00
) : pinnedLength && index < pinnedLength ? (
<TimelineActioned action='pinned' account={item.account} />
) : null}
2020-12-13 23:02:54 +01:00
2020-12-12 22:19:18 +01:00
<View style={styles.header}>
<TimelineAvatar
{...(!isRemotePublic && { queryKey })}
account={actualStatus.account}
/>
<TimelineHeaderDefault
{...(!isRemotePublic && { queryKey })}
status={actualStatus}
/>
2020-12-12 22:19:18 +01:00
</View>
2020-12-12 22:19:18 +01:00
<Pressable onPress={tootOnPress} children={tootChildren} />
{!isRemotePublic && (
<View
style={{
paddingLeft: highlighted
? 0
: StyleConstants.Avatar.S + StyleConstants.Spacing.S
}}
>
<TimelineActions queryKey={queryKey} status={actualStatus} />
</View>
)}
2020-12-03 01:28:56 +01:00
</View>
)
2020-10-29 14:52:28 +01:00
}
const styles = StyleSheet.create({
statusView: {
2020-12-01 00:44:28 +01:00
padding: StyleConstants.Spacing.Global.PagePadding,
paddingBottom: StyleConstants.Spacing.M
2020-10-29 14:52:28 +01:00
},
2020-12-12 22:19:18 +01:00
header: {
2020-10-29 14:52:28 +01:00
flex: 1,
2020-12-12 22:19:18 +01:00
width: '100%',
2020-12-13 01:24:25 +01:00
flexDirection: 'row'
2020-10-29 14:52:28 +01:00
}
})
2020-11-28 17:07:30 +01:00
export default React.memo(TimelineDefault, (prev, next) => {
let skipUpdate = true
2020-12-03 10:39:37 +01:00
skipUpdate =
prev.item.id === next.item.id &&
prev.item.replies_count === next.item.replies_count &&
prev.item.favourited === next.item.favourited &&
prev.item.reblogged === next.item.reblogged &&
prev.item.bookmarked === next.item.bookmarked &&
prev.item.poll?.voted === next.item.poll?.voted &&
prev.item.reblog?.poll?.voted === next.item.reblog?.poll?.voted
2020-11-28 17:07:30 +01:00
return skipUpdate
})