48 lines
1.5 KiB
TypeScript
48 lines
1.5 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import { Text, View, FlatList } from 'react-native';
|
||
|
|
import { useSelector } from 'react-redux';
|
||
|
|
|
||
|
|
import { useTheme } from '../../theme';
|
||
|
|
import { IReaction, IApplicationState } from '../../definitions';
|
||
|
|
import Avatar from '../Avatar';
|
||
|
|
import styles from './styles';
|
||
|
|
|
||
|
|
const UsersList = ({ tabLabel }: { tabLabel: IReaction }): React.ReactElement => {
|
||
|
|
const { colors } = useTheme();
|
||
|
|
const useRealName = useSelector((state: IApplicationState) => state.settings.UI_Use_Real_Name);
|
||
|
|
|
||
|
|
const { emoji, usernames, names } = tabLabel;
|
||
|
|
const users =
|
||
|
|
names?.length > 0
|
||
|
|
? usernames.map((username, index) => ({ username, name: names[index] }))
|
||
|
|
: usernames.map(username => ({ username, name: '' }));
|
||
|
|
|
||
|
|
return (
|
||
|
|
<FlatList
|
||
|
|
data={users}
|
||
|
|
contentContainerStyle={styles.listContainer}
|
||
|
|
ListHeaderComponent={
|
||
|
|
<View style={styles.emojiNameContainer}>
|
||
|
|
<Text style={[styles.emojiName, { color: colors.auxiliaryText }]} testID='usersListEmojiName'>
|
||
|
|
{emoji}
|
||
|
|
</Text>
|
||
|
|
</View>
|
||
|
|
}
|
||
|
|
renderItem={({ item }) => (
|
||
|
|
<View style={styles.listItemContainer} testID='userItem'>
|
||
|
|
<Avatar text={item.username} size={36} />
|
||
|
|
<View style={styles.textContainer}>
|
||
|
|
<Text style={[styles.usernameText, { color: colors.bodyText }]} numberOfLines={1}>
|
||
|
|
{useRealName && item.name ? item.name : item.username}
|
||
|
|
</Text>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
)}
|
||
|
|
keyExtractor={item => item.username}
|
||
|
|
testID={`usersList-${emoji}`}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default UsersList;
|