Skip to content

Commit 8c00832

Browse files
bang9bang9
committed
feat: apply rtl support to open channel fragments
1 parent fd2e427 commit 8c00832

File tree

2 files changed

+89
-58
lines changed

2 files changed

+89
-58
lines changed

‎packages/uikit-react-native-foundation/src/ui/OpenChannelMessage/Message.user.og.tsx‎

Lines changed: 43 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -24,38 +24,51 @@ const OpenGraphUserMessage = (props: OpenChannelMessageProps<SendbirdUserMessage
2424
<PressBox onPress={onPress} onLongPress={onLongPress}>
2525
{({ pressed }) => (
2626
<MessageContainer pressed={pressed} {...rest}>
27-
<Text body3 color={color.enabled.textMsg}>
28-
<RegexText
27+
<Box alignItems={'flex-start'}>
28+
<Text
2929
body3
3030
color={color.enabled.textMsg}
31-
patterns={[
32-
{
33-
regex: urlRegexRough,
34-
replacer({ match, parentProps, keyPrefix, index }) {
35-
return (
36-
<Text
37-
{...parentProps}
38-
key={`${keyPrefix}-${index}`}
39-
onPress={() => onPressURL?.(match)}
40-
onLongPress={onLongPress}
41-
color={colors.primary}
42-
style={parentProps?.style}
43-
>
44-
{match}
45-
</Text>
46-
);
47-
},
48-
},
49-
]}
31+
suppressHighlighting
32+
supportRTLAlign
33+
originalText={props.message.message}
5034
>
51-
{props.message.message}
52-
</RegexText>
53-
{Boolean(props.message.updatedAt) && (
54-
<Text body3 color={color.enabled.textMsgPostfix}>
55-
{props.strings?.edited ?? ' (edited)'}
56-
</Text>
57-
)}
58-
</Text>
35+
<RegexText
36+
body3
37+
suppressHighlighting
38+
supportRTLAlign
39+
originalText={props.message.message}
40+
color={color.enabled.textMsg}
41+
patterns={[
42+
{
43+
regex: urlRegexRough,
44+
replacer({ match, parentProps, keyPrefix, index }) {
45+
return (
46+
<Text
47+
{...parentProps}
48+
key={`${keyPrefix}-${index}`}
49+
onPress={() => onPressURL?.(match)}
50+
onLongPress={onLongPress}
51+
color={colors.primary}
52+
style={parentProps?.style}
53+
supportRTLAlign
54+
originalText={match}
55+
>
56+
{match}
57+
</Text>
58+
);
59+
},
60+
},
61+
]}
62+
>
63+
{props.message.message}
64+
</RegexText>
65+
{Boolean(props.message.updatedAt) && (
66+
<Text body3 color={color.enabled.textMsgPostfix}>
67+
{props.strings?.edited ?? ' (edited)'}
68+
</Text>
69+
)}
70+
</Text>
71+
</Box>
5972
</MessageContainer>
6073
)}
6174
</PressBox>
@@ -73,6 +86,7 @@ const OpenGraphUserMessage = (props: OpenChannelMessageProps<SendbirdUserMessage
7386
borderRadius={8}
7487
style={styles.ogContainer}
7588
backgroundColor={pressed ? color.pressed.bubbleBackground : color.enabled.bubbleBackground}
89+
alignItems={'flex-start'}
7690
>
7791
<Text numberOfLines={1} caption2 color={colors.onBackground02} style={styles.ogUrl}>
7892
{props.message.ogMetaData.url}

‎packages/uikit-react-native-foundation/src/ui/OpenChannelMessage/Message.user.tsx‎

Lines changed: 46 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import React from 'react';
33
import type { SendbirdUserMessage } from '@sendbird/uikit-utils';
44
import { urlRegexStrict } from '@sendbird/uikit-utils';
55

6+
import Box from '../../components/Box';
67
import PressBox from '../../components/PressBox';
78
import RegexText from '../../components/RegexText';
89
import Text from '../../components/Text';
@@ -20,38 +21,54 @@ const UserMessage = (props: OpenChannelMessageProps<SendbirdUserMessage, Props>)
2021
<PressBox onPress={onPress} onLongPress={onLongPress}>
2122
{({ pressed }) => (
2223
<MessageContainer pressed={pressed} {...rest}>
23-
<Text body3 color={color.enabled.textMsg}>
24-
<RegexText
24+
<Box alignItems={'flex-start'}>
25+
<Text
2526
body3
2627
color={color.enabled.textMsg}
27-
patterns={[
28-
{
29-
regex: urlRegexStrict,
30-
replacer({ match, parentProps, keyPrefix, index }) {
31-
return (
32-
<Text
33-
{...parentProps}
34-
key={`${keyPrefix}-${index}`}
35-
onPress={() => onPressURL?.(match)}
36-
onLongPress={onLongPress}
37-
color={colors.primary}
38-
style={parentProps?.style}
39-
>
40-
{match}
41-
</Text>
42-
);
43-
},
44-
},
45-
]}
28+
suppressHighlighting
29+
supportRTLAlign
30+
originalText={props.message.message}
4631
>
47-
{props.message.message}
48-
</RegexText>
49-
{Boolean(props.message.updatedAt) && (
50-
<Text body3 color={color.enabled.textMsgPostfix}>
51-
{props.strings?.edited ?? ' (edited)'}
52-
</Text>
53-
)}
54-
</Text>
32+
<RegexText
33+
body3
34+
suppressHighlighting
35+
supportRTLAlign
36+
originalText={props.message.message}
37+
color={color.enabled.textMsg}
38+
patterns={[
39+
{
40+
regex: urlRegexStrict,
41+
replacer({ match, parentProps, keyPrefix, index }) {
42+
return (
43+
<Text
44+
{...parentProps}
45+
key={`${keyPrefix}-${index}`}
46+
onPress={() => onPressURL?.(match)}
47+
onLongPress={onLongPress}
48+
color={colors.primary}
49+
style={parentProps?.style}
50+
>
51+
{match}
52+
</Text>
53+
);
54+
},
55+
},
56+
]}
57+
>
58+
{props.message.message}
59+
</RegexText>
60+
{Boolean(props.message.updatedAt) && (
61+
<Text
62+
body3
63+
color={color.enabled.textMsgPostfix}
64+
supportRTLAlign
65+
originalText={props.strings?.edited ?? ' (edited)'}
66+
>
67+
{props.strings?.edited ?? ' (edited)'}
68+
</Text>
69+
)}
70+
</Text>
71+
</Box>
5572
</MessageContainer>
5673
)}
5774
</PressBox>

0 commit comments

Comments
 (0)