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, },