Page MenuHomePhabricator
Files F3365690

D7138.diff
No OneTemporary
Actions

D7138.diff
View Options

diff --git a/native/chat/chat-thread-list-item.react.js b/native/chat/chat-thread-list-item.react.js
--- a/native/chat/chat-thread-list-item.react.js
+++ b/native/chat/chat-thread-list-item.react.js
@@ -4,6 +4,7 @@
import { Text, View } from 'react-native';
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 { UserInfo } from 'lib/types/user-types.js';
import { shortAbsoluteDate } from 'lib/utils/date-utils.js';
@@ -13,12 +14,14 @@
import ChatThreadListSidebar from './chat-thread-list-sidebar.react.js';
import MessagePreview from './message-preview.react.js';
import SwipeableThread from './swipeable-thread.react.js';
+import Avatar from '../components/avatar.react.js';
import Button from '../components/button.react.js';
import ColorSplotch from '../components/color-splotch.react.js';
import { SingleLine } from '../components/single-line.react.js';
import ThreadAncestorsLabel from '../components/thread-ancestors-label.react.js';
import UnreadDot from '../components/unread-dot.react.js';
import { useColors, useStyles } from '../themes/colors.js';
+import { useShouldRenderAvatars } from '../utils/avatar-utils.js';
type Props = {
+data: ChatThreadItem,
@@ -116,6 +119,16 @@
]);
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 (
<>
@@ -137,9 +150,7 @@
<View style={styles.colorSplotch}>
<UnreadDot unread={data.threadInfo.currentUser.unread} />
</View>
- <View style={styles.colorSplotch}>
- <ColorSplotch color={data.threadInfo.color} size="profile" />
- </View>
+ <View style={styles.colorSplotch}>{avatar}</View>
<View style={styles.threadDetails}>
<ThreadAncestorsLabel threadInfo={data.threadInfo} />
<View style={styles.row}>
diff --git a/native/components/thread-list-thread.react.js b/native/components/thread-list-thread.react.js
--- a/native/components/thread-list-thread.react.js
+++ b/native/components/thread-list-thread.react.js
@@ -2,14 +2,18 @@
import * as React from 'react';
+import { useGetAvatarForThread } from 'lib/shared/avatar-utils.js';
+import type { ClientAvatar } from 'lib/types/avatar-types.js';
import type { ThreadInfo, ResolvedThreadInfo } from 'lib/types/thread-types.js';
import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
+import Avatar from './avatar.react.js';
import Button from './button.react.js';
import ColorSplotch from './color-splotch.react.js';
import { SingleLine } from './single-line.react.js';
import { type Colors, useStyles, useColors } from '../themes/colors.js';
import type { ViewStyle, TextStyle } from '../types/styles.js';
+import { useShouldRenderAvatars } from '../utils/avatar-utils.js';
type SharedProps = {
+onSelect: (threadID: string) => void,
@@ -23,12 +27,22 @@
type Props = {
...SharedProps,
+threadInfo: ResolvedThreadInfo,
+ +avatarInfo: ClientAvatar,
+ +shouldRenderAvatars: boolean,
+colors: Colors,
+styles: typeof unboundStyles,
};
class ThreadListThread extends React.PureComponent<Props> {
render() {
const { modalIosHighlightUnderlay: underlayColor } = this.props.colors;
+
+ let avatar;
+ if (this.props.shouldRenderAvatars) {
+ avatar = <Avatar size="small" avatarInfo={this.props.avatarInfo} />;
+ } else {
+ avatar = <ColorSplotch color={this.props.threadInfo.color} />;
+ }
+
return (
<Button
onPress={this.onSelect}
@@ -37,7 +51,7 @@
iosActiveOpacity={0.85}
style={[this.props.styles.button, this.props.style]}
>
- <ColorSplotch color={this.props.threadInfo.color} />
+ {avatar}
<SingleLine style={[this.props.styles.text, this.props.textStyle]}>
{this.props.threadInfo.uiName}
</SingleLine>
@@ -71,11 +85,15 @@
const styles = useStyles(unboundStyles);
const colors = useColors();
const resolvedThreadInfo = useResolvedThreadInfo(threadInfo);
+ const avatarInfo = useGetAvatarForThread(threadInfo);
+ const shouldRenderAvatars = useShouldRenderAvatars();
return (
<ThreadListThread
{...rest}
threadInfo={resolvedThreadInfo}
+ avatarInfo={avatarInfo}
+ shouldRenderAvatars={shouldRenderAvatars}
styles={styles}
colors={colors}
/>

File Metadata

Mime Type
text/plain
Expires
Tue, Nov 26, 7:24 AM (22 h, 1 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2583838
Default Alt Text
D7138.diff (4 KB)

Event Timeline