tooot/src/components/Timeline/Default.tsx

226 lines
7.9 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-06-01 00:33:59 +02:00
import { uniqBy } from 'lodash'
2022-11-12 17:52:50 +01:00
import React, { useRef } 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-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()
const instanceAccount = useSelector(getInstanceAccount, () => true)
2022-10-27 23:05:00 +02:00
const navigation = useNavigation<StackNavigationProp<TabLocalStackParamList>>()
2020-10-29 14:52:28 +01:00
2022-06-01 00:33:59 +02:00
const actualStatus = item.reblog ? item.reblog : item
2020-10-29 14:52:28 +01:00
2022-06-01 00:33:59 +02:00
const ownAccount = actualStatus.account?.id === instanceAccount?.id
2021-05-30 23:39:07 +02:00
2022-08-09 00:44:56 +02:00
const copiableContent = useRef<{ content: string; complete: boolean }>({
content: '',
complete: false
})
const filtered = queryKey && shouldFilter({ copiableContent, status: actualStatus, 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 onPress = () => {
2022-11-20 22:27:15 +01:00
if (highlighted) return
2022-11-12 17:52:50 +01:00
navigation.push('Tab-Shared-Toot', {
toot: actualStatus,
rootQueryKey: queryKey
})
}
2022-06-01 00:33:59 +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 ? (
<TimelineActioned action='reblog' account={item.account} />
) : item._pinned ? (
<TimelineActioned action='pinned' account={item.account} />
) : null}
<View style={{ flex: 1, width: '100%', flexDirection: 'row' }}>
<TimelineAvatar
queryKey={disableOnPress ? undefined : queryKey}
account={actualStatus.account}
highlighted={highlighted}
/>
<TimelineHeaderDefault
queryKey={disableOnPress ? undefined : queryKey}
2022-12-03 01:08:38 +01:00
rootQueryKey={rootQueryKey}
2022-11-12 17:52:50 +01:00
status={actualStatus}
highlighted={highlighted}
2022-12-03 01:08:38 +01:00
copiableContent={copiableContent}
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-11-12 17:52:50 +01:00
{typeof actualStatus.content === 'string' && actualStatus.content.length > 0 ? (
<TimelineContent
2022-04-30 21:59:13 +02:00
status={actualStatus}
highlighted={highlighted}
2022-11-12 17:52:50 +01:00
disableDetails={disableDetails}
2022-04-30 21:59:13 +02:00
/>
2022-11-12 17:52:50 +01:00
) : null}
{queryKey && actualStatus.poll ? (
<TimelinePoll
2020-12-19 18:21:37 +01:00
queryKey={queryKey}
2021-02-13 01:26:02 +01:00
rootQueryKey={rootQueryKey}
2022-11-12 17:52:50 +01:00
statusId={actualStatus.id}
poll={actualStatus.poll}
2020-12-19 18:21:37 +01:00
reblog={item.reblog ? true : false}
2022-11-12 17:52:50 +01:00
sameAccount={ownAccount}
2020-12-19 18:21:37 +01:00
/>
2021-01-11 21:36:57 +01:00
) : null}
2022-11-12 17:52:50 +01:00
{!disableDetails &&
Array.isArray(actualStatus.media_attachments) &&
actualStatus.media_attachments.length ? (
<TimelineAttachment status={actualStatus} />
) : null}
{!disableDetails && actualStatus.card ? <TimelineCard card={actualStatus.card} /> : null}
{!disableDetails ? (
<TimelineFullConversation queryKey={queryKey} status={actualStatus} />
) : null}
<TimelineTranslate status={actualStatus} highlighted={highlighted} />
<TimelineFeedback status={actualStatus} highlighted={highlighted} />
</View>
{queryKey && !disableDetails ? (
<TimelineActions
queryKey={queryKey}
rootQueryKey={rootQueryKey}
highlighted={highlighted}
status={actualStatus}
ownAccount={ownAccount}
accts={uniqBy(
([actualStatus.account] as Mastodon.Account[] & Mastodon.Mention[])
.concat(actualStatus.mentions)
.filter(d => d?.id !== instanceAccount?.id),
d => d?.id
).map(d => d?.acct)}
reblog={item.reblog ? true : false}
/>
) : null}
</>
)
2022-12-03 01:08:38 +01:00
const mShare = menuShare({
visibility: actualStatus.visibility,
type: 'status',
url: actualStatus.url || actualStatus.uri,
copiableContent
})
const mStatus = menuStatus({ status: actualStatus, queryKey, rootQueryKey })
const mInstance = menuInstance({ status: actualStatus, queryKey, rootQueryKey })
2022-11-12 17:52:50 +01:00
return disableOnPress ? (
<View style={mainStyle}>{main()}</View>
) : (
2022-12-03 01:08:38 +01:00
<>
<ContextMenu.Root>
<ContextMenu.Trigger>
<Pressable
accessible={highlighted ? false : true}
style={mainStyle}
onPress={onPress}
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>
))}
{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>
))}
{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>
))}
</ContextMenu.Content>
</ContextMenu.Root>
<TimelineHeaderAndroid
queryKey={disableOnPress ? undefined : queryKey}
rootQueryKey={rootQueryKey}
status={actualStatus}
/>
</>
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