2020-12-11 00:29:22 +01:00
|
|
|
import React, { useContext } from 'react'
|
2020-12-13 01:24:25 +01:00
|
|
|
import { Dimensions, StyleSheet, View } from 'react-native'
|
2020-12-13 14:04:25 +01:00
|
|
|
import { useTheme } from '@utils/styles/ThemeManager'
|
2020-12-10 19:19:56 +01:00
|
|
|
|
2020-12-13 14:04:25 +01:00
|
|
|
import TimelineAttachment from '@components/Timelines/Timeline/Shared/Attachment'
|
|
|
|
import TimelineAvatar from '@components/Timelines/Timeline/Shared/Avatar'
|
|
|
|
import TimelineCard from '@components/Timelines/Timeline/Shared/Card'
|
|
|
|
import TimelineContent from '@components/Timelines/Timeline/Shared/Content'
|
|
|
|
import TimelineHeaderDefault from '@components/Timelines/Timeline/Shared/HeaderDefault'
|
|
|
|
import { ComposeContext } from '@screens/Shared/Compose'
|
|
|
|
import { StyleConstants } from '@utils/styles/constants'
|
2020-12-10 19:19:56 +01:00
|
|
|
|
2020-12-11 00:29:22 +01:00
|
|
|
const ComposeReply: React.FC = () => {
|
|
|
|
const {
|
|
|
|
composeState: { replyToStatus }
|
|
|
|
} = useContext(ComposeContext)
|
2020-12-10 19:19:56 +01:00
|
|
|
const { theme } = useTheme()
|
|
|
|
|
2020-12-13 01:24:25 +01:00
|
|
|
const contentWidth =
|
|
|
|
Dimensions.get('window').width -
|
|
|
|
StyleConstants.Spacing.Global.PagePadding * 2 - // Global page padding on both sides
|
|
|
|
StyleConstants.Avatar.S - // Avatar width
|
|
|
|
StyleConstants.Spacing.S // Avatar margin to the right
|
|
|
|
|
2020-12-10 19:19:56 +01:00
|
|
|
return (
|
2020-12-13 01:24:25 +01:00
|
|
|
<View style={[styles.status, { borderTopColor: theme.border }]}>
|
2020-12-11 00:29:22 +01:00
|
|
|
<TimelineAvatar account={replyToStatus!.account} />
|
2020-12-10 19:19:56 +01:00
|
|
|
<View style={styles.details}>
|
2020-12-11 00:29:22 +01:00
|
|
|
<TimelineHeaderDefault status={replyToStatus!} />
|
|
|
|
{replyToStatus!.content.length > 0 && (
|
|
|
|
<TimelineContent status={replyToStatus!} />
|
2020-12-10 19:19:56 +01:00
|
|
|
)}
|
2020-12-11 00:29:22 +01:00
|
|
|
{replyToStatus!.media_attachments.length > 0 && (
|
2020-12-13 01:24:25 +01:00
|
|
|
<TimelineAttachment status={replyToStatus!} width={contentWidth} />
|
2020-12-10 19:19:56 +01:00
|
|
|
)}
|
2020-12-11 00:29:22 +01:00
|
|
|
{replyToStatus!.card && <TimelineCard card={replyToStatus!.card} />}
|
2020-12-10 19:19:56 +01:00
|
|
|
</View>
|
|
|
|
</View>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
const styles = StyleSheet.create({
|
|
|
|
status: {
|
|
|
|
flex: 1,
|
2020-12-13 01:24:25 +01:00
|
|
|
flexDirection: 'row',
|
|
|
|
borderTopWidth: StyleSheet.hairlineWidth,
|
|
|
|
paddingTop: StyleConstants.Spacing.Global.PagePadding
|
2020-12-10 19:19:56 +01:00
|
|
|
},
|
|
|
|
details: {
|
|
|
|
flex: 1
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
export default React.memo(ComposeReply, () => true)
|