mirror of https://github.com/tooot-app/app
106 lines
3.1 KiB
TypeScript
106 lines
3.1 KiB
TypeScript
|
import Icon from '@components/Icon'
|
||
|
|
import { ParseEmojis } from '@components/Parse'
|
||
|
|
import ComponentSeparator from '@components/Separator'
|
||
|
|
import TimelineAttachment from '@components/Timeline/Shared/Attachment'
|
||
|
|
import TimelineContent from '@components/Timeline/Shared/Content'
|
||
|
|
import HeaderSharedCreated from '@components/Timeline/Shared/HeaderShared/Created'
|
||
|
|
import { TabSharedStackScreenProps } from '@utils/navigation/navigators'
|
||
|
|
import { useStatusHistory } from '@utils/queryHooks/statusesHistory'
|
||
|
|
import { StyleConstants } from '@utils/styles/constants'
|
||
|
|
import { useTheme } from '@utils/styles/ThemeManager'
|
||
|
|
import React from 'react'
|
||
|
|
import { Text, View } from 'react-native'
|
||
|
|
import { ScrollView } from 'react-native-gesture-handler'
|
||
|
|
|
||
|
|
const ContentView = ({
|
||
|
|
history,
|
||
|
|
first,
|
||
|
|
last
|
||
|
|
}: {
|
||
|
|
history: Mastodon.StatusHistory
|
||
|
|
first: boolean
|
||
|
|
last: boolean
|
||
|
|
}) => {
|
||
|
|
const { colors } = useTheme()
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<View
|
||
|
|
style={{
|
||
|
|
padding: StyleConstants.Spacing.Global.PagePadding,
|
||
|
|
paddingTop: first ? 0 : undefined
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<HeaderSharedCreated created_at={history.created_at} />
|
||
|
|
{typeof history.content === 'string' && history.content.length > 0 ? (
|
||
|
|
<TimelineContent status={history} />
|
||
|
|
) : null}
|
||
|
|
{history.poll
|
||
|
|
? history.poll.options.map((option, index) => (
|
||
|
|
<View
|
||
|
|
key={index}
|
||
|
|
style={{ flex: 1, paddingVertical: StyleConstants.Spacing.S }}
|
||
|
|
>
|
||
|
|
<View style={{ flex: 1, flexDirection: 'row' }}>
|
||
|
|
<Icon
|
||
|
|
style={{
|
||
|
|
paddingTop:
|
||
|
|
StyleConstants.Font.LineHeight.M -
|
||
|
|
StyleConstants.Font.Size.M,
|
||
|
|
marginRight: StyleConstants.Spacing.S
|
||
|
|
}}
|
||
|
|
name='Circle'
|
||
|
|
size={StyleConstants.Font.Size.M}
|
||
|
|
color={colors.disabled}
|
||
|
|
/>
|
||
|
|
<Text style={{ flex: 1 }}>
|
||
|
|
<ParseEmojis
|
||
|
|
content={option.title}
|
||
|
|
emojis={history.poll?.emojis}
|
||
|
|
/>
|
||
|
|
</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
))
|
||
|
|
: null}
|
||
|
|
{Array.isArray(history.media_attachments) &&
|
||
|
|
history.media_attachments.length ? (
|
||
|
|
<TimelineAttachment status={history} />
|
||
|
|
) : null}
|
||
|
|
</View>
|
||
|
|
{!last ? <ComponentSeparator extraMarginLeft={0} /> : null}
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const TabSharedHistory: React.FC<
|
||
|
|
TabSharedStackScreenProps<'Tab-Shared-History'>
|
||
|
|
> = ({
|
||
|
|
route: {
|
||
|
|
params: { id }
|
||
|
|
}
|
||
|
|
}) => {
|
||
|
|
const { data } = useStatusHistory({ id })
|
||
|
|
|
||
|
|
return (
|
||
|
|
<ScrollView>
|
||
|
|
{data && data.length > 0
|
||
|
|
? data
|
||
|
|
.slice(0)
|
||
|
|
.reverse()
|
||
|
|
.map((d, i) =>
|
||
|
|
i !== 0 ? (
|
||
|
|
<ContentView
|
||
|
|
key={i}
|
||
|
|
history={d}
|
||
|
|
first={i === 1}
|
||
|
|
last={i === data.length - 1}
|
||
|
|
/>
|
||
|
|
) : null
|
||
|
|
)
|
||
|
|
: null}
|
||
|
|
</ScrollView>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default TabSharedHistory
|