Differential D7138 Diff 24243 native/chat/chat-thread-list-item.react.js

Changeset View

Standalone View

native/chat/chat-thread-list-item.react.js

// @flow		// @flow

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

import type { ChatThreadItem } from 'lib/selectors/chat-selectors.js';		import type { ChatThreadItem } from 'lib/selectors/chat-selectors.js';
		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 type { UserInfo } from 'lib/types/user-types.js';		import type { UserInfo } from 'lib/types/user-types.js';
import { shortAbsoluteDate } from 'lib/utils/date-utils.js';		import { shortAbsoluteDate } from 'lib/utils/date-utils.js';
import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';		import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';

import ChatThreadListSeeMoreSidebars from './chat-thread-list-see-more-sidebars.react.js';		import ChatThreadListSeeMoreSidebars from './chat-thread-list-see-more-sidebars.react.js';
import ChatThreadListSidebar from './chat-thread-list-sidebar.react.js';		import ChatThreadListSidebar from './chat-thread-list-sidebar.react.js';
import MessagePreview from './message-preview.react.js';		import MessagePreview from './message-preview.react.js';
import SwipeableThread from './swipeable-thread.react.js';		import SwipeableThread from './swipeable-thread.react.js';
		import Avatar from '../components/avatar.react.js';
import Button from '../components/button.react.js';		import Button from '../components/button.react.js';
import ColorSplotch from '../components/color-splotch.react.js';		import ColorSplotch from '../components/color-splotch.react.js';
import { SingleLine } from '../components/single-line.react.js';		import { SingleLine } from '../components/single-line.react.js';
import ThreadAncestorsLabel from '../components/thread-ancestors-label.react.js';		import ThreadAncestorsLabel from '../components/thread-ancestors-label.react.js';
import UnreadDot from '../components/unread-dot.react.js';		import UnreadDot from '../components/unread-dot.react.js';
import { useColors, useStyles } from '../themes/colors.js';		import { useColors, useStyles } from '../themes/colors.js';
		import { useShouldRenderAvatars } from '../utils/avatar-utils.js';

type Props = {		type Props = {
+data: ChatThreadItem,		+data: ChatThreadItem,
+onPressItem: (		+onPressItem: (
threadInfo: ThreadInfo,		threadInfo: ThreadInfo,
pendingPersonalThreadUserInfo?: UserInfo,		pendingPersonalThreadUserInfo?: UserInfo,
) => void,		) => void,
+onPressSeeMoreSidebars: (threadInfo: ThreadInfo) => void,		+onPressSeeMoreSidebars: (threadInfo: ThreadInfo) => void,
▲ Show 20 Lines • Show All 81 Lines • ▼ Show 20 Lines	const lastActivityStyle = React.useMemo(() => {
return [styles.lastActivity, styles.unreadLastActivity];		return [styles.lastActivity, styles.unreadLastActivity];
}, [		}, [
data.threadInfo.currentUser.unread,		data.threadInfo.currentUser.unread,
styles.lastActivity,		styles.lastActivity,
styles.unreadLastActivity,		styles.unreadLastActivity,
]);		]);

const resolvedThreadInfo = useResolvedThreadInfo(data.threadInfo);		const resolvedThreadInfo = useResolvedThreadInfo(data.threadInfo);
		const avatarInfo = useGetAvatarForThread(data.threadInfo);
		const shouldRenderAvatars = useShouldRenderAvatars();

		const avatar = React.useMemo(() => {
		if (!shouldRenderAvatars) {
		return <ColorSplotch color={data.threadInfo.color} size="profile" />;
		}

		return <Avatar size="large" avatarInfo={avatarInfo} />;
		}, [avatarInfo, data.threadInfo.color, shouldRenderAvatars]);

return (		return (
<>		<>
<SwipeableThread		<SwipeableThread
threadInfo={data.threadInfo}		threadInfo={data.threadInfo}
mostRecentNonLocalMessage={data.mostRecentNonLocalMessage}		mostRecentNonLocalMessage={data.mostRecentNonLocalMessage}
onSwipeableWillOpen={onSwipeableWillOpen}		onSwipeableWillOpen={onSwipeableWillOpen}
currentlyOpenedSwipeableId={currentlyOpenedSwipeableId}		currentlyOpenedSwipeableId={currentlyOpenedSwipeableId}
iconSize={24}		iconSize={24}
>		>
<Button		<Button
onPress={onPress}		onPress={onPress}
iosFormat="highlight"		iosFormat="highlight"
iosHighlightUnderlayColor={colors.listIosHighlightUnderlay}		iosHighlightUnderlayColor={colors.listIosHighlightUnderlay}
iosActiveOpacity={0.85}		iosActiveOpacity={0.85}
style={styles.container}		style={styles.container}
>		>
<View style={styles.content}>		<View style={styles.content}>
<View style={styles.colorSplotch}>		<View style={styles.colorSplotch}>
<UnreadDot unread={data.threadInfo.currentUser.unread} />		<UnreadDot unread={data.threadInfo.currentUser.unread} />
</View>		</View>
<View style={styles.colorSplotch}>		<View style={styles.colorSplotch}>{avatar}</View>
<ColorSplotch color={data.threadInfo.color} size="profile" />
</View>
<View style={styles.threadDetails}>		<View style={styles.threadDetails}>
<ThreadAncestorsLabel threadInfo={data.threadInfo} />		<ThreadAncestorsLabel threadInfo={data.threadInfo} />
<View style={styles.row}>		<View style={styles.row}>
<SingleLine style={threadNameStyle}>		<SingleLine style={threadNameStyle}>
{resolvedThreadInfo.uiName}		{resolvedThreadInfo.uiName}
</SingleLine>		</SingleLine>
</View>		</View>
<View style={styles.row}>		<View style={styles.row}>
▲ Show 20 Lines • Show All 71 Lines • Show Last 20 Lines