import React from 'react'; import { View, Text, FlatList, StyleSheet } from 'react-native'; import Modal from 'react-native-modal'; import Touchable from 'react-native-platform-touchable'; import Emoji from './message/Emoji'; import I18n from '../i18n'; import { CustomIcon } from '../lib/Icons'; import sharedStyles from '../views/Styles'; import { themes } from '../constants/colors'; import { withTheme } from '../theme'; import SafeAreaView from './SafeAreaView'; const styles = StyleSheet.create({ safeArea: { backgroundColor: 'transparent' }, titleContainer: { alignItems: 'center', paddingVertical: 10 }, title: { fontSize: 16, ...sharedStyles.textSemibold, ...sharedStyles.textAlignCenter }, reactCount: { fontSize: 13, ...sharedStyles.textRegular }, peopleReacted: { fontSize: 14, ...sharedStyles.textMedium }, peopleItemContainer: { flex: 1, flexDirection: 'column', justifyContent: 'center' }, emojiContainer: { width: 50, height: 50, alignItems: 'center', justifyContent: 'center' }, itemContainer: { height: 50, flexDirection: 'row' }, listContainer: { flex: 1 }, closeButton: { position: 'absolute', left: 0, top: 10 } }); const standardEmojiStyle = { fontSize: 20 }; const customEmojiStyle = { width: 20, height: 20 }; type TItem = { item: { usernames: any; emoji: string; }; user?: {username: any;}; baseUrl?: string; getCustomEmoji?: Function; theme?: string; }; type TModalContent = { message: { reactions: any }; onClose: Function; theme: string; }; interface IReactionsModal { isVisible: boolean; onClose(): void; theme: string; } const Item = React.memo(({ item, user, baseUrl, getCustomEmoji, theme }: TItem) => { const count = item.usernames.length; let usernames = item.usernames.slice(0, 3) .map((username: any) => (username === user?.username ? I18n.t('you') : username)).join(', '); if (count > 3) { usernames = `${ usernames } ${ I18n.t('and_more') } ${ count - 3 }`; } else { usernames = usernames.replace(/,(?=[^,]*$)/, ` ${ I18n.t('and') }`); } return ( <View style={styles.itemContainer}> <View style={styles.emojiContainer}> <Emoji content={item.emoji} standardEmojiStyle={standardEmojiStyle} customEmojiStyle={customEmojiStyle} baseUrl={baseUrl!} getCustomEmoji={getCustomEmoji!} /> </View> <View style={styles.peopleItemContainer}> <Text style={[styles.reactCount, { color: themes[theme!].buttonText }]}> {count === 1 ? I18n.t('1_person_reacted') : I18n.t('N_people_reacted', { n: count })} </Text> <Text style={[styles.peopleReacted, { color: themes[theme!].buttonText }]}>{ usernames }</Text> </View> </View> ); }); const ModalContent = React.memo(({ message, onClose, ...props }: TModalContent) => { if (message && message.reactions) { return ( <SafeAreaView style={styles.safeArea}> <Touchable onPress={onClose}> <View style={styles.titleContainer}> <CustomIcon style={[styles.closeButton, { color: themes[props.theme].buttonText }]} name='close' size={20} /> <Text style={[styles.title, { color: themes[props.theme].buttonText }]}>{I18n.t('Reactions')}</Text> </View> </Touchable> <FlatList style={styles.listContainer} data={message.reactions} renderItem={({ item }) => <Item item={item} {...props} />} keyExtractor={item => item.emoji} /> </SafeAreaView> ); } return null; }); const ReactionsModal = React.memo(({ isVisible, onClose, theme, ...props }: IReactionsModal) => ( <Modal isVisible={isVisible} onBackdropPress={onClose} onBackButtonPress={onClose} backdropOpacity={0.8} onSwipeComplete={onClose} swipeDirection={['up', 'left', 'right', 'down']} > {/*@ts-ignore*/} <ModalContent onClose={onClose} theme={theme} {...props} /> </Modal> ), (prevProps, nextProps) => prevProps.isVisible === nextProps.isVisible && prevProps.theme === nextProps.theme); ReactionsModal.displayName = 'ReactionsModal'; ModalContent.displayName = 'ReactionsModalContent'; Item.displayName = 'ReactionsModalItem'; export default withTheme(ReactionsModal);