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(() => { + if (!label) { + return null; + } + + const labelLeftRight = isLeft + ? styles.messageLabelLeft + : styles.messageLabelRight; + + return <Text style={[styles.messageLabel, labelLeftRight]}>{label}</Text>; + }, [isLeft, label, styles]); + const container = React.useMemo(() => { + if (!sidebarItem && !reactionList) { + return null; + } return ( <View style={styles.container}> {sidebarItem} @@ -131,8 +150,8 @@ ); }, [reactionList, sidebarItem, styles.container]); - const inlineEngagementPositionStyle = []; - if (positioning === 'left') { + const inlineEngagementPositionStyle = [styles.inlineEngagement]; + if (isLeft) { inlineEngagementPositionStyle.push(styles.leftInlineEngagement); } else { inlineEngagementPositionStyle.push(styles.rightInlineEngagement); @@ -141,11 +160,24 @@ inlineEngagementPositionStyle.push({ marginLeft: avatarOffset }); } - return ( - <View style={[styles.inlineEngagement, inlineEngagementPositionStyle]}> - {container} - </View> - ); + let body; + if (isLeft) { + body = ( + <> + {editedLabel} + {container} + </> + ); + } else { + body = ( + <> + {container} + {editedLabel} + </> + ); + } + + return <View style={inlineEngagementPositionStyle}>{body}</View>; } const unboundStyles = { @@ -205,6 +237,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, },