-
Notifications
You must be signed in to change notification settings - Fork 41
/
GroupChannelMessageReplyInfo.tsx
112 lines (99 loc) · 3 KB
/
GroupChannelMessageReplyInfo.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
import React from 'react';
import { User } from '@sendbird/chat';
import {
Avatar,
Box,
Icon,
PressBox,
Text,
createStyleSheet,
useUIKitTheme,
} from '@sendbird/uikit-react-native-foundation';
import { SendbirdFileMessage, SendbirdGroupChannel, SendbirdMessage, SendbirdUserMessage } from '@sendbird/uikit-utils';
import { useLocalization } from '../../hooks/useContext';
const AVATAR_LIMIT = 5;
type Props = {
channel: SendbirdGroupChannel;
message: SendbirdMessage;
variant: 'outgoing' | 'incoming';
onPress?: (message: SendbirdUserMessage | SendbirdFileMessage) => void;
};
const createRepliedUserAvatars = (mostRepliedUsers: User[]) => {
if (!mostRepliedUsers || mostRepliedUsers.length === 0) return null;
const { palette } = useUIKitTheme();
return mostRepliedUsers.slice(0, AVATAR_LIMIT).map((user, index) => {
if (index < AVATAR_LIMIT - 1) {
return (
<Box style={styles.avatarContainer} key={index}>
<Avatar size={20} uri={user?.profileUrl}></Avatar>
</Box>
);
} else {
return (
<Box style={styles.avatarContainer} key={index}>
<Avatar size={20} uri={user?.profileUrl}></Avatar>
<Box style={styles.avatarOverlay} backgroundColor={palette.overlay01}>
<Icon icon={'plus'} size={14} style={styles.plusIcon} color={'white'} />
</Box>
</Box>
);
}
});
};
const GroupChannelMessageReplyInfo = ({ channel, message, variant, onPress }: Props) => {
const { STRINGS } = useLocalization();
const { select, palette } = useUIKitTheme();
if (!channel || !message.threadInfo || !message.threadInfo.replyCount) return null;
const replyCountText = STRINGS.GROUP_CHANNEL_THREAD.REPLAY_COUNT(message.threadInfo.replyCount || 0);
const onPressReply = () => {
onPress?.(message as SendbirdUserMessage | SendbirdFileMessage);
};
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>
);
};
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',
},
avatarContainer: {
marginRight: 4,
},
avatarOverlay: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
borderRadius: 10,
},
plusIcon: {
position: 'absolute',
top: 3,
left: 3,
right: 0,
bottom: 0,
},
});
export default React.memo(GroupChannelMessageReplyInfo);