Page MenuHomePhabricator
Files F3370672

D8575.id28859.diff
No OneTemporary
Actions

D8575.id28859.diff
View Options

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
@@ -83,6 +83,18 @@
const repliesText = useInlineEngagementText(sidebarInfo);
+ const sidebarMargin = React.useMemo(() => {
+ if (!reactions || Object.keys(reactions).length === 0) {
+ return null;
+ }
+
+ if (isRight) {
+ return styles.sidebarMarginLeft;
+ } else {
+ return styles.sidebarMarginRight;
+ }
+ }, [isRight, reactions, styles.sidebarMarginLeft, styles.sidebarMarginRight]);
+
const sidebarItem = React.useMemo(() => {
if (!sidebarInfo) {
return null;
@@ -91,7 +103,7 @@
<GestureTouchableOpacity
onPress={onPressSidebar}
activeOpacity={0.7}
- style={styles.sidebar}
+ style={[styles.sidebar, sidebarMargin]}
>
<CommIcon style={styles.icon} size={14} name="sidebar-filled" />
<Text style={repliesStyles}>{repliesText}</Text>
@@ -102,6 +114,7 @@
onPressSidebar,
styles.sidebar,
styles.icon,
+ sidebarMargin,
repliesStyles,
repliesText,
]);
@@ -113,6 +126,17 @@
});
}, [navigate, reactions]);
+ const reactionsMargin = React.useMemo(() => {
+ if (isRight) {
+ return styles.reactionsContainerMarginLeft;
+ }
+ return styles.reactionsContainerMarginRight;
+ }, [
+ isRight,
+ styles.reactionsContainerMarginLeft,
+ styles.reactionsContainerMarginRight,
+ ]);
+
const reactionList = React.useMemo(() => {
if (!reactions || Object.keys(reactions).length === 0) {
return null;
@@ -122,7 +146,7 @@
const numOfReacts = reactions[reaction].users.length;
return (
<GestureTouchableOpacity
- style={styles.reactionsContainer}
+ style={[styles.reactionsContainer, reactionsMargin]}
onPress={onPressReactions}
activeOpacity={0.7}
key={reaction}
@@ -131,7 +155,13 @@
</GestureTouchableOpacity>
);
});
- }, [onPressReactions, reactions, styles.reaction, styles.reactionsContainer]);
+ }, [
+ onPressReactions,
+ reactions,
+ reactionsMargin,
+ styles.reaction,
+ styles.reactionsContainer,
+ ]);
const inlineEngagementPositionStyle = React.useMemo(() => {
const styleResult = [styles.inlineEngagement];
@@ -182,6 +212,12 @@
borderRadius: 8,
marginTop: inlineEngagementStyle.marginTop,
},
+ sidebarMarginLeft: {
+ marginLeft: 4,
+ },
+ sidebarMarginRight: {
+ marginRight: 4,
+ },
icon: {
color: 'inlineEngagementLabel',
marginRight: 4,
@@ -205,6 +241,12 @@
borderRadius: 8,
marginTop: inlineEngagementStyle.marginTop,
},
+ reactionsContainerMarginLeft: {
+ marginLeft: 4,
+ },
+ reactionsContainerMarginRight: {
+ marginRight: 4,
+ },
reaction: {
color: 'inlineEngagementLabel',
fontSize: 14,

File Metadata

Mime Type
text/plain
Expires
Wed, Nov 27, 3:40 AM (21 h, 4 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2587588
Default Alt Text
D8575.id28859.diff (2 KB)

Event Timeline