Apply review

sendbird · May 31, 2024 · 528c209 · 528c209
1 parent f2de01a
commit 528c209
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 32 deletions.
diff --git a/packages/uikit-react-native-foundation/src/ui/GroupChannelMessage/MessageContainer.tsx b/packages/uikit-react-native-foundation/src/ui/GroupChannelMessage/MessageContainer.tsx
@@ -67,7 +67,10 @@ MessageContainer.Incoming = function MessageContainerIncoming({
  </Box>
  </Box>
  </Box>
- {replyInfo}
+ <Box flexDirection={'row'} marginTop={4}>
+ <Box width={26} marginRight={12} justifyContent={'flex-start'} />
+ {replyInfo}
+ </Box>
  </Box>
  );
 };
@@ -100,7 +103,9 @@ MessageContainer.Outgoing = function MessageContainerOutgoing({
  </Box>
  <Box style={styles.bubble}>{children}</Box>
  </Box>
- {replyInfo}
+ <Box flexDirection={'row'} justifyContent={'flex-end'} marginTop={4}>
+ {replyInfo}
+ </Box>
  </Box>
  );
 };

diff --git a/...-react-native/src/components/GroupChannelMessageRenderer/GroupChannelMessageReplyInfo.tsx b/...-react-native/src/components/GroupChannelMessageRenderer/GroupChannelMessageReplyInfo.tsx
@@ -19,7 +19,6 @@ const AVATAR_LIMIT = 5;
 type Props = {
  channel: SendbirdGroupChannel;
  message: SendbirdMessage;
- variant: 'outgoing' | 'incoming';
  onPress?: (message: SendbirdUserMessage | SendbirdFileMessage) => void;
 };
 
@@ -48,7 +47,7 @@ const createRepliedUserAvatars = (mostRepliedUsers: User[]) => {
  });
 };
 
-const GroupChannelMessageReplyInfo = ({ channel, message, variant, onPress }: Props) => {
+const GroupChannelMessageReplyInfo = ({ channel, message, onPress }: Props) => {
  const { STRINGS } = useLocalization();
  const { select, palette } = useUIKitTheme();
 
@@ -60,32 +59,18 @@ const GroupChannelMessageReplyInfo = ({ channel, message, variant, onPress }: Pr
  };
 
  const renderAvatars = createRepliedUserAvatars(message.threadInfo.mostRepliedUsers);
- const containerStyle = variant === 'incoming' ? styles.incomingContainer : styles.outgoingContainer;
  return (
- <Box style={containerStyle}>
- <PressBox onPress={onPressReply} style={styles.replyContainer}>
- {renderAvatars}
- <Text caption3 color={select({ light: palette.primary300, dark: palette.primary200 })}>
- {replyCountText}
- </Text>
- </PressBox>
- </Box>
+ <PressBox onPress={onPressReply} style={styles.replyContainer}>
+ {renderAvatars}
+ <Text caption3 color={select({ light: palette.primary300, dark: palette.primary200 })}>
+ {replyCountText}
+ </Text>
+ </PressBox>
  );
 };
 
 const styles = createStyleSheet({
- incomingContainer: {
- marginTop: 4,
- flexDirection: 'row',
- justifyContent: 'flex-start',
- },
- outgoingContainer: {
- marginTop: 4,
- flexDirection: 'row',
- justifyContent: 'flex-end',
- },
  replyContainer: {
- marginLeft: 36,
  flexDirection: 'row',
  alignItems: 'center',
  },

diff --git a/packages/uikit-react-native/src/components/GroupChannelMessageRenderer/index.tsx b/packages/uikit-react-native/src/components/GroupChannelMessageRenderer/index.tsx
@@ -77,14 +77,7 @@ const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'
  const replyInfo = useIIFE(() => {
  if (sbOptions.uikit.groupChannel.channel.replyType !== 'thread') return null;
  if (!channel || !message.threadInfo || !message.threadInfo.replyCount) return null;
- return (
- <GroupChannelMessageReplyInfo
- channel={channel}
- message={message}
- variant={variant}
- onPress={onReplyInThreadMessage}
- />
- );
+ return <GroupChannelMessageReplyInfo channel={channel} message={message} onPress={onReplyInThreadMessage} />;
  });
 
  const resetPlayer = async () => {