2022-12-03 16:50:54 +01:00
|
|
|
import { HeaderLeft } from '@components/Header'
|
2022-12-31 14:00:52 +01:00
|
|
|
import Icon from '@components/Icon'
|
2022-12-28 23:41:36 +01:00
|
|
|
import ComponentSeparator from '@components/Separator'
|
2022-12-31 00:07:28 +01:00
|
|
|
import CustomText from '@components/Text'
|
2021-02-27 16:33:54 +01:00
|
|
|
import TimelineDefault from '@components/Timeline/Default'
|
2022-12-31 15:53:02 +01:00
|
|
|
import { useQuery } from '@tanstack/react-query'
|
|
|
|
import apiGeneral from '@utils/api/general'
|
|
|
|
import apiInstance from '@utils/api/instance'
|
2023-01-03 23:57:23 +01:00
|
|
|
import { urlMatcher } from '@utils/helpers/urlMatcher'
|
2021-08-29 15:25:38 +02:00
|
|
|
import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
|
2023-01-06 01:01:10 +01:00
|
|
|
import { queryClient } from '@utils/queryHooks'
|
2023-01-01 16:44:55 +01:00
|
|
|
import { QueryKeyTimeline } from '@utils/queryHooks/timeline'
|
2023-01-02 23:18:22 +01:00
|
|
|
import { getAccountStorage } from '@utils/storage/actions'
|
2022-12-28 23:41:36 +01:00
|
|
|
import { StyleConstants } from '@utils/styles/constants'
|
2022-12-31 00:07:28 +01:00
|
|
|
import { useTheme } from '@utils/styles/ThemeManager'
|
2022-12-31 15:53:02 +01:00
|
|
|
import React, { useEffect, useRef, useState } from 'react'
|
2022-12-03 16:50:54 +01:00
|
|
|
import { useTranslation } from 'react-i18next'
|
2023-01-06 14:00:50 +01:00
|
|
|
import { Alert, FlatList, Pressable, View } from 'react-native'
|
2022-12-31 14:00:52 +01:00
|
|
|
import { Circle } from 'react-native-animated-spinkit'
|
2022-12-31 00:07:28 +01:00
|
|
|
import { Path, Svg } from 'react-native-svg'
|
2020-10-29 14:52:28 +01:00
|
|
|
|
2021-08-29 15:25:38 +02:00
|
|
|
const TabSharedToot: React.FC<TabSharedStackScreenProps<'Tab-Shared-Toot'>> = ({
|
2022-12-03 16:50:54 +01:00
|
|
|
navigation,
|
2020-10-29 14:52:28 +01:00
|
|
|
route: {
|
2023-01-04 22:39:29 +01:00
|
|
|
params: { toot }
|
2020-10-29 14:52:28 +01:00
|
|
|
}
|
2020-10-31 21:04:46 +01:00
|
|
|
}) => {
|
2022-12-31 00:07:28 +01:00
|
|
|
const { colors } = useTheme()
|
2022-12-31 14:00:52 +01:00
|
|
|
const { t } = useTranslation(['componentTimeline', 'screenTabs'])
|
2022-12-03 16:50:54 +01:00
|
|
|
|
2022-12-31 15:53:02 +01:00
|
|
|
const [hasRemoteContent, setHasRemoteContent] = useState<boolean>(false)
|
2023-01-04 22:39:29 +01:00
|
|
|
const queryKey: { local: QueryKeyTimeline; remote: QueryKeyTimeline } = {
|
|
|
|
local: ['Timeline', { page: 'Toot', toot: toot.id, remote: false }],
|
|
|
|
remote: ['Timeline', { page: 'Toot', toot: toot.id, remote: true }]
|
|
|
|
}
|
2022-12-31 15:53:02 +01:00
|
|
|
|
2022-12-03 16:50:54 +01:00
|
|
|
useEffect(() => {
|
|
|
|
navigation.setOptions({
|
2022-12-31 15:53:02 +01:00
|
|
|
headerTitle: () => (
|
2023-01-02 02:08:12 +01:00
|
|
|
<Pressable
|
|
|
|
style={{ flexDirection: 'row', alignItems: 'center' }}
|
|
|
|
disabled={!hasRemoteContent}
|
|
|
|
onPress={() =>
|
|
|
|
Alert.alert(
|
|
|
|
t('screenTabs:shared.toot.remoteFetch.title'),
|
|
|
|
t('screenTabs:shared.toot.remoteFetch.message')
|
|
|
|
)
|
|
|
|
}
|
|
|
|
>
|
2022-12-31 15:53:02 +01:00
|
|
|
{hasRemoteContent ? (
|
|
|
|
<Icon
|
|
|
|
name='Wifi'
|
|
|
|
size={StyleConstants.Font.Size.M}
|
|
|
|
color={colors.primaryDefault}
|
|
|
|
style={{ marginRight: StyleConstants.Spacing.S }}
|
|
|
|
/>
|
|
|
|
) : null}
|
|
|
|
<CustomText
|
|
|
|
style={{ color: colors.primaryDefault }}
|
|
|
|
fontSize='L'
|
|
|
|
fontWeight='Bold'
|
|
|
|
numberOfLines={1}
|
|
|
|
children={t('screenTabs:shared.toot.name')}
|
|
|
|
/>
|
2023-01-02 02:08:12 +01:00
|
|
|
</Pressable>
|
2022-12-31 15:53:02 +01:00
|
|
|
),
|
2022-12-03 16:50:54 +01:00
|
|
|
headerLeft: () => <HeaderLeft onPress={() => navigation.goBack()} />
|
|
|
|
})
|
2023-01-06 01:01:10 +01:00
|
|
|
navigation.setParams({ toot, queryKey: queryKey.local })
|
2022-12-31 15:53:02 +01:00
|
|
|
}, [hasRemoteContent])
|
2022-12-03 16:50:54 +01:00
|
|
|
|
2023-01-06 14:00:50 +01:00
|
|
|
const flRef = useRef<FlatList>(null)
|
2021-02-27 16:33:54 +01:00
|
|
|
const scrolled = useRef(false)
|
2022-12-16 00:21:53 +01:00
|
|
|
|
2023-01-03 23:57:23 +01:00
|
|
|
const match = urlMatcher(toot.url || toot.uri)
|
2022-12-31 15:53:02 +01:00
|
|
|
const highlightIndex = useRef<number>(0)
|
2023-01-07 13:08:33 +01:00
|
|
|
const query = useQuery<{ pages: { body: Mastodon.Status[] }[] }>(
|
2023-01-01 16:44:55 +01:00
|
|
|
queryKey.local,
|
2022-12-31 15:53:02 +01:00
|
|
|
async () => {
|
|
|
|
const context = await apiInstance<{
|
|
|
|
ancestors: Mastodon.Status[]
|
|
|
|
descendants: Mastodon.Status[]
|
|
|
|
}>({
|
|
|
|
method: 'get',
|
|
|
|
url: `statuses/${toot.id}/context`
|
2023-01-06 01:01:10 +01:00
|
|
|
}).then(res => res.body)
|
2022-12-31 15:53:02 +01:00
|
|
|
|
2023-01-06 01:01:10 +01:00
|
|
|
highlightIndex.current = context.ancestors.length
|
2022-12-31 15:53:02 +01:00
|
|
|
|
2023-01-06 01:01:10 +01:00
|
|
|
const statuses = [...context.ancestors, { ...toot }, ...context.descendants]
|
2022-12-31 15:53:02 +01:00
|
|
|
|
2023-01-06 01:01:10 +01:00
|
|
|
return {
|
|
|
|
pages: [
|
|
|
|
{
|
|
|
|
body: statuses.map((status, index) => {
|
|
|
|
if (index < highlightIndex.current || status.id === toot.id) {
|
2023-01-07 11:32:50 +01:00
|
|
|
status._level = 0
|
|
|
|
return status
|
2023-01-06 01:01:10 +01:00
|
|
|
} else {
|
|
|
|
const repliedLevel: number =
|
|
|
|
statuses.find(s => s.id === status.in_reply_to_id)?._level || 0
|
2023-01-07 11:32:50 +01:00
|
|
|
status._level = repliedLevel + 1
|
|
|
|
return status
|
2023-01-06 01:01:10 +01:00
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
|
|
]
|
2022-12-31 15:53:02 +01:00
|
|
|
}
|
|
|
|
},
|
|
|
|
{
|
2023-01-07 13:08:33 +01:00
|
|
|
placeholderData: { pages: [{ body: [toot] }] },
|
2023-01-02 02:08:12 +01:00
|
|
|
enabled: !toot._remote,
|
2022-12-31 15:53:02 +01:00
|
|
|
staleTime: 0,
|
|
|
|
refetchOnMount: true,
|
2022-12-31 00:07:28 +01:00
|
|
|
onSuccess: data => {
|
2022-12-31 14:00:52 +01:00
|
|
|
if (data.pages[0].body.length < 1) {
|
2021-02-27 16:33:54 +01:00
|
|
|
navigation.goBack()
|
2022-02-12 11:12:05 +01:00
|
|
|
return
|
2021-02-27 16:33:54 +01:00
|
|
|
}
|
2022-12-16 00:21:53 +01:00
|
|
|
|
2023-01-06 01:01:10 +01:00
|
|
|
if (!scrolled.current) {
|
|
|
|
scrolled.current = true
|
|
|
|
const pointer = data.pages[0].body.findIndex(({ id }) => id === toot.id)
|
|
|
|
if (pointer < 1) return
|
|
|
|
const length = flRef.current?.props.data?.length
|
|
|
|
if (!length) return
|
|
|
|
try {
|
|
|
|
setTimeout(() => {
|
|
|
|
try {
|
|
|
|
flRef.current?.scrollToIndex({
|
|
|
|
index: pointer,
|
|
|
|
viewOffset: 100
|
|
|
|
})
|
|
|
|
} catch {}
|
|
|
|
}, 500)
|
|
|
|
} catch (error) {
|
|
|
|
return
|
2022-05-18 00:11:31 +02:00
|
|
|
}
|
2021-02-27 16:33:54 +01:00
|
|
|
}
|
|
|
|
}
|
2022-12-31 00:07:28 +01:00
|
|
|
}
|
2022-12-31 15:53:02 +01:00
|
|
|
)
|
2023-01-06 01:01:10 +01:00
|
|
|
useQuery<Mastodon.Status[]>(
|
2023-01-01 16:44:55 +01:00
|
|
|
queryKey.remote,
|
2022-12-31 15:53:02 +01:00
|
|
|
async () => {
|
2023-01-03 23:57:23 +01:00
|
|
|
const domain = match?.domain
|
2023-01-03 00:10:44 +01:00
|
|
|
if (!domain?.length) {
|
|
|
|
return Promise.reject('Cannot parse remote doamin')
|
|
|
|
}
|
2023-01-03 23:57:23 +01:00
|
|
|
const id = match?.status?.id
|
2023-01-03 00:10:44 +01:00
|
|
|
if (!id?.length) {
|
|
|
|
return Promise.reject('Cannot parse remote toot id')
|
|
|
|
}
|
2022-12-31 15:53:02 +01:00
|
|
|
|
2023-01-03 00:10:44 +01:00
|
|
|
const context = await apiGeneral<{
|
|
|
|
ancestors: Mastodon.Status[]
|
|
|
|
descendants: Mastodon.Status[]
|
|
|
|
}>({
|
|
|
|
method: 'get',
|
|
|
|
domain,
|
|
|
|
url: `api/v1/statuses/${id}/context`
|
|
|
|
}).then(res => res.body)
|
2022-12-31 15:53:02 +01:00
|
|
|
|
2023-01-06 01:01:10 +01:00
|
|
|
if (!context?.ancestors.length && !context?.descendants.length) {
|
2023-01-10 00:52:50 +01:00
|
|
|
return Promise.resolve([{ ...toot }])
|
2022-12-31 15:53:02 +01:00
|
|
|
}
|
|
|
|
|
2023-01-06 01:01:10 +01:00
|
|
|
highlightIndex.current = context.ancestors.length
|
2022-12-31 15:53:02 +01:00
|
|
|
|
2023-01-06 01:01:10 +01:00
|
|
|
const statuses = [...context.ancestors, { ...toot }, ...context.descendants]
|
2022-12-31 15:53:02 +01:00
|
|
|
|
2023-01-06 01:01:10 +01:00
|
|
|
return statuses.map((status, index) => {
|
|
|
|
if (index < highlightIndex.current || status.id === toot.id) {
|
2023-01-07 11:32:50 +01:00
|
|
|
status._level = 0
|
|
|
|
return status
|
2022-12-31 15:53:02 +01:00
|
|
|
}
|
|
|
|
|
2023-01-06 01:01:10 +01:00
|
|
|
const repliedLevel: number = statuses.find(s => s.id === status.in_reply_to_id)?._level || 0
|
2023-01-07 11:32:50 +01:00
|
|
|
status._level = repliedLevel + 1
|
|
|
|
return status
|
2023-01-06 01:01:10 +01:00
|
|
|
})
|
2022-12-31 15:53:02 +01:00
|
|
|
},
|
|
|
|
{
|
2023-01-02 23:18:22 +01:00
|
|
|
enabled:
|
2023-01-09 22:28:53 +01:00
|
|
|
(toot._remote ? true : query.isFetched) &&
|
2023-01-02 23:18:22 +01:00
|
|
|
['public', 'unlisted'].includes(toot.visibility) &&
|
2023-01-03 23:57:23 +01:00
|
|
|
match?.domain !== getAccountStorage.string('auth.domain'),
|
2022-12-31 15:53:02 +01:00
|
|
|
staleTime: 0,
|
2023-01-02 02:08:12 +01:00
|
|
|
refetchOnMount: true,
|
2022-12-31 15:53:02 +01:00
|
|
|
onSuccess: data => {
|
2023-01-07 13:08:33 +01:00
|
|
|
if ((query.data?.pages[0].body.length || 0) < 1 && data.length < 1) {
|
2022-12-31 15:53:02 +01:00
|
|
|
navigation.goBack()
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
2023-01-10 00:52:50 +01:00
|
|
|
if ((query.data?.pages[0].body.length || 0) < data.length) {
|
2023-01-06 01:01:10 +01:00
|
|
|
queryClient.cancelQueries(queryKey.local)
|
|
|
|
queryClient.setQueryData<{
|
|
|
|
pages: { body: Mastodon.Status[] }[]
|
|
|
|
}>(queryKey.local, old => {
|
|
|
|
setHasRemoteContent(true)
|
|
|
|
return {
|
|
|
|
pages: [
|
|
|
|
{
|
|
|
|
body: data.map(remote => {
|
2023-01-10 14:56:13 +01:00
|
|
|
const localMatch = old?.pages[0].body.find(local => local.uri === remote.uri)
|
2023-01-06 01:01:10 +01:00
|
|
|
if (localMatch) {
|
2023-01-07 11:32:50 +01:00
|
|
|
return { ...localMatch, _level: remote._level }
|
2023-01-06 01:01:10 +01:00
|
|
|
} else {
|
|
|
|
return {
|
|
|
|
...remote,
|
|
|
|
_remote: true,
|
|
|
|
account: { ...remote.account, _remote: true },
|
|
|
|
mentions: remote.mentions.map(mention => ({ ...mention, _remote: true })),
|
|
|
|
...(remote.reblog && {
|
|
|
|
reblog: {
|
|
|
|
...remote.reblog,
|
|
|
|
_remote: true,
|
|
|
|
account: { ...remote.reblog.account, _remote: true },
|
|
|
|
mentions: remote.reblog.mentions.map(mention => ({
|
|
|
|
...mention,
|
|
|
|
_remote: true
|
|
|
|
}))
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
|
|
]
|
2023-01-01 17:20:35 +01:00
|
|
|
}
|
2022-12-31 15:53:02 +01:00
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
scrolled.current = true
|
2023-01-06 01:01:10 +01:00
|
|
|
const pointer = data.findIndex(({ id }) => id === toot.id)
|
2022-12-31 15:53:02 +01:00
|
|
|
if (pointer < 1) return
|
|
|
|
const length = flRef.current?.props.data?.length
|
|
|
|
if (!length) return
|
|
|
|
try {
|
|
|
|
setTimeout(() => {
|
|
|
|
try {
|
|
|
|
flRef.current?.scrollToIndex({
|
|
|
|
index: pointer,
|
|
|
|
viewOffset: 100
|
|
|
|
})
|
|
|
|
} catch {}
|
|
|
|
}, 500)
|
|
|
|
} catch (error) {
|
|
|
|
return
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
)
|
2022-12-31 00:07:28 +01:00
|
|
|
|
2023-01-09 16:52:29 +01:00
|
|
|
const [heights, setHeights] = useState<{ [key: number]: number }>({})
|
2022-12-31 12:56:10 +01:00
|
|
|
const MAX_LEVEL = 10
|
|
|
|
const ARC = StyleConstants.Avatar.XS / 4
|
2021-02-27 16:33:54 +01:00
|
|
|
|
2021-02-13 01:26:02 +01:00
|
|
|
return (
|
2023-01-06 14:00:50 +01:00
|
|
|
<FlatList
|
2022-12-31 00:07:28 +01:00
|
|
|
ref={flRef}
|
2023-01-06 14:00:50 +01:00
|
|
|
scrollEventThrottle={16}
|
|
|
|
windowSize={7}
|
2023-01-06 18:38:52 +01:00
|
|
|
data={query.data?.pages?.[0].body}
|
2022-12-31 00:07:28 +01:00
|
|
|
renderItem={({ item, index }) => {
|
2023-01-07 13:08:33 +01:00
|
|
|
const prev = query.data?.pages[0].body[index - 1]?._level || 0
|
2023-01-06 14:00:50 +01:00
|
|
|
const curr = item._level
|
2023-01-07 13:08:33 +01:00
|
|
|
const next = query.data?.pages[0].body[index + 1]?._level || 0
|
2022-12-31 00:07:28 +01:00
|
|
|
|
|
|
|
return (
|
|
|
|
<View
|
|
|
|
style={{
|
|
|
|
paddingLeft:
|
2022-12-31 15:53:02 +01:00
|
|
|
index > highlightIndex.current
|
2023-01-06 14:00:50 +01:00
|
|
|
? Math.min(item._level - 1, MAX_LEVEL) * StyleConstants.Spacing.S
|
2022-12-31 00:07:28 +01:00
|
|
|
: undefined
|
|
|
|
}}
|
|
|
|
onLayout={({
|
|
|
|
nativeEvent: {
|
|
|
|
layout: { height }
|
|
|
|
}
|
2023-01-09 16:52:29 +01:00
|
|
|
}) => setHeights({ ...heights, [index]: height })}
|
2022-12-31 00:07:28 +01:00
|
|
|
>
|
|
|
|
<TimelineDefault
|
|
|
|
item={item}
|
2023-01-01 17:20:35 +01:00
|
|
|
queryKey={item._remote ? queryKey.remote : queryKey.local}
|
2023-01-02 23:18:22 +01:00
|
|
|
highlighted={toot.id === item.id || item.id === 'cached'}
|
|
|
|
isConversation={toot.id !== item.id && item.id !== 'cached'}
|
2022-12-31 00:07:28 +01:00
|
|
|
/>
|
|
|
|
{curr > 1 || next > 1
|
|
|
|
? [...new Array(curr)].map((_, i) => {
|
|
|
|
if (i > MAX_LEVEL) return null
|
|
|
|
|
|
|
|
const lastLine = curr === i + 1
|
|
|
|
if (lastLine) {
|
|
|
|
if (curr === prev + 1 || curr === next - 1) {
|
|
|
|
if (curr > next) {
|
|
|
|
return null
|
|
|
|
}
|
|
|
|
return (
|
|
|
|
<Svg key={i} style={{ position: 'absolute' }}>
|
|
|
|
<Path
|
|
|
|
d={
|
|
|
|
`M ${curr * StyleConstants.Spacing.S + ARC} ${
|
|
|
|
StyleConstants.Spacing.M + StyleConstants.Avatar.XS / 2
|
|
|
|
} ` +
|
|
|
|
`a ${ARC} ${ARC} 0 0 0 -${ARC} ${ARC} ` +
|
|
|
|
`v 999`
|
|
|
|
}
|
|
|
|
strokeWidth={1}
|
|
|
|
stroke={colors.border}
|
|
|
|
strokeOpacity={0.6}
|
|
|
|
/>
|
|
|
|
</Svg>
|
|
|
|
)
|
|
|
|
} else {
|
|
|
|
if (i >= curr - 2) return null
|
|
|
|
return (
|
|
|
|
<Svg key={i} style={{ position: 'absolute' }}>
|
|
|
|
<Path
|
|
|
|
d={
|
|
|
|
`M ${(i + 1) * StyleConstants.Spacing.S} 0 ` +
|
|
|
|
`v ${
|
2023-01-09 16:52:29 +01:00
|
|
|
(heights[index] || 999) -
|
2022-12-31 00:07:28 +01:00
|
|
|
(StyleConstants.Spacing.S * 1.5 + StyleConstants.Font.Size.L) / 2 -
|
|
|
|
StyleConstants.Avatar.XS / 2
|
|
|
|
} ` +
|
|
|
|
`a ${ARC} ${ARC} 0 0 0 ${ARC} ${ARC}`
|
|
|
|
}
|
|
|
|
strokeWidth={1}
|
|
|
|
stroke={colors.border}
|
|
|
|
strokeOpacity={0.6}
|
|
|
|
/>
|
|
|
|
</Svg>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
if (i >= next - 1) {
|
|
|
|
return (
|
|
|
|
<Svg key={i} style={{ position: 'absolute' }}>
|
|
|
|
<Path
|
|
|
|
d={
|
|
|
|
`M ${(i + 1) * StyleConstants.Spacing.S} 0 ` +
|
|
|
|
`v ${
|
2023-01-09 16:52:29 +01:00
|
|
|
(heights[index] || 999) -
|
2022-12-31 00:07:28 +01:00
|
|
|
(StyleConstants.Spacing.S * 1.5 +
|
|
|
|
StyleConstants.Font.Size.L * 1.35) /
|
|
|
|
2
|
|
|
|
} ` +
|
|
|
|
`h ${ARC}`
|
|
|
|
}
|
|
|
|
strokeWidth={1}
|
2023-01-09 22:28:53 +01:00
|
|
|
stroke={colors.border}
|
2022-12-31 00:07:28 +01:00
|
|
|
strokeOpacity={0.6}
|
|
|
|
/>
|
|
|
|
</Svg>
|
|
|
|
)
|
|
|
|
} else {
|
|
|
|
return (
|
|
|
|
<Svg key={i} style={{ position: 'absolute' }}>
|
|
|
|
<Path
|
|
|
|
d={`M ${(i + 1) * StyleConstants.Spacing.S} 0 ` + `v 999`}
|
|
|
|
strokeWidth={1}
|
|
|
|
stroke={colors.border}
|
|
|
|
strokeOpacity={0.6}
|
|
|
|
/>
|
|
|
|
</Svg>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
: null}
|
2023-01-09 22:28:53 +01:00
|
|
|
{/* <CustomText
|
2023-01-07 13:08:33 +01:00
|
|
|
children={query.data?.pages[0].body[index - 1]?._level}
|
2022-12-31 00:07:28 +01:00
|
|
|
style={{ position: 'absolute', top: 4, left: 4, color: colors.red }}
|
|
|
|
/>
|
|
|
|
<CustomText
|
|
|
|
children={item._level}
|
|
|
|
style={{ position: 'absolute', top: 20, left: 4, color: colors.yellow }}
|
|
|
|
/>
|
|
|
|
<CustomText
|
2023-01-07 13:08:33 +01:00
|
|
|
children={query.data?.pages[0].body[index + 1]?._level}
|
2022-12-31 00:07:28 +01:00
|
|
|
style={{ position: 'absolute', top: 36, left: 4, color: colors.green }}
|
2023-01-09 22:28:53 +01:00
|
|
|
/> */}
|
2022-12-31 00:07:28 +01:00
|
|
|
</View>
|
|
|
|
)
|
|
|
|
}}
|
2023-01-06 14:00:50 +01:00
|
|
|
initialNumToRender={6}
|
|
|
|
maxToRenderPerBatch={3}
|
2022-12-31 00:07:28 +01:00
|
|
|
ItemSeparatorComponent={({ leadingItem }) => {
|
|
|
|
return (
|
|
|
|
<>
|
2022-12-18 23:15:58 +01:00
|
|
|
<ComponentSeparator
|
|
|
|
extraMarginLeft={
|
2022-12-31 12:56:10 +01:00
|
|
|
leadingItem.id === toot.id
|
2022-12-18 23:15:58 +01:00
|
|
|
? 0
|
|
|
|
: StyleConstants.Avatar.XS +
|
|
|
|
StyleConstants.Spacing.S +
|
2022-12-31 12:56:10 +01:00
|
|
|
Math.min(Math.max(0, leadingItem._level - 1), MAX_LEVEL) *
|
|
|
|
StyleConstants.Spacing.S
|
2022-12-18 23:15:58 +01:00
|
|
|
}
|
2022-12-16 17:00:07 +01:00
|
|
|
/>
|
2022-12-31 00:07:28 +01:00
|
|
|
{leadingItem._level > 1
|
|
|
|
? [...new Array(leadingItem._level - 1)].map((_, i) => (
|
|
|
|
<Svg key={i} style={{ position: 'absolute', top: -1 }}>
|
|
|
|
<Path
|
|
|
|
d={`M ${(i + 1) * StyleConstants.Spacing.S} 0 ` + `v 1`}
|
|
|
|
strokeWidth={1}
|
|
|
|
stroke={colors.border}
|
|
|
|
strokeOpacity={0.6}
|
|
|
|
/>
|
|
|
|
</Svg>
|
|
|
|
))
|
|
|
|
: null}
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}}
|
2023-01-06 14:00:50 +01:00
|
|
|
onScrollToIndexFailed={error => {
|
|
|
|
const offset = error.averageItemLength * error.index
|
|
|
|
flRef.current?.scrollToOffset({ offset })
|
|
|
|
try {
|
2023-01-07 13:08:33 +01:00
|
|
|
error.index < (query.data?.pages[0].body.length || 0) &&
|
2023-01-06 14:00:50 +01:00
|
|
|
setTimeout(
|
|
|
|
() =>
|
|
|
|
flRef.current?.scrollToIndex({
|
|
|
|
index: error.index,
|
|
|
|
viewOffset: 100
|
|
|
|
}),
|
|
|
|
500
|
|
|
|
)
|
|
|
|
} catch {}
|
|
|
|
}}
|
2022-12-31 15:53:02 +01:00
|
|
|
ListFooterComponent={
|
|
|
|
<View
|
|
|
|
style={{
|
|
|
|
flex: 1,
|
|
|
|
alignItems: 'center',
|
|
|
|
backgroundColor: colors.backgroundDefault,
|
|
|
|
marginHorizontal: StyleConstants.Spacing.M
|
|
|
|
}}
|
|
|
|
>
|
2023-01-06 01:01:10 +01:00
|
|
|
{query.isFetching ? (
|
2022-12-31 15:53:02 +01:00
|
|
|
<Circle size={StyleConstants.Font.Size.L} color={colors.secondary} />
|
|
|
|
) : null}
|
|
|
|
</View>
|
|
|
|
}
|
2021-02-13 01:26:02 +01:00
|
|
|
/>
|
|
|
|
)
|
2020-10-29 14:52:28 +01:00
|
|
|
}
|
2020-10-31 21:04:46 +01:00
|
|
|
|
2021-01-30 01:29:15 +01:00
|
|
|
export default TabSharedToot
|