Changeset View
Changeset View
Standalone View
Standalone View
native/chat/composed-message.react.js
// @flow | // @flow | ||||
import Icon from '@expo/vector-icons/Feather.js'; | import Icon from '@expo/vector-icons/Feather.js'; | ||||
import invariant from 'invariant'; | import invariant from 'invariant'; | ||||
import * as React from 'react'; | import * as React from 'react'; | ||||
import { StyleSheet, View } from 'react-native'; | import { StyleSheet, View } from 'react-native'; | ||||
import Animated from 'react-native-reanimated'; | import Animated from 'react-native-reanimated'; | ||||
import { getAvatarForUser } from 'lib/shared/avatar-utils.js'; | import { getAvatarForUser } from 'lib/shared/avatar-utils.js'; | ||||
import { createMessageReply } from 'lib/shared/message-utils.js'; | import { createMessageReply } from 'lib/shared/message-utils.js'; | ||||
import { assertComposableMessageType } from 'lib/types/message-types.js'; | import { assertComposableMessageType } from 'lib/types/message-types.js'; | ||||
import { | import { | ||||
clusterEndHeight, | clusterEndHeight, | ||||
inlineEngagementStyle, | |||||
inlineEngagementLeftStyle, | |||||
inlineEngagementRightStyle, | |||||
composedMessageStyle, | composedMessageStyle, | ||||
avatarOffset, | avatarOffset, | ||||
} from './chat-constants.js'; | } from './chat-constants.js'; | ||||
import { useComposedMessageMaxWidth } from './composed-message-width.js'; | import { useComposedMessageMaxWidth } from './composed-message-width.js'; | ||||
import { FailedSend } from './failed-send.react.js'; | import { FailedSend } from './failed-send.react.js'; | ||||
import { InlineEngagement } from './inline-engagement.react.js'; | import { InlineEngagement } from './inline-engagement.react.js'; | ||||
import { MessageHeader } from './message-header.react.js'; | import { MessageHeader } from './message-header.react.js'; | ||||
import { useNavigateToSidebar } from './sidebar-navigation.js'; | import { useNavigateToSidebar } from './sidebar-navigation.js'; | ||||
▲ Show 20 Lines • Show All 141 Lines • ▼ Show 20 Lines | render() { | ||||
); | ); | ||||
let inlineEngagement = null; | let inlineEngagement = null; | ||||
if ( | if ( | ||||
item.threadCreatedFromMessage || | item.threadCreatedFromMessage || | ||||
Object.keys(item.reactions).length > 0 | Object.keys(item.reactions).length > 0 | ||||
) { | ) { | ||||
const positioning = isViewer ? 'right' : 'left'; | const positioning = isViewer ? 'right' : 'left'; | ||||
const inlineEngagementPositionStyle = []; | |||||
if (positioning === 'left') { | |||||
inlineEngagementPositionStyle.push(styles.leftInlineEngagement); | |||||
} else { | |||||
inlineEngagementPositionStyle.push(styles.rightInlineEngagement); | |||||
} | |||||
if (this.props.shouldRenderAvatars) { | |||||
inlineEngagementPositionStyle.push({ marginLeft: avatarOffset }); | |||||
} | |||||
inlineEngagement = ( | inlineEngagement = ( | ||||
<View style={[styles.inlineEngagement, inlineEngagementPositionStyle]}> | |||||
<InlineEngagement | <InlineEngagement | ||||
threadInfo={item.threadCreatedFromMessage} | threadInfo={item.threadCreatedFromMessage} | ||||
reactions={item.reactions} | reactions={item.reactions} | ||||
positioning={positioning} | |||||
shouldRenderAvatars={shouldRenderAvatars} | |||||
/> | /> | ||||
</View> | |||||
); | ); | ||||
} | } | ||||
return ( | return ( | ||||
<View {...viewProps}> | <View {...viewProps}> | ||||
<AnimatedView style={{ opacity: contentAndHeaderOpacity }}> | <AnimatedView style={{ opacity: contentAndHeaderOpacity }}> | ||||
<MessageHeader item={item} focused={focused} display="lowContrast" /> | <MessageHeader item={item} focused={focused} display="lowContrast" /> | ||||
</AnimatedView> | </AnimatedView> | ||||
Show All 35 Lines | const styles = StyleSheet.create({ | ||||
icon: { | icon: { | ||||
fontSize: 16, | fontSize: 16, | ||||
textAlign: 'center', | textAlign: 'center', | ||||
}, | }, | ||||
iconContainer: { | iconContainer: { | ||||
marginLeft: 2, | marginLeft: 2, | ||||
width: 16, | width: 16, | ||||
}, | }, | ||||
inlineEngagement: { | |||||
marginBottom: inlineEngagementStyle.marginBottom, | |||||
marginTop: inlineEngagementStyle.marginTop, | |||||
}, | |||||
leftChatBubble: { | leftChatBubble: { | ||||
justifyContent: 'flex-end', | justifyContent: 'flex-end', | ||||
}, | }, | ||||
leftInlineEngagement: { | |||||
justifyContent: 'flex-start', | |||||
position: 'relative', | |||||
top: inlineEngagementLeftStyle.topOffset, | |||||
}, | |||||
messageBoxContainer: { | messageBoxContainer: { | ||||
flex: 1, | flex: 1, | ||||
marginRight: 5, | marginRight: 5, | ||||
}, | }, | ||||
rightChatBubble: { | rightChatBubble: { | ||||
justifyContent: 'flex-start', | justifyContent: 'flex-start', | ||||
}, | }, | ||||
rightInlineEngagement: { | |||||
alignSelf: 'flex-end', | |||||
position: 'relative', | |||||
right: inlineEngagementRightStyle.marginRight, | |||||
top: inlineEngagementRightStyle.topOffset, | |||||
}, | |||||
swipeableContainer: { | swipeableContainer: { | ||||
alignItems: 'flex-end', | alignItems: 'flex-end', | ||||
flexDirection: 'row', | flexDirection: 'row', | ||||
}, | }, | ||||
}); | }); | ||||
const ConnectedComposedMessage: React.ComponentType<BaseProps> = | const ConnectedComposedMessage: React.ComponentType<BaseProps> = | ||||
React.memo<BaseProps>(function ConnectedComposedMessage(props: BaseProps) { | React.memo<BaseProps>(function ConnectedComposedMessage(props: BaseProps) { | ||||
Show All 23 Lines |