-
Notifications
You must be signed in to change notification settings - Fork 41
/
MessageContainer.tsx
121 lines (111 loc) · 3.72 KB
/
MessageContainer.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
import React from 'react';
import { Pressable } from 'react-native';
import type { SendbirdMessage } from '@sendbird/uikit-utils';
import { getMessageTimeFormat } from '@sendbird/uikit-utils';
import Box from '../../components/Box';
import Text from '../../components/Text';
import createStyleSheet from '../../styles/createStyleSheet';
import useUIKitTheme from '../../theme/useUIKitTheme';
import Avatar from '../Avatar';
import type { GroupChannelMessageProps } from './index';
type Props = GroupChannelMessageProps<SendbirdMessage>;
const MessageContainer = (props: Props) => {
if (props.variant === 'incoming') {
return <MessageContainer.Incoming {...props} />;
} else {
return <MessageContainer.Outgoing {...props} />;
}
};
MessageContainer.Incoming = function MessageContainerIncoming({
children,
replyInfo,
groupedWithNext,
groupedWithPrev,
message,
onPressAvatar,
strings,
parentMessage,
}: Props) {
const { colors } = useUIKitTheme();
const color = colors.ui.groupChannelMessage.incoming;
return (
<Box flexDirection={'column'} justifyContent={'flex-start'} alignItems={'flex-start'}>
<Box flexDirection={'row'} justifyContent={'flex-start'} alignItems={'flex-end'}>
<Box width={26} marginRight={12}>
{(message.isFileMessage() || message.isUserMessage()) && !groupedWithNext && (
<Pressable onPress={onPressAvatar}>
<Avatar size={26} uri={message.sender?.profileUrl} />
</Pressable>
)}
</Box>
<Box flexShrink={1}>
{parentMessage}
{!groupedWithPrev && !message.parentMessage && (
<Box marginLeft={12} marginBottom={4}>
{(message.isFileMessage() || message.isUserMessage()) && (
<Text caption1 color={color.enabled.textSenderName} numberOfLines={1}>
{strings?.senderName ?? message.sender.nickname}
</Text>
)}
</Box>
)}
<Box flexDirection={'row'} alignItems={'flex-end'}>
<Box style={styles.bubble}>{children}</Box>
{!groupedWithNext && (
<Box marginLeft={4}>
<Text caption4 color={color.enabled.textTime}>
{strings?.sentDate ?? getMessageTimeFormat(new Date(message.createdAt))}
</Text>
</Box>
)}
</Box>
</Box>
</Box>
<Box flexDirection={'row'} marginTop={4}>
<Box width={26} marginRight={12} justifyContent={'flex-start'} />
{replyInfo}
</Box>
</Box>
);
};
MessageContainer.Outgoing = function MessageContainerOutgoing({
children,
replyInfo,
message,
groupedWithNext,
strings,
sendingStatus,
parentMessage,
}: Props) {
const { colors } = useUIKitTheme();
const color = colors.ui.groupChannelMessage.outgoing;
return (
<Box>
{parentMessage}
<Box flexDirection={'row'} justifyContent={'flex-end'} alignItems={'flex-end'}>
<Box flexDirection={'row'} alignItems={'flex-end'} justifyContent={'center'}>
{sendingStatus && <Box marginRight={4}>{sendingStatus}</Box>}
{!groupedWithNext && (
<Box marginRight={4}>
<Text caption4 color={color.enabled.textTime}>
{strings?.sentDate ?? getMessageTimeFormat(new Date(message.createdAt))}
</Text>
</Box>
)}
</Box>
<Box style={styles.bubble}>{children}</Box>
</Box>
<Box flexDirection={'row'} justifyContent={'flex-end'} marginTop={4}>
{replyInfo}
</Box>
</Box>
);
};
const styles = createStyleSheet({
bubble: {
maxWidth: 240,
overflow: 'hidden',
flexShrink: 1,
},
});
export default MessageContainer;