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 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'; | ||||
export type MessageReactionsModalParams = { | export type MessageReactionsModalParams = { | ||||
+reactions: ReactionInfo, | +reactions: ReactionInfo, | ||||
}; | }; | ||||
Show All 13 Lines | function MessageReactionsModal(props: Props): React.Node { | ||||
const modalContainerSafeAreaEdges = React.useMemo(() => ['bottom'], []); | const modalContainerSafeAreaEdges = React.useMemo(() => ['bottom'], []); | ||||
const close = React.useCallback(() => navigation.goBack(), [navigation]); | const close = React.useCallback(() => navigation.goBack(), [navigation]); | ||||
const reactionsListData = useMessageReactionsList(reactions); | const reactionsListData = useMessageReactionsList(reactions); | ||||
const renderItem = React.useCallback( | const renderItem = React.useCallback( | ||||
({ item }) => { | ({ item }) => { | ||||
const avatarInfo = getAvatarForUser(item); | |||||
return ( | return ( | ||||
<View key={item.id} style={styles.reactionsListRowContainer}> | <View key={item.id} style={styles.reactionsListRowContainer}> | ||||
<Text style={styles.reactionsListUsernameText}>{item.username}</Text> | <View style={styles.reactionsListUserInfoContainer}> | ||||
<Avatar size="small" avatarInfo={avatarInfo} /> | |||||
<Text style={styles.reactionsListUsernameText}> | |||||
{item.username} | |||||
</Text> | |||||
</View> | |||||
<Text style={styles.reactionsListReactionText}>{item.reaction}</Text> | <Text style={styles.reactionsListReactionText}>{item.reaction}</Text> | ||||
</View> | </View> | ||||
); | ); | ||||
}, | }, | ||||
[ | [ | ||||
styles.reactionsListReactionText, | styles.reactionsListReactionText, | ||||
styles.reactionsListRowContainer, | styles.reactionsListRowContainer, | ||||
styles.reactionsListUserInfoContainer, | |||||
styles.reactionsListUsernameText, | styles.reactionsListUsernameText, | ||||
], | ], | ||||
); | ); | ||||
const itemSeperator = React.useCallback(() => { | const itemSeperator = React.useCallback(() => { | ||||
return <View style={styles.reactionsListItemSeperator} />; | return <View style={styles.reactionsListItemSeperator} />; | ||||
}, [styles.reactionsListItemSeperator]); | }, [styles.reactionsListItemSeperator]); | ||||
▲ Show 20 Lines • Show All 54 Lines • ▼ Show 20 Lines | const unboundStyles = { | ||||
reactionsListTitleText: { | reactionsListTitleText: { | ||||
color: 'modalForegroundLabel', | color: 'modalForegroundLabel', | ||||
fontSize: 18, | fontSize: 18, | ||||
}, | }, | ||||
reactionsListRowContainer: { | reactionsListRowContainer: { | ||||
flexDirection: 'row', | flexDirection: 'row', | ||||
justifyContent: 'space-between', | justifyContent: 'space-between', | ||||
}, | }, | ||||
reactionsListUserInfoContainer: { | |||||
flex: 1, | |||||
flexDirection: 'row', | |||||
alignItems: 'center', | |||||
}, | |||||
reactionsListUsernameText: { | reactionsListUsernameText: { | ||||
color: 'modalForegroundLabel', | color: 'modalForegroundLabel', | ||||
fontSize: 18, | fontSize: 18, | ||||
marginLeft: 8, | |||||
}, | }, | ||||
reactionsListReactionText: { | reactionsListReactionText: { | ||||
fontSize: 18, | fontSize: 18, | ||||
}, | }, | ||||
reactionsListItemSeperator: { | reactionsListItemSeperator: { | ||||
height: 16, | height: 16, | ||||
}, | }, | ||||
closeButton: { | closeButton: { | ||||
Show All 11 Lines |