Differential D7263 Diff 24516 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 ThreadAvatar from '../components/thread-avatar.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';		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,
▲ Show 20 Lines • Show All 54 Lines • ▼ Show 20 Lines	function CommunityDrawerItem(props: DrawerItemProps): React.Node {
}, [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 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="micro" avatarInfo={avatarInfo} />		<ThreadAvatar size="micro" threadInfo={threadInfo} />
</View>		</View>
);		);
}, [avatarInfo, shouldRenderAvatars, styles.avatarContainer]);		}, [shouldRenderAvatars, styles.avatarContainer, threadInfo]);

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