tooot/src/components/Timeline/Default.tsx

241 lines
8.3 KiB
TypeScript
Raw Normal View History

2022-12-03 01:08:38 +01:00
import menuInstance from '@components/contextMenu/instance'
import menuShare from '@components/contextMenu/share'
import menuStatus from '@components/contextMenu/status'
2021-02-08 23:47:20 +01:00
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'
2022-12-18 17:25:18 +01:00
import removeHTML from '@helpers/removeHTML'
2020-12-30 14:33:33 +01:00
import { useNavigation } from '@react-navigation/native'
2021-01-24 02:25:43 +01:00
import { StackNavigationProp } from '@react-navigation/stack'
2022-04-29 23:57:18 +02:00
import { TabLocalStackParamList } from '@utils/navigation/navigators'
2021-01-07 19:13:09 +01:00
import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
2022-12-18 17:25:18 +01:00
import { checkInstanceFeature, getInstanceAccount } from '@utils/slices/instancesSlice'
2020-12-13 14:04:25 +01:00
import { StyleConstants } from '@utils/styles/constants'
2021-02-08 23:47:20 +01:00
import { useTheme } from '@utils/styles/ThemeManager'
2022-12-03 20:47:11 +01:00
import React, { useRef, useState } from 'react'
2022-11-29 23:44:11 +01:00
import { Pressable, StyleProp, View, ViewStyle } from 'react-native'
2020-12-20 17:53:24 +01:00
import { useSelector } from 'react-redux'
2022-12-03 01:08:38 +01:00
import * as ContextMenu from 'zeego/context-menu'
2022-12-03 20:47:11 +01:00
import StatusContext from './Shared/Context'
2022-04-29 23:57:18 +02:00
import TimelineFeedback from './Shared/Feedback'
2022-12-18 17:25:18 +01:00
import TimelineFiltered, { FilteredProps, shouldFilter } from './Shared/Filtered'
2021-03-14 01:35:38 +01:00
import TimelineFullConversation from './Shared/FullConversation'
2022-12-03 01:08:38 +01:00
import TimelineHeaderAndroid from './Shared/HeaderAndroid'
2021-05-19 20:40:16 +02:00
import TimelineTranslate from './Shared/Translate'
2020-10-29 14:52:28 +01:00
2020-10-31 21:04:46 +01:00
export interface Props {
2021-03-09 10:35:53 +01:00
item: Mastodon.Status & { _pinned?: boolean } // For account page, internal property
2021-01-07 19:13:09 +01:00
queryKey?: QueryKeyTimeline
2021-02-13 01:26:02 +01:00
rootQueryKey?: QueryKeyTimeline
2020-12-12 22:19:18 +01:00
highlighted?: boolean
2021-01-04 18:29:02 +01:00
disableDetails?: boolean
disableOnPress?: boolean
2022-12-16 00:21:53 +01:00
isConversation?: boolean
2020-10-31 21:04:46 +01:00
}
2020-11-23 00:07:32 +01:00
// When the poll is long
2022-06-01 00:33:59 +02:00
const TimelineDefault: React.FC<Props> = ({
item,
queryKey,
rootQueryKey,
highlighted = false,
disableDetails = false,
2022-12-16 00:21:53 +01:00
disableOnPress = false,
isConversation = false
2022-06-01 00:33:59 +02:00
}) => {
2022-12-18 17:25:18 +01:00
const status = item.reblog ? item.reblog : item
const rawContent = useRef<string[]>([])
if (highlighted) {
rawContent.current = [
removeHTML(status.content),
status.spoiler_text ? removeHTML(status.spoiler_text) : ''
].filter(c => c.length)
}
2022-06-01 00:33:59 +02:00
const { colors } = useTheme()
2022-10-27 23:05:00 +02:00
const navigation = useNavigation<StackNavigationProp<TabLocalStackParamList>>()
2020-10-29 14:52:28 +01:00
2022-12-03 20:47:11 +01:00
const instanceAccount = useSelector(getInstanceAccount, () => true)
2021-05-30 23:39:07 +02:00
2022-12-03 20:47:11 +01:00
const ownAccount = status.account?.id === instanceAccount?.id
const [spoilerExpanded, setSpoilerExpanded] = useState(
2022-12-16 22:00:22 +01:00
instanceAccount?.preferences?.['reading:expand:spoilers'] || false
2022-12-03 20:47:11 +01:00
)
const spoilerHidden = status.spoiler_text?.length
2022-12-16 22:00:22 +01:00
? !instanceAccount?.preferences?.['reading:expand:spoilers'] && !spoilerExpanded
2022-12-03 20:47:11 +01:00
: false
2022-12-17 23:21:56 +01:00
const detectedLanguage = useRef<string>(status.language || '')
2022-08-09 00:44:56 +02:00
2022-11-12 17:52:50 +01:00
const mainStyle: StyleProp<ViewStyle> = {
flex: 1,
2022-12-11 14:08:27 +01:00
padding: disableDetails
? StyleConstants.Spacing.Global.PagePadding / 1.5
: StyleConstants.Spacing.Global.PagePadding,
2022-11-12 17:52:50 +01:00
backgroundColor: colors.backgroundDefault,
2022-12-16 00:21:53 +01:00
paddingBottom: disableDetails ? StyleConstants.Spacing.Global.PagePadding / 1.5 : 0
2022-11-12 17:52:50 +01:00
}
const main = () => (
<>
{item.reblog ? (
2022-12-03 20:47:11 +01:00
<TimelineActioned action='reblog' />
2022-11-12 17:52:50 +01:00
) : item._pinned ? (
2022-12-03 20:47:11 +01:00
<TimelineActioned action='pinned' />
2022-11-12 17:52:50 +01:00
) : null}
2022-12-11 14:08:27 +01:00
<View
style={{
flex: 1,
flexDirection: 'row',
...(disableDetails && { alignItems: 'flex-start', overflow: 'hidden' })
}}
>
2022-12-03 20:47:11 +01:00
<TimelineAvatar />
<TimelineHeaderDefault />
2022-11-12 17:52:50 +01:00
</View>
<View
2022-04-30 21:59:13 +02:00
style={{
2022-11-12 17:52:50 +01:00
paddingTop: highlighted ? StyleConstants.Spacing.S : 0,
2022-12-11 14:08:27 +01:00
paddingLeft: highlighted
? 0
2022-12-18 23:15:58 +01:00
: (disableDetails || isConversation
? StyleConstants.Avatar.XS
: StyleConstants.Avatar.M) + StyleConstants.Spacing.S,
2022-12-11 14:08:27 +01:00
...(disableDetails && { marginTop: -StyleConstants.Spacing.S })
2020-12-13 23:02:54 +01:00
}}
2020-12-12 22:19:18 +01:00
>
2022-12-03 20:47:11 +01:00
<TimelineContent setSpoilerExpanded={setSpoilerExpanded} />
<TimelinePoll />
<TimelineAttachment />
<TimelineCard />
<TimelineFullConversation />
<TimelineTranslate />
<TimelineFeedback />
2022-11-12 17:52:50 +01:00
2022-12-18 23:15:58 +01:00
<TimelineActions />
</View>
2022-11-12 17:52:50 +01:00
</>
)
2022-12-03 01:08:38 +01:00
const mShare = menuShare({
2022-12-03 20:47:11 +01:00
visibility: status.visibility,
2022-12-03 01:08:38 +01:00
type: 'status',
2022-12-03 20:47:11 +01:00
url: status.url || status.uri,
2022-12-18 17:25:18 +01:00
rawContent
2022-12-03 01:08:38 +01:00
})
2022-12-03 20:47:11 +01:00
const mStatus = menuStatus({ status, queryKey, rootQueryKey })
const mInstance = menuInstance({ status, queryKey, rootQueryKey })
2022-12-18 17:25:18 +01:00
if (!ownAccount) {
let filterResults: FilteredProps['filterResults'] = []
const [filterRevealed, setFilterRevealed] = useState(false)
const hasFilterServerSide = useSelector(checkInstanceFeature('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
}
}
2022-12-03 20:47:11 +01:00
return (
<StatusContext.Provider
value={{
queryKey,
rootQueryKey,
status,
2022-12-05 14:50:03 +01:00
reblogStatus: item.reblog ? item : undefined,
2022-12-03 20:47:11 +01:00
ownAccount,
spoilerHidden,
2022-12-18 17:25:18 +01:00
rawContent,
2022-12-17 23:21:56 +01:00
detectedLanguage,
2022-12-03 20:47:11 +01:00
highlighted,
2022-12-11 01:46:14 +01:00
inThread: queryKey?.[1].page === 'Toot',
2022-12-03 20:47:11 +01:00
disableDetails,
2022-12-16 00:21:53 +01:00
disableOnPress,
isConversation
2022-12-03 20:47:11 +01:00
}}
>
{disableOnPress ? (
<View style={mainStyle}>{main()}</View>
) : (
<>
<ContextMenu.Root>
<ContextMenu.Trigger>
<Pressable
accessible={highlighted ? false : true}
style={mainStyle}
disabled={highlighted}
onPress={() =>
navigation.push('Tab-Shared-Toot', {
toot: status,
rootQueryKey: queryKey
})
}
onLongPress={() => {}}
children={main()}
/>
</ContextMenu.Trigger>
<ContextMenu.Content>
{mShare.map((mGroup, index) => (
<ContextMenu.Group key={index}>
{mGroup.map(menu => (
<ContextMenu.Item key={menu.key} {...menu.item}>
<ContextMenu.ItemTitle children={menu.title} />
<ContextMenu.ItemIcon iosIconName={menu.icon} />
</ContextMenu.Item>
))}
</ContextMenu.Group>
2022-12-03 01:08:38 +01:00
))}
2022-12-03 20:47:11 +01:00
{mStatus.map((mGroup, index) => (
<ContextMenu.Group key={index}>
{mGroup.map(menu => (
<ContextMenu.Item key={menu.key} {...menu.item}>
<ContextMenu.ItemTitle children={menu.title} />
<ContextMenu.ItemIcon iosIconName={menu.icon} />
</ContextMenu.Item>
))}
</ContextMenu.Group>
2022-12-03 01:08:38 +01:00
))}
2022-12-03 20:47:11 +01:00
{mInstance.map((mGroup, index) => (
<ContextMenu.Group key={index}>
{mGroup.map(menu => (
<ContextMenu.Item key={menu.key} {...menu.item}>
<ContextMenu.ItemTitle children={menu.title} />
<ContextMenu.ItemIcon iosIconName={menu.icon} />
</ContextMenu.Item>
))}
</ContextMenu.Group>
2022-12-03 01:08:38 +01:00
))}
2022-12-03 20:47:11 +01:00
</ContextMenu.Content>
</ContextMenu.Root>
<TimelineHeaderAndroid />
</>
)}
</StatusContext.Provider>
2022-06-01 00:33:59 +02:00
)
}
2020-10-29 14:52:28 +01:00
2020-12-19 18:21:37 +01:00
export default TimelineDefault