tooot/src/screens/Shared/Compose/Reply.tsx

55 lines
1.9 KiB
TypeScript
Raw Normal View History

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
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 }]}>
<TimelineAvatar account={replyToStatus!.account} />
2020-12-10 19:19:56 +01:00
<View style={styles.details}>
<TimelineHeaderDefault status={replyToStatus!} />
{replyToStatus!.content.length > 0 && (
<TimelineContent status={replyToStatus!} />
2020-12-10 19:19:56 +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
)}
{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)