Changeset View
Changeset View
Standalone View
Standalone View
native/chat/message-reactions-modal.react.js
| // @flow | // @flow | ||||
| import Icon from '@expo/vector-icons/FontAwesome.js'; | import Icon from '@expo/vector-icons/FontAwesome.js'; | ||||
| import { useNavigation } from '@react-navigation/native'; | import { useNavigation } from '@react-navigation/native'; | ||||
| import * as React from 'react'; | import * as React from 'react'; | ||||
| import { View, Text, FlatList, TouchableHighlight } from 'react-native'; | import { View, Text, FlatList, TouchableHighlight } from 'react-native'; | ||||
| import { SafeAreaView } from 'react-native-safe-area-context'; | import { SafeAreaView } from 'react-native-safe-area-context'; | ||||
| import type { ReactionInfo } from 'lib/selectors/chat-selectors.js'; | import type { ReactionInfo } from 'lib/selectors/chat-selectors.js'; | ||||
| import { getAvatarForUser } from 'lib/shared/avatar-utils.js'; | |||||
| import { useMessageReactionsList } from 'lib/shared/reaction-utils.js'; | import { useMessageReactionsList } from 'lib/shared/reaction-utils.js'; | ||||
| import Avatar from '../components/avatar.react.js'; | |||||
| import Modal from '../components/modal.react.js'; | import Modal from '../components/modal.react.js'; | ||||
| import UserAvatar from '../components/user-avatar.react.js'; | |||||
| import type { RootNavigationProp } from '../navigation/root-navigator.react.js'; | import type { RootNavigationProp } from '../navigation/root-navigator.react.js'; | ||||
| import type { NavigationRoute } from '../navigation/route-names.js'; | import type { NavigationRoute } from '../navigation/route-names.js'; | ||||
| import { useColors, useStyles } from '../themes/colors.js'; | import { useColors, useStyles } from '../themes/colors.js'; | ||||
| import { useShouldRenderAvatars } from '../utils/avatar-utils.js'; | import { useShouldRenderAvatars } from '../utils/avatar-utils.js'; | ||||
| export type MessageReactionsModalParams = { | export type MessageReactionsModalParams = { | ||||
| +reactions: ReactionInfo, | +reactions: ReactionInfo, | ||||
| }; | }; | ||||
| Show All 20 Lines | function MessageReactionsModal(props: Props): React.Node { | ||||
| const marginLeftStyle = React.useMemo( | const marginLeftStyle = React.useMemo( | ||||
| () => ({ | () => ({ | ||||
| marginLeft: shouldRenderAvatars ? 8 : 0, | marginLeft: shouldRenderAvatars ? 8 : 0, | ||||
| }), | }), | ||||
| [shouldRenderAvatars], | [shouldRenderAvatars], | ||||
| ); | ); | ||||
| const renderItem = React.useCallback( | const renderItem = React.useCallback( | ||||
| ({ item }) => { | ({ item }) => ( | ||||
| const avatarInfo = getAvatarForUser(item); | |||||
| return ( | |||||
| <View key={item.id} style={styles.reactionsListRowContainer}> | <View key={item.id} style={styles.reactionsListRowContainer}> | ||||
| <View style={styles.reactionsListUserInfoContainer}> | <View style={styles.reactionsListUserInfoContainer}> | ||||
| <Avatar size="small" avatarInfo={avatarInfo} /> | <UserAvatar size="small" userID={item.id} /> | ||||
| <Text style={[styles.reactionsListUsernameText, marginLeftStyle]}> | <Text style={[styles.reactionsListUsernameText, marginLeftStyle]}> | ||||
| {item.username} | {item.username} | ||||
| </Text> | </Text> | ||||
| </View> | </View> | ||||
| <Text style={styles.reactionsListReactionText}>{item.reaction}</Text> | <Text style={styles.reactionsListReactionText}>{item.reaction}</Text> | ||||
| </View> | </View> | ||||
| ); | ), | ||||
| }, | |||||
| [ | [ | ||||
| marginLeftStyle, | marginLeftStyle, | ||||
| styles.reactionsListReactionText, | styles.reactionsListReactionText, | ||||
| styles.reactionsListRowContainer, | styles.reactionsListRowContainer, | ||||
| styles.reactionsListUserInfoContainer, | styles.reactionsListUserInfoContainer, | ||||
| styles.reactionsListUsernameText, | styles.reactionsListUsernameText, | ||||
| ], | ], | ||||
| ); | ); | ||||
| ▲ Show 20 Lines • Show All 94 Lines • Show Last 20 Lines | |||||