tooot/src/components/Timeline/Default.tsx

189 lines
6.3 KiB
TypeScript

import TimelineActioned from '@components/Timeline/Shared/Actioned'
import TimelineActions from '@components/Timeline/Shared/Actions'
import TimelineAttachment from '@components/Timeline/Shared/Attachment'
import TimelineAvatar from '@components/Timeline/Shared/Avatar'
import TimelineCard from '@components/Timeline/Shared/Card'
import TimelineContent from '@components/Timeline/Shared/Content'
import TimelineHeaderDefault from '@components/Timeline/Shared/HeaderDefault'
import TimelinePoll from '@components/Timeline/Shared/Poll'
import { useNavigation } from '@react-navigation/native'
import { StackNavigationProp } from '@react-navigation/stack'
import { featureCheck } from '@utils/helpers/featureCheck'
import { checkIsMyAccount } from '@utils/helpers/isMyAccount'
import removeHTML from '@utils/helpers/removeHTML'
import { TabLocalStackParamList } from '@utils/navigation/navigators'
import { usePreferencesQuery } from '@utils/queryHooks/preferences'
import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
import { StyleConstants } from '@utils/styles/constants'
import { useTheme } from '@utils/styles/ThemeManager'
import React, { useRef, useState } from 'react'
import { Pressable, StyleProp, View, ViewStyle } from 'react-native'
import StatusContext from './Shared/Context'
import TimelineFeedback from './Shared/Feedback'
import TimelineFiltered, { FilteredProps, shouldFilter } from './Shared/Filtered'
import TimelineFullConversation from './Shared/FullConversation'
import TimelineHeaderAndroid from './Shared/HeaderAndroid'
import TimelineTranslate from './Shared/Translate'
export interface Props {
item: Mastodon.Status & { _pinned?: boolean } // For account page, internal property
queryKey?: QueryKeyTimeline
highlighted?: boolean
suppressSpoiler?: boolean // Same content as the main thread, can be dimmed
disableDetails?: boolean
disableOnPress?: boolean
isConversation?: boolean
noBackground?: boolean
}
// When the poll is long
const TimelineDefault: React.FC<Props> = ({
item,
queryKey,
highlighted = false,
suppressSpoiler = false,
disableDetails = false,
disableOnPress = false,
isConversation = false,
noBackground = false
}) => {
const status = item.reblog ? item.reblog : item
const rawContent = useRef<string[]>([])
if (highlighted || isConversation) {
rawContent.current = [
removeHTML(status.content),
status.spoiler_text ? removeHTML(status.spoiler_text) : ''
].filter(c => c.length)
}
const { colors } = useTheme()
const navigation = useNavigation<StackNavigationProp<TabLocalStackParamList>>()
const { data: preferences } = usePreferencesQuery()
const isMyAccount = checkIsMyAccount(status.account.id)
const [spoilerExpanded, setSpoilerExpanded] = useState(
preferences?.['reading:expand:spoilers'] || false
)
const spoilerHidden = status.spoiler_text?.length
? !preferences?.['reading:expand:spoilers'] && !spoilerExpanded
: false
const detectedLanguage = useRef<string>(status.language || '')
const excludeMentions = useRef<Mastodon.Mention[]>([])
const mainStyle: StyleProp<ViewStyle> = {
flex: 1,
padding: disableDetails
? StyleConstants.Spacing.Global.PagePadding / 1.5
: StyleConstants.Spacing.Global.PagePadding,
backgroundColor: noBackground ? undefined : colors.backgroundDefault,
paddingBottom: disableDetails ? StyleConstants.Spacing.Global.PagePadding / 1.5 : 0
}
const main = () => (
<>
{item.reblog ? (
<TimelineActioned action='reblog' rootStatus={item} />
) : item._pinned ? (
<TimelineActioned action='pinned' rootStatus={item} />
) : null}
<View
style={{
flex: 1,
flexDirection: 'row',
...(disableDetails && { alignItems: 'flex-start', overflow: 'hidden' })
}}
>
<TimelineAvatar />
<TimelineHeaderDefault />
</View>
<View
style={{
paddingTop: highlighted ? StyleConstants.Spacing.S : 0,
paddingLeft: highlighted
? 0
: (disableDetails || isConversation
? StyleConstants.Avatar.XS
: StyleConstants.Avatar.M) + StyleConstants.Spacing.S,
...(disableDetails && { marginTop: -StyleConstants.Spacing.S })
}}
>
<TimelineContent setSpoilerExpanded={setSpoilerExpanded} />
<TimelinePoll />
<TimelineAttachment />
<TimelineCard />
<TimelineFullConversation />
<TimelineTranslate />
<TimelineFeedback />
<TimelineActions />
</View>
</>
)
if (!isMyAccount) {
let filterResults: FilteredProps['filterResults'] = []
const [filterRevealed, setFilterRevealed] = useState(false)
const hasFilterServerSide = featureCheck('filter_server_side')
if (hasFilterServerSide) {
if (status.filtered?.length) {
filterResults = status.filtered?.map(filter => filter.filter)
}
} else {
if (queryKey) {
const checkFilter = shouldFilter({ queryKey, status })
if (checkFilter?.length) {
filterResults = checkFilter
}
}
}
if (queryKey && !highlighted && filterResults?.length && !filterRevealed) {
return !filterResults.filter(result => result.filter_action === 'hide').length ? (
<Pressable onPress={() => setFilterRevealed(!filterRevealed)}>
<TimelineFiltered filterResults={filterResults} />
</Pressable>
) : null
}
}
return (
<StatusContext.Provider
value={{
queryKey,
status,
isMyAccount,
spoilerHidden,
rawContent,
detectedLanguage,
excludeMentions,
highlighted,
suppressSpoiler,
inThread: queryKey?.[1].page === 'Toot',
disableDetails,
disableOnPress,
isConversation,
isRemote: item._remote
}}
>
{disableOnPress ? (
<View style={mainStyle}>{main()}</View>
) : (
<>
<Pressable
accessible={highlighted ? false : true}
style={mainStyle}
disabled={highlighted}
onPress={() => navigation.push('Tab-Shared-Toot', { toot: status })}
onLongPress={() => {}}
children={main()}
/>
<TimelineHeaderAndroid />
</>
)}
</StatusContext.Provider>
)
}
export default React.memo(TimelineDefault)