Page MenuHomePhabricator
Files F3384305

D7135.id24214.diff
No OneTemporary
Actions

D7135.id24214.diff
View Options

diff --git a/native/chat/settings/thread-settings-avatar.react.js b/native/chat/settings/thread-settings-avatar.react.js
new file mode 100644
--- /dev/null
+++ b/native/chat/settings/thread-settings-avatar.react.js
@@ -0,0 +1,38 @@
+// @flow
+
+import * as React from 'react';
+import { View } from 'react-native';
+
+import { useGetAvatarForThread } from 'lib/shared/avatar-utils.js';
+import { type ResolvedThreadInfo } from 'lib/types/thread-types.js';
+
+import Avatar from '../../components/avatar.react.js';
+import { useStyles } from '../../themes/colors.js';
+
+type Props = {
+ +threadInfo: ResolvedThreadInfo,
+};
+function ThreadSettingsAvatar(props: Props): React.Node {
+ const styles = useStyles(unboundStyles);
+ const avatarInfo = useGetAvatarForThread(props.threadInfo);
+
+ return (
+ <View style={styles.container}>
+ <Avatar size="profile" avatarInfo={avatarInfo} />
+ </View>
+ );
+}
+
+const unboundStyles = {
+ container: {
+ alignItems: 'center',
+ backgroundColor: 'panelForeground',
+ flex: 1,
+ paddingVertical: 16,
+ },
+};
+
+const MemoizedThreadSettingsAvatar: React.ComponentType<Props> =
+ React.memo<Props>(ThreadSettingsAvatar);
+
+export default MemoizedThreadSettingsAvatar;
diff --git a/native/chat/settings/thread-settings.react.js b/native/chat/settings/thread-settings.react.js
--- a/native/chat/settings/thread-settings.react.js
+++ b/native/chat/settings/thread-settings.react.js
@@ -43,6 +43,7 @@
useResolvedOptionalThreadInfos,
} from 'lib/utils/entity-helpers.js';
+import ThreadSettingsAvatar from './thread-settings-avatar.react.js';
import type { CategoryType } from './thread-settings-category.react.js';
import {
ThreadSettingsCategoryHeader,
@@ -94,6 +95,7 @@
} from '../../themes/colors.js';
import type { VerticalBounds } from '../../types/layout-types.js';
import type { ViewStyle } from '../../types/styles.js';
+import { useShouldRenderAvatars } from '../../utils/avatar-utils.js';
import type { ChatNavigationProp } from '../chat.react.js';
const itemPageLength = 5;
@@ -126,6 +128,11 @@
+key: string,
+categoryType: CategoryType,
}
+ | {
+ +itemType: 'avatar',
+ +key: string,
+ +threadInfo: ResolvedThreadInfo,
+ }
| {
+itemType: 'name',
+key: string,
@@ -246,6 +253,7 @@
// withKeyboardState
+keyboardState: ?KeyboardState,
+canPromoteSidebar: boolean,
+ +shouldRenderAvatars: boolean,
};
type State = {
+numMembersShowing: number,
@@ -341,6 +349,25 @@
const canChangeColor = canEditThreadColor && canStartEditing;
const listData: ChatSettingsItem[] = [];
+ if (this.props.shouldRenderAvatars) {
+ listData.push({
+ itemType: 'header',
+ key: 'avatarHeader',
+ title: 'Channel Avatar',
+ categoryType: 'unpadded',
+ });
+ listData.push({
+ itemType: 'avatar',
+ key: 'avatar',
+ threadInfo,
+ });
+ listData.push({
+ itemType: 'footer',
+ key: 'avatarFooter',
+ categoryType: 'outline',
+ });
+ }
+
listData.push({
itemType: 'header',
key: 'basicsHeader',
@@ -878,6 +905,8 @@
);
} else if (item.itemType === 'footer') {
return <ThreadSettingsCategoryFooter type={item.categoryType} />;
+ } else if (item.itemType === 'avatar') {
+ return <ThreadSettingsAvatar threadInfo={item.threadInfo} />;
} else if (item.itemType === 'name') {
return (
<ThreadSettingsName
@@ -1189,6 +1218,8 @@
const overlayContext = React.useContext(OverlayContext);
const keyboardState = React.useContext(KeyboardContext);
const { canPromoteSidebar } = usePromoteSidebar(threadInfo);
+ const shouldRenderAvatars = useShouldRenderAvatars();
+
return (
<ThreadSettings
{...props}
@@ -1203,6 +1234,7 @@
overlayContext={overlayContext}
keyboardState={keyboardState}
canPromoteSidebar={canPromoteSidebar}
+ shouldRenderAvatars={shouldRenderAvatars}
/>
);
});

File Metadata

Mime Type
text/plain
Expires
Fri, Nov 29, 8:23 PM (19 h, 40 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2595130
Default Alt Text
D7135.id24214.diff (4 KB)

Event Timeline