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 @@ -32,9 +32,10 @@ +reactions?: ReactionInfo, +disabled?: boolean, +positioning?: 'left' | 'right', + +label?: ?string, }; function InlineEngagement(props: Props): React.Node { - const { disabled = false, reactions, threadInfo, positioning } = props; + const { disabled = false, reactions, threadInfo, positioning, label } = props; const repliesText = useInlineEngagementText(threadInfo); const navigateToThread = useNavigateToThread(); @@ -114,7 +115,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} @@ -128,9 +146,18 @@ ? styles.leftInlineEngagement : styles.rightInlineEngagement; + const components = [container]; + if (isLeft) { + components.unshift(editedLabel); + } else { + components.push(editedLabel); + } + return ( - {container} + {components.map((component, index) => ( + {component} + ))} ); } @@ -192,6 +219,19 @@ flexDirection: 'row', alignItems: 'center', }, + messageLabel: { + color: 'listBackgroundLabel', + paddingHorizontal: 3, + top: 10, + }, + messageLabelLeft: { + marginLeft: 9, + marginRight: 4, + }, + messageLabelRight: { + marginRight: 10, + marginLeft: 4, + }, }; type TooltipInlineEngagementProps = {