Differential D7263 Diff 24516 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 ThreadAvatar from '../../components/thread-avatar.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 { 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 shouldRenderAvatars = useShouldRenderAvatars();

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

	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}			{avatar}
	▲ Show 20 Lines • Show All 44 Lines • Show Last 20 Lines