tooot/src/components/Timeline/Default.tsx

197 lines
6.8 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'
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'
2021-08-29 15:25:38 +02:00
import { 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'
2021-05-30 23:39:07 +02:00
import TimelineFiltered, { 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
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,
disableOnPress = false
}) => {
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 status = item.reblog ? item.reblog : item
const ownAccount = status.account?.id === instanceAccount?.id
const [spoilerExpanded, setSpoilerExpanded] = useState(
2022-12-04 17:56:47 +01:00
instanceAccount?.preferences['reading:expand:spoilers'] || false
2022-12-03 20:47:11 +01:00
)
const spoilerHidden = status.spoiler_text?.length
2022-12-04 17:56:47 +01:00
? !instanceAccount?.preferences['reading:expand:spoilers'] && !spoilerExpanded
2022-12-03 20:47:11 +01:00
: false
2022-08-09 00:44:56 +02:00
const copiableContent = useRef<{ content: string; complete: boolean }>({
content: '',
complete: false
})
2022-12-03 20:47:11 +01:00
const filtered = queryKey && shouldFilter({ copiableContent, status, queryKey })
if (queryKey && filtered && !highlighted) {
return <TimelineFiltered phrase={filtered} />
2022-06-01 00:33:59 +02:00
}
2022-04-30 21:59:13 +02:00
2022-11-12 17:52:50 +01:00
const mainStyle: StyleProp<ViewStyle> = {
padding: StyleConstants.Spacing.Global.PagePadding,
backgroundColor: colors.backgroundDefault,
paddingBottom: disableDetails ? StyleConstants.Spacing.Global.PagePadding : 0
}
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}
<View style={{ flex: 1, width: '100%', flexDirection: 'row' }}>
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,
paddingLeft: highlighted ? 0 : StyleConstants.Avatar.M + 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
</View>
2022-12-03 20:47:11 +01:00
<TimelineActions />
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-03 01:08:38 +01:00
copiableContent
})
2022-12-03 20:47:11 +01:00
const mStatus = menuStatus({ status, queryKey, rootQueryKey })
const mInstance = menuInstance({ status, queryKey, rootQueryKey })
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,
copiableContent,
highlighted,
2022-12-11 01:46:14 +01:00
inThread: queryKey?.[1].page === 'Toot',
2022-12-03 20:47:11 +01:00
disableDetails,
disableOnPress
}}
>
{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