diff --git a/native/chat/chat-constants.js b/native/chat/chat-constants.js --- a/native/chat/chat-constants.js +++ b/native/chat/chat-constants.js @@ -6,7 +6,6 @@ }; export const inlineEngagementStyle = { - height: 38, marginTop: 5, marginBottom: 3, topOffset: -10, diff --git a/native/chat/chat-item-height-measurer.react.js b/native/chat/chat-item-height-measurer.react.js --- a/native/chat/chat-item-height-measurer.react.js +++ b/native/chat/chat-item-height-measurer.react.js @@ -17,6 +17,7 @@ import type { MeasurementTask } from './chat-context-provider.react.js'; import { useComposedMessageMaxWidth } from './composed-message-width.js'; +import { dummyNodeForMultimediaMessageHeightMeasurement } from './inner-multimedia-message.react.js'; import { dummyNodeForRobotextMessageHeightMeasurement } from './inner-robotext-message.react.js'; import { dummyNodeForTextMessageHeightMeasurement } from './inner-text-message.react.js'; import type { NativeChatMessageItem } from './message-data.react.js'; @@ -51,8 +52,12 @@ sidebar: getInlineEngagementSidebarText(threadCreatedFromMessage), reactions: reactionsToRawString(reactions), }); + } else { + return JSON.stringify({ + sidebar: getInlineEngagementSidebarText(threadCreatedFromMessage), + reactions: reactionsToRawString(reactions), + }); } - return null; }; // ESLint doesn't recognize that invariant always throws @@ -78,8 +83,12 @@ item.threadCreatedFromMessage, item.reactions, ); + } else { + return dummyNodeForMultimediaMessageHeightMeasurement( + item.threadCreatedFromMessage, + item.reactions, + ); } - invariant(false, 'NodeHeightMeasurer asked for dummy for non-text message'); }; function ChatItemHeightMeasurer(props: Props) { @@ -101,6 +110,10 @@ messageType !== messageTypes.SIDEBAR_SOURCE, 'Sidebar source messages should be replaced by sourceMessage before being measured', ); + invariant( + height !== null && height !== undefined, + 'height should be set', + ); if ( messageInfo.type === messageTypes.IMAGES || @@ -130,14 +143,11 @@ reactions: item.reactions, hasBeenEdited: item.hasBeenEdited, isPinned: item.isPinned, + inlineEngagementHeight: height, ...sizes, }; } - invariant( - height !== null && height !== undefined, - 'height should be set', - ); if (messageInfo.type === messageTypes.TEXT) { // Conditional due to Flow... const localMessageInfo = item.localMessageInfo diff --git a/native/chat/inner-multimedia-message.react.js b/native/chat/inner-multimedia-message.react.js --- a/native/chat/inner-multimedia-message.react.js +++ b/native/chat/inner-multimedia-message.react.js @@ -3,8 +3,11 @@ import * as React from 'react'; import { StyleSheet, TouchableWithoutFeedback, View } from 'react-native'; +import type { ReactionInfo } from 'lib/selectors/chat-selectors.js'; import type { Corners, Media, MediaInfo } from 'lib/types/media-types.js'; +import type { ThreadInfo } from 'lib/types/thread-types.js'; +import { DummyInlineEngagementNode } from './inline-engagement.react.js'; import MultimediaMessageMultimedia from './multimedia-message-multimedia.react.js'; import { getMediaPerRow, @@ -24,6 +27,20 @@ const borderRadius = 16; +function dummyNodeForMultimediaMessageHeightMeasurement( + sidebarInfo: ?ThreadInfo, + reactions: ReactionInfo, +): React.Element { + return ( + + + + ); +} + type Props = { +item: ChatMultimediaMessageInfoItem, +verticalBounds: ?VerticalBounds, @@ -163,4 +180,5 @@ export { InnerMultimediaMessage, borderRadius as multimediaMessageBorderRadius, + dummyNodeForMultimediaMessageHeightMeasurement, }; diff --git a/native/chat/multimedia-message-utils.js b/native/chat/multimedia-message-utils.js --- a/native/chat/multimedia-message-utils.js +++ b/native/chat/multimedia-message-utils.js @@ -6,7 +6,7 @@ import type { MediaInfo } from 'lib/types/media-types.js'; import type { MultimediaMessageInfo } from 'lib/types/message-types.js'; -import { inlineEngagementStyle, clusterEndHeight } from './chat-constants.js'; +import { clusterEndHeight } from './chat-constants.js'; import { failedSendHeight } from './failed-send.react.js'; import { authorNameHeight } from './message-header.react.js'; import type { @@ -104,10 +104,19 @@ function multimediaMessageItemHeight( item: ChatMultimediaMessageInfoItem, ): number { - const { messageInfo, contentHeight, startsCluster, endsCluster } = item; + const { + messageInfo, + contentHeight, + startsCluster, + endsCluster, + inlineEngagementHeight, + } = item; + const { creator } = messageInfo; const { isViewer } = creator; - let height = 5 + contentHeight; // 5 from marginBottom in ComposedMessage + + // 5 from marginBottom in ComposedMessage + let height = 5 + contentHeight + inlineEngagementHeight; if (!isViewer && startsCluster) { height += authorNameHeight; } @@ -117,12 +126,6 @@ if (multimediaMessageSendFailed(item)) { height += failedSendHeight; } - if (item.threadCreatedFromMessage || Object.keys(item.reactions).length > 0) { - height += - inlineEngagementStyle.height + - inlineEngagementStyle.marginTop + - inlineEngagementStyle.marginBottom; - } return height; } diff --git a/native/types/chat-types.js b/native/types/chat-types.js --- a/native/types/chat-types.js +++ b/native/types/chat-types.js @@ -62,6 +62,7 @@ +reactions: ReactionInfo, +hasBeenEdited: ?boolean, +isPinned: ?boolean, + +inlineEngagementHeight: number, }; export type ChatMessageInfoItemWithHeight =