Differential D7099 Diff 23900 native/chat/message-reactions-modal.react.js

Changeset View

Standalone View

native/chat/message-reactions-modal.react.js

Show All 9 Lines
import { getAvatarForUser } from 'lib/shared/avatar-utils.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 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';
		import { useShouldRenderAvatars } from '../utils/avatar-utils.js';

export type MessageReactionsModalParams = {		export type MessageReactionsModalParams = {
+reactions: ReactionInfo,		+reactions: ReactionInfo,
};		};

type Props = {		type Props = {
+navigation: RootNavigationProp<'MessageReactionsModal'>,		+navigation: RootNavigationProp<'MessageReactionsModal'>,
+route: NavigationRoute<'MessageReactionsModal'>,		+route: NavigationRoute<'MessageReactionsModal'>,
};		};
function MessageReactionsModal(props: Props): React.Node {		function MessageReactionsModal(props: Props): React.Node {
const { reactions } = props.route.params;		const { reactions } = props.route.params;

const styles = useStyles(unboundStyles);		const styles = useStyles(unboundStyles);
const colors = useColors();		const colors = useColors();
const navigation = useNavigation();		const navigation = useNavigation();

const modalSafeAreaEdges = React.useMemo(() => ['top'], []);		const modalSafeAreaEdges = React.useMemo(() => ['top'], []);
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 shouldRenderAvatars = useShouldRenderAvatars();
		const marginLeftStyle = React.useMemo(
		() => ({
		marginLeft: shouldRenderAvatars ? 8 : 0,
		}),
		[shouldRenderAvatars],
		);

const renderItem = React.useCallback(		const renderItem = React.useCallback(
({ item }) => {		({ item }) => {
const avatarInfo = getAvatarForUser(item);		const avatarInfo = getAvatarForUser(item);

return (		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} />		<Avatar size="small" avatarInfo={avatarInfo} />
<Text style={styles.reactionsListUsernameText}>		<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,
styles.reactionsListReactionText,		styles.reactionsListReactionText,
styles.reactionsListRowContainer,		styles.reactionsListRowContainer,
styles.reactionsListUserInfoContainer,		styles.reactionsListUserInfoContainer,
styles.reactionsListUsernameText,		styles.reactionsListUsernameText,
],		],
);		);

const itemSeperator = React.useCallback(() => {		const itemSeperator = React.useCallback(() => {
▲ Show 20 Lines • Show All 65 Lines • ▼ Show 20 Lines	const unboundStyles = {
reactionsListUserInfoContainer: {		reactionsListUserInfoContainer: {
flex: 1,		flex: 1,
flexDirection: 'row',		flexDirection: 'row',
alignItems: 'center',		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