Differential D7069 Diff 23738 native/chat/message-reactions-modal.react.js

Changeset 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