feat: apply rtl to thread

bang9 · bang9 · commit 220649294fdb · 2024-10-30T14:41:57.000+09:00
diff --git a/packages/uikit-react-native/src/components/ThreadParentMessageRenderer/ThreadParentMessage.user.og.tsx b/packages/uikit-react-native/src/components/ThreadParentMessageRenderer/ThreadParentMessage.user.og.tsx
@@ -33,7 +33,7 @@ const ThreadParentMessageUserOg = (props: Props) => {
     });
 
   return (
-    <Box>
+    <Box flex={1} alignItems={'flex-start'}>
       <PressBox activeOpacity={0.85} onPress={onPressMessage(userMessage)}>
         <Text
           body3
diff --git a/packages/uikit-react-native/src/components/ThreadParentMessageRenderer/ThreadParentMessage.user.tsx b/packages/uikit-react-native/src/components/ThreadParentMessageRenderer/ThreadParentMessage.user.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { type RegexTextPattern, Text, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { Box, type RegexTextPattern, Text, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import { RegexText, createStyleSheet } from '@sendbird/uikit-react-native-foundation';
 import { SendbirdUserMessage, urlRegexStrict } from '@sendbird/uikit-utils';
 
@@ -18,40 +18,43 @@ const ThreadParentMessageUser = (props: Props) => {
   const { colors } = useUIKitTheme();
 
   return (
-    <Text body3 color={colors.onBackground01} suppressHighlighting supportRTLAlign originalText={userMessage.message}>
-      <RegexText
-        body3
-        suppressHighlighting
-        supportRTLAlign
-        originalText={userMessage.message}
-        color={colors.onBackground01}
-        patterns={[
-          ...(props.regexTextPatterns ?? []),
-          {
-            regex: urlRegexStrict,
-            replacer({ match, parentProps, keyPrefix, index }) {
-              return (
-                <Text
-                  {...parentProps}
-                  key={`${keyPrefix}-${index}`}
-                  onPress={() => props.onPressURL?.(match)}
-                  style={[parentProps?.style, styles.urlText]}
-                >
-                  {match}
-                </Text>
-              );
+    <Box flex={1} alignItems={'flex-start'}>
+      <Text body3 color={colors.onBackground01} suppressHighlighting supportRTLAlign originalText={userMessage.message}>
+        <RegexText
+          body3
+          suppressHighlighting
+          supportRTLAlign
+          originalText={userMessage.message}
+          color={colors.onBackground01}
+          patterns={[
+            ...(props.regexTextPatterns ?? []),
+            {
+              regex: urlRegexStrict,
+              replacer({ match, parentProps, keyPrefix, index }) {
+                return (
+                  <Text
+                    {...parentProps}
+                    key={`${keyPrefix}-${index}`}
+                    onPress={() => props.onPressURL?.(match)}
+                    style={[parentProps?.style, styles.urlText]}
+                  >
+                    {match}
+                  </Text>
+                );
+              },
             },
-          },
-        ]}
-      >
-        {props.renderRegexTextChildren?.(userMessage)}
-      </RegexText>
-      {Boolean(userMessage.updatedAt) && (
-        <Text body3 color={colors.onBackground02}>
-          {' (edited)'}
-        </Text>
-      )}
-    </Text>
+          ]}
+        >
+          {props.renderRegexTextChildren?.(userMessage)}
+        </RegexText>
+        {Boolean(userMessage.updatedAt) && (
+          <Text body3 color={colors.onBackground02}>
+            {/*FIXME: edited to string set*/}
+            {' (edited)'}
+          </Text>
+        )}
+      </Text>
+    </Box>
   );
 };
 
diff --git a/packages/uikit-react-native/src/domain/groupChannel/component/GroupChannelSuggestedMentionList.tsx b/packages/uikit-react-native/src/domain/groupChannel/component/GroupChannelSuggestedMentionList.tsx
@@ -75,7 +75,7 @@ const GroupChannelSuggestedMentionList = ({
               style={styles.userContainer}
             >
               <Avatar size={28} uri={member.profileUrl} containerStyle={styles.userAvatar} />
-              <Box style={styles.userInfo} >
+              <Box style={styles.userInfo}>
                 <Text body2 color={colors.onBackground01} numberOfLines={1} style={styles.userNickname}>
                   {member.nickname || STRINGS.LABELS.USER_NO_NAME}
                 </Text>
diff --git a/packages/uikit-react-native/src/domain/groupChannelThread/component/GroupChannelThreadHeader.tsx b/packages/uikit-react-native/src/domain/groupChannelThread/component/GroupChannelThreadHeader.tsx
@@ -1,7 +1,13 @@
 import React, { useContext } from 'react';
-import { View } from 'react-native';
 
-import { Icon, Text, createStyleSheet, useHeaderStyle, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import {
+  Box,
+  Icon,
+  Text,
+  createStyleSheet,
+  useHeaderStyle,
+  useUIKitTheme,
+} from '@sendbird/uikit-react-native-foundation';
 
 import { useLocalization, useSendbirdChat } from '../../../hooks/useContext';
 import { GroupChannelThreadContexts } from '../module/moduleContext';
@@ -34,14 +40,14 @@ const GroupChannelThreadHeader = ({ onPressLeft, onPressSubtitle }: GroupChannel
     <HeaderComponent
       clearTitleMargin
       title={
-        <View style={styles.titleContainer}>
-          <View style={{ flexShrink: 1 }}>
+        <Box style={styles.titleContainer}>
+          <Box flexShrink={1} alignItems={'flex-start'}>
             <Text h2 color={colors.onBackground01} numberOfLines={1}>
               {headerTitle}
             </Text>
             {renderSubtitle()}
-          </View>
-        </View>
+          </Box>
+        </Box>
       }
       left={<Icon icon={'arrow-left'} size={24} />}
       onPressLeft={onPressLeft}
diff --git a/packages/uikit-react-native/src/domain/groupChannelThread/component/GroupChannelThreadParentMessageInfo.tsx b/packages/uikit-react-native/src/domain/groupChannelThread/component/GroupChannelThreadParentMessageInfo.tsx
@@ -4,6 +4,7 @@ import { TouchableOpacity, View } from 'react-native';
 import {
   Avatar,
   BottomSheetItem,
+  Box,
   Divider,
   Icon,
   Text,
@@ -60,32 +61,32 @@ const GroupChannelThreadParentMessageInfo = (props: GroupChannelThreadProps['Par
 
   const renderMessageInfoAndMenu = () => {
     return (
-      <View style={styles.infoAndMenuContainer}>
+      <Box style={styles.infoAndMenuContainer}>
         <Avatar size={34} uri={parentMessage.sender?.profileUrl} />
-        <View style={styles.userNickAndTimeContainer}>
+        <Box style={styles.userNickAndTimeContainer} alignItems={'flex-start'}>
           <Text h2 color={colors.onBackground01} numberOfLines={1} style={styles.userNickname}>
             {nickName}
           </Text>
           <Text caption2 color={colors.onBackground03} style={styles.messageTime}>
             {messageTimestamp}
           </Text>
-        </View>
+        </Box>
         <TouchableOpacity activeOpacity={0.7} onPress={bottomSheetItem ? onLongPress : undefined}>
           <Icon icon={'more'} color={colors.onBackground02} />
         </TouchableOpacity>
-      </View>
+      </Box>
     );
   };
 
   const renderReplyCount = (replyCountText: string) => {
     if (replyCountText) {
       return (
-        <View style={styles.replyContainer}>
-          <Text caption3 color={colors.onBackground03} style={styles.replyText}>
+        <Box style={styles.replyContainer} alignItems={'flex-start'}>
+          <Text caption3 color={colors.onBackground03} style={styles.replyText} numberOfLines={1}>
             {replyCountText}
           </Text>
           <Divider />
-        </View>
+        </Box>
       );
     } else {
       return null;
@@ -119,7 +120,7 @@ const GroupChannelThreadParentMessageInfo = (props: GroupChannelThreadProps['Par
     <View>
       <View style={styles.container}>{renderMessageInfoAndMenu()}</View>
       <View style={styles.messageContainer}>
-        <ThreadParentMessageRenderer {...messageProps}></ThreadParentMessageRenderer>
+        <ThreadParentMessageRenderer {...messageProps} />
       </View>
       {renderReactionAddons()}
       <Divider />

Original file line number	Diff line number	Diff line change
`@@ -75,7 +75,7 @@ const GroupChannelSuggestedMentionList = ({`
`75`	`75`	`style={styles.userContainer}`
`76`	`76`	`>`
`77`	`77`	`<Avatar size={28} uri={member.profileUrl} containerStyle={styles.userAvatar} />`
`78`		`- <Box style={styles.userInfo} >`
	`78`	`+ <Box style={styles.userInfo}>`
`79`	`79`	`<Text body2 color={colors.onBackground01} numberOfLines={1} style={styles.userNickname}>`
`80`	`80`	`{member.nickname \|\| STRINGS.LABELS.USER_NO_NAME}`
`81`	`81`	`</Text>`