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 { 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, composedMessageStyle } from './chat-constants.js'; | ||||
| clusterEndHeight, | |||||
| inlineEngagementStyle, | |||||
| inlineEngagementLeftStyle, | |||||
| inlineEngagementRightStyle, | |||||
| composedMessageStyle, | |||||
| } 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'; | ||||
| import SwipeableMessage from './swipeable-message.react.js'; | import SwipeableMessage from './swipeable-message.react.js'; | ||||
| import { useContentAndHeaderOpacity, useDeliveryIconOpacity } from './utils.js'; | import { useContentAndHeaderOpacity, useDeliveryIconOpacity } from './utils.js'; | ||||
| import { type InputState, InputStateContext } from '../input/input-state.js'; | import { type InputState, InputStateContext } from '../input/input-state.js'; | ||||
| ▲ Show 20 Lines • Show All 111 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 = | |||||
| positioning === 'left' | |||||
| ? styles.leftInlineEngagement | |||||
| : styles.rightInlineEngagement; | |||||
| inlineEngagement = ( | inlineEngagement = ( | ||||
| <View style={[styles.inlineEngagement, inlineEngagementPositionStyle]}> | |||||
| <InlineEngagement | <InlineEngagement | ||||
| threadInfo={item.threadCreatedFromMessage} | threadInfo={item.threadCreatedFromMessage} | ||||
| reactions={item.reactions} | reactions={item.reactions} | ||||
| positioning={positioning} | |||||
| /> | /> | ||||
| </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 29 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, | |||||
| }, | |||||
| messageBox: { | messageBox: { | ||||
| marginRight: 5, | marginRight: 5, | ||||
| }, | }, | ||||
| rightChatBubble: { | rightChatBubble: { | ||||
| justifyContent: 'flex-start', | justifyContent: 'flex-start', | ||||
| }, | }, | ||||
| rightInlineEngagement: { | |||||
| alignSelf: 'flex-end', | |||||
| position: 'relative', | |||||
| right: inlineEngagementRightStyle.marginRight, | |||||
| top: inlineEngagementRightStyle.topOffset, | |||||
| }, | |||||
| }); | }); | ||||
| const ConnectedComposedMessage: React.ComponentType<BaseProps> = | const ConnectedComposedMessage: React.ComponentType<BaseProps> = | ||||
| React.memo<BaseProps>(function ConnectedComposedMessage(props: BaseProps) { | React.memo<BaseProps>(function ConnectedComposedMessage(props: BaseProps) { | ||||
| const composedMessageMaxWidth = useComposedMessageMaxWidth(); | const composedMessageMaxWidth = useComposedMessageMaxWidth(); | ||||
| const colors = useColors(); | const colors = useColors(); | ||||
| const inputState = React.useContext(InputStateContext); | const inputState = React.useContext(InputStateContext); | ||||
| const navigateToSidebar = useNavigateToSidebar(props.item); | const navigateToSidebar = useNavigateToSidebar(props.item); | ||||
| Show All 16 Lines | |||||