Page MenuHomePhorge
Files F32564223

D8610.1767367406.diff
No OneTemporary
Actions

Size
7 KB
Referenced Files
None
Subscribers
None

D8610.1767367406.diff
View Options

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
@@ -55,6 +55,8 @@
return dummyNodeForRobotextMessageHeightMeasurement(
item.robotext,
item.messageInfo.threadID,
+ item.threadCreatedFromMessage,
+ item.reactions,
);
}
invariant(false, 'NodeHeightMeasurer asked for dummy for non-text message');
diff --git a/native/chat/inline-engagement.react.js b/native/chat/inline-engagement.react.js
--- a/native/chat/inline-engagement.react.js
+++ b/native/chat/inline-engagement.react.js
@@ -33,6 +33,72 @@
import { useStyles } from '../themes/colors.js';
import type { ChatMessageInfoItemWithHeight } from '../types/chat-types.js';
+type DummyInlineEngagementNodeProps = {
+ ...React.ElementConfig<typeof View>,
+ +editedLabel?: ?string,
+ +sidebarInfo: ?ThreadInfo,
+ +reactions: ReactionInfo,
+};
+function DummyInlineEngagementNode(
+ props: DummyInlineEngagementNodeProps,
+): React.Node {
+ const { editedLabel, sidebarInfo, reactions, ...rest } = props;
+
+ const dummyEditedLabel = React.useMemo(() => {
+ if (!editedLabel) {
+ return null;
+ }
+
+ return (
+ <View>
+ <Text style={unboundStyles.dummmyMessageLabel}>{editedLabel}</Text>
+ </View>
+ );
+ }, [editedLabel]);
+
+ const dummySidebarItem = React.useMemo(() => {
+ if (!sidebarInfo) {
+ return null;
+ }
+
+ const repliesText = getInlineEngagementSidebarText(sidebarInfo);
+ return (
+ <View style={unboundStyles.dummySidebar}>
+ <Text style={unboundStyles.dummyRepliesText}>{repliesText}</Text>
+ </View>
+ );
+ }, [sidebarInfo]);
+
+ const dummyReactionsList = React.useMemo(() => {
+ if (Object.keys(reactions).length === 0) {
+ return null;
+ }
+
+ return Object.keys(reactions).map(reaction => {
+ const numOfReacts = reactions[reaction].users.length;
+ return (
+ <View key={reaction} style={unboundStyles.dummyReactionContainer}>
+ <Text
+ style={unboundStyles.dummyReaction}
+ >{`${reaction} ${numOfReacts}`}</Text>
+ </View>
+ );
+ });
+ }, [reactions]);
+
+ if (!dummyEditedLabel && !dummySidebarItem && !dummyReactionsList) {
+ return null;
+ }
+
+ return (
+ <View {...rest} style={unboundStyles.dummyInlineEngagement}>
+ {dummyEditedLabel}
+ {dummySidebarItem}
+ {dummyReactionsList}
+ </View>
+ );
+}
+
type Props = {
+messageInfo: MessageInfo,
+threadInfo: ThreadInfo,
@@ -249,6 +315,13 @@
flexWrap: 'wrap',
top: inlineEngagementStyle.topOffset,
},
+ dummyInlineEngagement: {
+ flexDirection: 'row',
+ marginBottom: inlineEngagementStyle.marginBottom,
+ marginLeft: avatarOffset,
+ flexWrap: 'wrap',
+ marginRight: 8,
+ },
centerInlineEngagement: {
right: inlineEngagementCenterStyle.marginRight,
},
@@ -265,6 +338,15 @@
borderRadius: 8,
marginTop: inlineEngagementStyle.marginTop,
},
+ dummySidebar: {
+ flexDirection: 'row',
+ paddingRight: 8,
+ paddingLeft: 26,
+ // 14 (icon) + 4 (marginRight of icon) + 8 (original left padding)
+ paddingVertical: 4,
+ marginTop: inlineEngagementStyle.marginTop,
+ marginRight: 4,
+ },
sidebarMarginLeft: {
marginLeft: 4,
},
@@ -280,6 +362,10 @@
fontSize: 14,
lineHeight: 22,
},
+ dummyRepliesText: {
+ fontSize: 14,
+ lineHeight: 22,
+ },
unread: {
color: 'listForegroundLabel',
fontWeight: 'bold',
@@ -294,6 +380,12 @@
borderRadius: 8,
marginTop: inlineEngagementStyle.marginTop,
},
+ dummyReactionContainer: {
+ paddingHorizontal: 8,
+ paddingVertical: 4,
+ marginTop: inlineEngagementStyle.marginTop,
+ marginRight: 4,
+ },
reactionsContainerSelected: {
borderWidth: 1,
borderColor: 'inlineEngagementLabel',
@@ -311,6 +403,10 @@
fontSize: 14,
lineHeight: 22,
},
+ dummyReaction: {
+ fontSize: 14,
+ lineHeight: 22,
+ },
messageLabel: {
color: 'messageLabel',
paddingHorizontal: 3,
@@ -319,6 +415,14 @@
height: inlineEngagementLabelStyle.height,
marginTop: inlineEngagementStyle.marginTop,
},
+ dummmyMessageLabel: {
+ paddingHorizontal: 3,
+ fontSize: 13,
+ height: inlineEngagementLabelStyle.height,
+ marginTop: inlineEngagementStyle.marginTop,
+ marginLeft: 9,
+ marginRight: 4,
+ },
messageLabelLeft: {
marginLeft: 9,
marginRight: 4,
@@ -422,4 +526,4 @@
);
}
-export { InlineEngagement, TooltipInlineEngagement };
+export { InlineEngagement, TooltipInlineEngagement, DummyInlineEngagementNode };
diff --git a/native/chat/inner-robotext-message.react.js b/native/chat/inner-robotext-message.react.js
--- a/native/chat/inner-robotext-message.react.js
+++ b/native/chat/inner-robotext-message.react.js
@@ -4,7 +4,9 @@
import * as React from 'react';
import { Text, TouchableWithoutFeedback, View } from 'react-native';
+import type { ReactionInfo } from 'lib/selectors/chat-selectors.js';
import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
+import type { ThreadInfo } from 'lib/types/thread-types.js';
import {
entityTextToReact,
entityTextToRawString,
@@ -12,6 +14,7 @@
type EntityText,
} from 'lib/utils/entity-text.js';
+import { DummyInlineEngagementNode } from './inline-engagement.react.js';
import { useNavigateToThread } from './message-list-types.js';
import Markdown from '../markdown/markdown.react.js';
import { inlineMarkdownRules } from '../markdown/rules.react.js';
@@ -22,12 +25,20 @@
function dummyNodeForRobotextMessageHeightMeasurement(
robotext: EntityText,
threadID: string,
+ sidebarInfo: ?ThreadInfo,
+ reactions: ReactionInfo,
): React.Element<typeof View> {
return (
- <View style={unboundStyles.robotextContainer}>
- <Text style={unboundStyles.dummyRobotext}>
- {entityTextToRawString(robotext, { threadID })}
- </Text>
+ <View>
+ <View style={unboundStyles.robotextContainer}>
+ <Text style={unboundStyles.dummyRobotext}>
+ {entityTextToRawString(robotext, { threadID })}
+ </Text>
+ </View>
+ <DummyInlineEngagementNode
+ sidebarInfo={sidebarInfo}
+ reactions={reactions}
+ />
</View>
);
}
diff --git a/native/chat/utils.js b/native/chat/utils.js
--- a/native/chat/utils.js
+++ b/native/chat/utils.js
@@ -37,7 +37,6 @@
import type {
ChatMessageInfoItemWithHeight,
ChatMessageItemWithHeight,
- ChatRobotextMessageInfoItemWithHeight,
ChatTextMessageInfoItemWithHeight,
} from '../types/chat-types.js';
import type {
@@ -91,15 +90,6 @@
return height;
}
-function robotextMessageItemHeight(
- item: ChatRobotextMessageInfoItemWithHeight,
-): number {
- if (item.threadCreatedFromMessage || Object.keys(item.reactions).length > 0) {
- return item.contentHeight + inlineEngagementStyle.height;
- }
- return item.contentHeight;
-}
-
function messageItemHeight(item: ChatMessageInfoItemWithHeight): number {
let height = 0;
if (item.messageShapeType === 'text') {
@@ -107,7 +97,7 @@
} else if (item.messageShapeType === 'multimedia') {
height += multimediaMessageItemHeight(item);
} else {
- height += robotextMessageItemHeight(item);
+ height += item.contentHeight;
}
if (item.startsConversation) {
height += timestampHeight;

File Metadata

Mime Type
text/plain
Expires
Fri, Jan 2, 3:23 PM (8 h, 48 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5880013
Default Alt Text
D8610.1767367406.diff (7 KB)

Event Timeline