Differential D7136 Diff 24241 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, FlatList, TouchableOpacity } from 'react-native';

		import { useGetAvatarForThread } from 'lib/shared/avatar-utils.js';
import type { CommunityDrawerItemData } from 'lib/utils/drawer-utils.react.js';		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 type { MessageListParams } from '../chat/message-list-types.js';		import type { MessageListParams } from '../chat/message-list-types.js';
		import Avatar from '../components/avatar.react.js';
import { SingleLine } from '../components/single-line.react.js';		import { SingleLine } from '../components/single-line.react.js';
import { useStyles } from '../themes/colors.js';		import { useStyles } from '../themes/colors.js';
import type { TextStyle } from '../types/styles.js';		import type { TextStyle } from '../types/styles.js';
		import { useShouldRenderAvatars } from '../utils/avatar-utils.js';

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

▲ Show 20 Lines • Show All 50 Lines • ▼ Show 20 Lines	const itemExpandButton = React.useMemo(() => {
return <ExpandButton onPress={onExpandToggled} expanded={expanded} />;		return <ExpandButton onPress={onExpandToggled} expanded={expanded} />;
}, [itemChildren?.length, hasSubchannelsButton, onExpandToggled, expanded]);		}, [itemChildren?.length, hasSubchannelsButton, onExpandToggled, expanded]);

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 avatarInfo = useGetAvatarForThread(threadInfo);
		const shouldRenderAvatars = useShouldRenderAvatars();

		const avatar = React.useMemo(() => {
		if (!shouldRenderAvatars) {
		return null;
		}

		return (
		<View style={styles.avatarContainer}>
		<Avatar size="micro" avatarInfo={avatarInfo} />
		</View>
		);
		}, [avatarInfo, shouldRenderAvatars, styles.avatarContainer]);

return (		return (
<View>		<View>
<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}
<SingleLine style={labelStyle}>{uiName}</SingleLine>		<SingleLine style={labelStyle}>{uiName}</SingleLine>
</TouchableOpacity>		</TouchableOpacity>
</View>		</View>
{children}		{children}
</View>		</View>
);		);
}		}

const unboundStyles = {		const unboundStyles = {
		avatarContainer: {
		marginRight: 8,
		},
chatView: {		chatView: {
marginLeft: 16,		marginLeft: 16,
},		},
threadEntry: {		threadEntry: {
flexDirection: 'row',		flexDirection: 'row',
marginVertical: 6,		marginVertical: 6,
},		},
textTouchableWrapper: {		textTouchableWrapper: {
flex: 1,		flex: 1,
		flexDirection: 'row',
		alignItems: 'center',
},		},
subchannelsButton: {		subchannelsButton: {
marginLeft: 24,		marginLeft: 24,
marginBottom: 6,		marginBottom: 6,
},		},
};		};

export type CommunityDrawerItemChatProps = {		export type CommunityDrawerItemChatProps = {
Show All 31 Lines