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,7 @@
+reactions?: ReactionInfo,
+disabled?: boolean,
+positioning?: 'left' | 'right',
+ +label?: ?string,
+shouldRenderAvatars?: boolean,
};
function InlineEngagement(props: Props): React.Node {
@@ -42,6 +43,7 @@
threadInfo,
positioning,
shouldRenderAvatars,
+ label,
} = props;
const repliesText = useInlineEngagementText(threadInfo);
@@ -122,7 +124,24 @@
styles.reactionsContainer,
]);
+ const isLeft = positioning === 'left';
+
+ const editedLabel = React.useMemo(() => {
+ const labelLeftRight = isLeft
+ ? styles.messageLabelLeft
+ : styles.messageLabelRight;
+
+ if (!label) {
+ return null;
+ }
+
+ return {label};
+ }, [isLeft, label, styles]);
+
const container = React.useMemo(() => {
+ if (!(sidebarItem || reactionList)) {
+ return null;
+ }
return (
{sidebarItem}
@@ -131,7 +150,7 @@
);
}, [reactionList, sidebarItem, styles.container]);
- const inlineEngagementPositionStyle = [];
+ const inlineEngagementPositionStyle = [styles.inlineEngagement];
if (positioning === 'left') {
inlineEngagementPositionStyle.push(styles.leftInlineEngagement);
} else {
@@ -141,9 +160,18 @@
inlineEngagementPositionStyle.push({ marginLeft: avatarOffset });
}
+ const components = [container];
+ if (isLeft) {
+ components.unshift(editedLabel);
+ } else {
+ components.push(editedLabel);
+ }
+
return (
-
- {container}
+
+ {components.map((component, index) => (
+ {component}
+ ))}
);
}
@@ -205,6 +233,19 @@
flexDirection: 'row',
alignItems: 'center',
},
+ messageLabel: {
+ color: 'listBackgroundLabel',
+ paddingHorizontal: 3,
+ top: 10,
+ },
+ messageLabelLeft: {
+ marginLeft: 9,
+ marginRight: 4,
+ },
+ messageLabelRight: {
+ marginRight: 10,
+ marginLeft: 4,
+ },
avatarOffset: {
width: avatarOffset,
},