Changeset View
Changeset View
Standalone View
Standalone View
native/chat/composed-message.react.js
| Show First 20 Lines • Show All 93 Lines • ▼ Show 20 Lines | const containerStyle = [ | ||||
| { marginBottom: containerMarginBottom }, | { marginBottom: containerMarginBottom }, | ||||
| highlightStyle, | highlightStyle, | ||||
| ]; | ]; | ||||
| const swipeableMessageBoxStyle = [ | const swipeableMessageBoxStyle = [ | ||||
| styles.swipeableContainer, | styles.swipeableContainer, | ||||
| { maxWidth: composedMessageMaxWidth }, | { maxWidth: composedMessageMaxWidth }, | ||||
| ]; | ]; | ||||
| const messageBoxStyleContainerStyle = [styles.messageBoxContainer]; | const messageBoxContainerStyle = [styles.messageBoxContainer]; | ||||
| const positioningStyle = isViewer | const positioningStyle = isViewer | ||||
| ? { alignItems: 'flex-end' } | ? styles.rightChatContainer | ||||
| : { alignItems: 'flex-start' }; | : styles.leftChatContainer; | ||||
| messageBoxStyleContainerStyle.push(positioningStyle); | messageBoxContainerStyle.push(positioningStyle); | ||||
| let deliveryIcon = null; | let deliveryIcon = null; | ||||
| let failedSendInfo = null; | let failedSendInfo = null; | ||||
| if (isViewer) { | if (isViewer) { | ||||
| let deliveryIconName; | let deliveryIconName; | ||||
| let deliveryIconColor = `#${item.threadInfo.color}`; | let deliveryIconColor = `#${item.threadInfo.color}`; | ||||
| if (id !== null && id !== undefined) { | if (id !== null && id !== undefined) { | ||||
| deliveryIconName = 'check-circle'; | deliveryIconName = 'check-circle'; | ||||
| Show All 32 Lines | if (!isViewer && item.endsCluster && shouldRenderAvatars) { | ||||
| <UserAvatar size="small" userID={item.messageInfo.creator.id} /> | <UserAvatar size="small" userID={item.messageInfo.creator.id} /> | ||||
| </View> | </View> | ||||
| ); | ); | ||||
| } else if (!isViewer && shouldRenderAvatars) { | } else if (!isViewer && shouldRenderAvatars) { | ||||
| avatar = <View style={styles.avatarOffset} />; | avatar = <View style={styles.avatarOffset} />; | ||||
| } | } | ||||
| const messageBox = ( | const messageBox = ( | ||||
| <View style={messageBoxStyleContainerStyle}> | <View style={messageBoxContainerStyle}> | ||||
| <SwipeableMessage | <SwipeableMessage | ||||
| triggerReply={triggerReply} | triggerReply={triggerReply} | ||||
| triggerSidebar={triggerSidebar} | triggerSidebar={triggerSidebar} | ||||
| isViewer={isViewer} | isViewer={isViewer} | ||||
| messageBoxStyle={swipeableMessageBoxStyle} | messageBoxStyle={swipeableMessageBoxStyle} | ||||
| threadColor={item.threadInfo.color} | threadColor={item.threadInfo.color} | ||||
| > | > | ||||
| {avatar} | {avatar} | ||||
| ▲ Show 20 Lines • Show All 74 Lines • ▼ Show 20 Lines | const styles = StyleSheet.create({ | ||||
| }, | }, | ||||
| iconContainer: { | iconContainer: { | ||||
| marginLeft: 2, | marginLeft: 2, | ||||
| width: 16, | width: 16, | ||||
| }, | }, | ||||
| leftChatBubble: { | leftChatBubble: { | ||||
| justifyContent: 'flex-end', | justifyContent: 'flex-end', | ||||
| }, | }, | ||||
| leftChatContainer: { | |||||
| alignItems: 'flex-start', | |||||
| }, | |||||
| messageBoxContainer: { | messageBoxContainer: { | ||||
| flex: 1, | flex: 1, | ||||
| marginRight: 5, | marginRight: 5, | ||||
| }, | }, | ||||
| rightChatBubble: { | rightChatBubble: { | ||||
| justifyContent: 'flex-start', | justifyContent: 'flex-start', | ||||
| }, | }, | ||||
| rightChatContainer: { | |||||
| alignItems: 'flex-end', | |||||
| }, | |||||
| 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 | |||||