Differential D8112 Diff 27698 native/navigation/community-drawer-item.react.js

Changeset View

Standalone View

native/navigation/community-drawer-item.react.js

	// @flow			// @flow

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

	import type { CommunityDrawerItemData } from 'lib/utils/drawer-utils.react.js';
	import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';			import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';

	import { ExpandButton, ExpandButtonDisabled } from './expand-buttons.react.js';			import { ExpandButton, ExpandButtonDisabled } from './expand-buttons.react.js';
	import SubchannelsButton from './subchannels-button.react.js';			import SubchannelsButton from './subchannels-button.react.js';
	import ThreadAvatar from '../avatars/thread-avatar.react.js';			import ThreadAvatar from '../avatars/thread-avatar.react.js';
	import type { MessageListParams } from '../chat/message-list-types.js';			import type { MessageListParams } from '../chat/message-list-types.js';
	import { SingleLine } from '../components/single-line.react.js';			import { SingleLine } from '../components/single-line.react.js';
	import InviteLinksButton from '../invite-links/invite-links-button.react.js';			import InviteLinksButton from '../invite-links/invite-links-button.react.js';
	import { useStyles } from '../themes/colors.js';			import { useStyles } from '../themes/colors.js';
	import type { TextStyle } from '../types/styles.js';
	import { useShouldRenderAvatars } from '../utils/avatar-utils.js';			import { useShouldRenderAvatars } from '../utils/avatar-utils.js';
				import type { CommunityDrawerItemDataFlattened } from '../utils/drawer-utils.react.js';

	export type DrawerItemProps = {			export type DrawerItemProps = {
	+itemData: CommunityDrawerItemData<TextStyle>,			+itemData: CommunityDrawerItemDataFlattened,
	+toggleExpanded: (threadID: string) => void,			+toggleExpanded: (threadID: string) => void,
	+expanded: boolean,			+isExpanded: boolean,
	+navigateToThread: (params: MessageListParams) => void,			+navigateToThread: (params: MessageListParams) => void,
	};			};

	function CommunityDrawerItem(props: DrawerItemProps): React.Node {			function CommunityDrawerItem(props: DrawerItemProps): React.Node {
	const {			const {
	itemData: { threadInfo, itemChildren, labelStyle, hasSubchannelsButton },			itemData: {
				threadInfo,
				labelStyle,
				hasSubchannelsButton,
				hasChildren,
				itemStyle,
				},
	navigateToThread,			navigateToThread,
	expanded,			isExpanded,
	toggleExpanded,			toggleExpanded,
	} = props;			} = props;

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

	const renderItem = React.useCallback(			const subchannelsButton = React.useMemo(() => {
	({ item }) => (			if (isExpanded && hasSubchannelsButton) {
	<MemoizedCommunityDrawerItemChat
	key={item.threadInfo.id}
	itemData={item}
	navigateToThread={navigateToThread}
	/>
	),
	[navigateToThread],
	);

	const children = React.useMemo(() => {
	if (!expanded) {
	return null;
	}
	if (hasSubchannelsButton) {
	return (			return (
	<View style={styles.subchannelsButton}>			<View style={styles.subchannelsButton}>
	<SubchannelsButton threadInfo={threadInfo} />			<SubchannelsButton threadInfo={threadInfo} />
	</View>			</View>
	);			);
	}			}
	return <FlatList data={itemChildren} renderItem={renderItem} />;			return null;
	}, [			}, [isExpanded, hasSubchannelsButton, styles.subchannelsButton, threadInfo]);
	expanded,
	itemChildren,
	renderItem,
	hasSubchannelsButton,
	styles.subchannelsButton,
	threadInfo,
	]);

	const onExpandToggled = React.useCallback(() => {			const onExpandToggled = React.useCallback(() => {
	toggleExpanded(threadInfo.id);			toggleExpanded(threadInfo.id);
	}, [toggleExpanded, threadInfo.id]);			}, [toggleExpanded, threadInfo.id]);

	const itemExpandButton = React.useMemo(() => {			const itemExpandButton = React.useMemo(() => {
	if (!itemChildren?.length && !hasSubchannelsButton) {			if (!hasChildren && !hasSubchannelsButton) {
	return <ExpandButtonDisabled />;			return <ExpandButtonDisabled />;
	}			}
	return <ExpandButton onPress={onExpandToggled} expanded={expanded} />;			return <ExpandButton onPress={onExpandToggled} expanded={isExpanded} />;
	}, [itemChildren?.length, hasSubchannelsButton, onExpandToggled, expanded]);			}, [hasChildren, hasSubchannelsButton, onExpandToggled, isExpanded]);

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

	const { uiName } = useResolvedThreadInfo(threadInfo);			const { uiName } = useResolvedThreadInfo(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}>
	<ThreadAvatar size="micro" threadInfo={threadInfo} />			<ThreadAvatar size="micro" threadInfo={threadInfo} />
	</View>			</View>
	);			);
	}, [shouldRenderAvatars, styles.avatarContainer, threadInfo]);			}, [shouldRenderAvatars, styles.avatarContainer, threadInfo]);

				const containerStyle = React.useMemo(
				() => [
				styles.container,
				{
				paddingLeft: itemStyle.indentation,
				},
				styles[itemStyle.background],
				],
				[itemStyle.indentation, itemStyle.background, styles],
				);

	return (			return (
	<View>			<View style={containerStyle}>
	<View style={styles.threadEntry}>			<View style={styles.threadEntry}>
	{itemExpandButton}			{itemExpandButton}
	<TouchableOpacity			<TouchableOpacity
	onPress={onPress}			onPress={onPress}
	style={styles.textTouchableWrapper}			style={styles.textTouchableWrapper}
	onLongPress={onExpandToggled}			onLongPress={onExpandToggled}
	>			>
	{avatar}			{avatar}
	<SingleLine style={labelStyle}>{uiName}</SingleLine>			<SingleLine style={labelStyle}>{uiName}</SingleLine>
	</TouchableOpacity>			</TouchableOpacity>
	<InviteLinksButton community={threadInfo} />			<InviteLinksButton community={threadInfo} />
	</View>			</View>
	{children}			{subchannelsButton}
	</View>			</View>
	);			);
	}			}

	const unboundStyles = {			const unboundStyles = {
				container: {
				paddingRight: 24,
				},
				none: {
				paddingVertical: 2,
				},
				beginning: {
				backgroundColor: 'drawerOpenCommunityBackground',
				borderTopRightRadius: 8,
				paddingTop: 2,
				},
				middle: {
				backgroundColor: 'drawerOpenCommunityBackground',
				paddingRight: 24,
				},
				end: {
				backgroundColor: 'drawerOpenCommunityBackground',
				borderBottomRightRadius: 8,
				paddingBottom: 2,
				},
	avatarContainer: {			avatarContainer: {
	marginRight: 8,			marginRight: 8,
	},			},
	chatView: {
	marginLeft: 16,
	},
	threadEntry: {			threadEntry: {
	flexDirection: 'row',			flexDirection: 'row',
	marginVertical: 6,			marginVertical: 6,
	},			},
	textTouchableWrapper: {			textTouchableWrapper: {
	flex: 1,			flex: 1,
	flexDirection: 'row',			flexDirection: 'row',
	alignItems: 'center',			alignItems: 'center',
	},			},
	subchannelsButton: {			subchannelsButton: {
	marginLeft: 24,			marginLeft: 24,
	marginBottom: 6,			marginBottom: 6,
	},			},
	};			};

	export type CommunityDrawerItemChatProps = {
	+itemData: CommunityDrawerItemData<TextStyle>,
	+navigateToThread: (params: MessageListParams) => void,
	};

	function CommunityDrawerItemChat(
	props: CommunityDrawerItemChatProps,
	): React.Node {
	const [expanded, setExpanded] = React.useState(false);
	const styles = useStyles(unboundStyles);

	const toggleExpanded = React.useCallback(() => {
	setExpanded(isExpanded => !isExpanded);
	}, []);

	return (
	<View style={styles.chatView}>
	<CommunityDrawerItem
	{...props}
	expanded={expanded}
	toggleExpanded={toggleExpanded}
	/>
	</View>
	);
	}
	const MemoizedCommunityDrawerItemChat: React.ComponentType<CommunityDrawerItemChatProps> =
	React.memo(CommunityDrawerItemChat);

	const MemoizedCommunityDrawerItem: React.ComponentType<DrawerItemProps> =			const MemoizedCommunityDrawerItem: React.ComponentType<DrawerItemProps> =
	React.memo(CommunityDrawerItem);			React.memo(CommunityDrawerItem);

	export default MemoizedCommunityDrawerItem;			export default MemoizedCommunityDrawerItem;