Differential D7137 Diff 24229 native/chat/settings/thread-settings-child-thread.react.js

Changeset View

Standalone View

native/chat/settings/thread-settings-child-thread.react.js

	// @flow			// @flow

	import * as React from 'react';			import * as React from 'react';
	import { View, Platform } from 'react-native';			import { View, Platform } from 'react-native';

				import { useGetAvatarForThread } from 'lib/shared/avatar-utils.js';
	import type { ThreadInfo } from 'lib/types/thread-types.js';			import type { ThreadInfo } from 'lib/types/thread-types.js';

				import Avatar from '../../components/avatar.react.js';
	import Button from '../../components/button.react.js';			import Button from '../../components/button.react.js';
	import ThreadIcon from '../../components/thread-icon.react.js';			import ThreadIcon from '../../components/thread-icon.react.js';
	import ThreadPill from '../../components/thread-pill.react.js';			import ThreadPill from '../../components/thread-pill.react.js';
	import { useColors, useStyles } from '../../themes/colors.js';			import { useColors, useStyles } from '../../themes/colors.js';
				import { useShouldRenderAvatars } from '../../utils/avatar-utils.js';
	import { useNavigateToThread } from '../message-list-types.js';			import { useNavigateToThread } from '../message-list-types.js';

	type Props = {			type Props = {
	+threadInfo: ThreadInfo,			+threadInfo: ThreadInfo,
	+firstListItem: boolean,			+firstListItem: boolean,
	+lastListItem: boolean,			+lastListItem: boolean,
	};			};
	function ThreadSettingsChildThread(props: Props): React.Node {			function ThreadSettingsChildThread(props: Props): React.Node {
	const { threadInfo } = props;			const { threadInfo } = props;

	const navigateToThread = useNavigateToThread();			const navigateToThread = useNavigateToThread();
	const onPress = React.useCallback(() => {			const onPress = React.useCallback(() => {
	navigateToThread({ threadInfo });			navigateToThread({ threadInfo });
	}, [threadInfo, navigateToThread]);			}, [threadInfo, navigateToThread]);

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

				const avatarInfo = useGetAvatarForThread(threadInfo);
				const shouldRenderAvatars = useShouldRenderAvatars();

				const avatar = React.useMemo(() => {
				if (!shouldRenderAvatars) {
				return null;
				}
				return (
				<View style={styles.avatarContainer}>
				<Avatar size="small" avatarInfo={avatarInfo} />
				</View>
				);
				}, [avatarInfo, shouldRenderAvatars, styles.avatarContainer]);

	const firstItem = props.firstListItem ? null : styles.topBorder;			const firstItem = props.firstListItem ? null : styles.topBorder;
	const lastItem = props.lastListItem ? styles.lastButton : null;			const lastItem = props.lastListItem ? styles.lastButton : null;
	return (			return (
	<View style={styles.container}>			<View style={styles.container}>
	<Button onPress={onPress} style={[styles.button, firstItem, lastItem]}>			<Button onPress={onPress} style={[styles.button, firstItem, lastItem]}>
	<View style={styles.leftSide}>			<View style={styles.leftSide}>
				{avatar}
	<ThreadPill threadInfo={threadInfo} />			<ThreadPill threadInfo={threadInfo} />
	</View>			</View>
	<ThreadIcon			<ThreadIcon
	threadType={threadInfo.type}			threadType={threadInfo.type}
	color={colors.panelForegroundSecondaryLabel}			color={colors.panelForegroundSecondaryLabel}
	/>			/>
	</Button>			</Button>
	</View>			</View>
	);			);
	}			}

	const unboundStyles = {			const unboundStyles = {
				avatarContainer: {
				marginRight: 8,
				},
	button: {			button: {
	flex: 1,			flex: 1,
	flexDirection: 'row',			flexDirection: 'row',
	paddingVertical: 8,			paddingVertical: 8,
	paddingLeft: 12,			paddingLeft: 12,
	paddingRight: 10,			paddingRight: 10,
	alignItems: 'center',			alignItems: 'center',
	},			},
	Show All 21 Lines