Differential D7263 Diff 24516 native/chat/message-list-header-title.react.js

Changeset View

Standalone View

native/chat/message-list-header-title.react.js

// @flow		// @flow

import {		import {
HeaderTitle,		HeaderTitle,
type HeaderTitleInputProps,		type HeaderTitleInputProps,
} from '@react-navigation/elements';		} from '@react-navigation/elements';
import * as React from 'react';		import * as React from 'react';
import { View } from 'react-native';		import { View } from 'react-native';

import { useGetAvatarForThread } from 'lib/shared/avatar-utils.js';
import type { ClientAvatar } from 'lib/types/avatar-types.js';
import type { ThreadInfo } from 'lib/types/thread-types.js';		import type { ThreadInfo } from 'lib/types/thread-types.js';
import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';		import { useResolvedThreadInfo } from 'lib/utils/entity-helpers.js';
import { firstLine } from 'lib/utils/string-utils.js';		import { firstLine } from 'lib/utils/string-utils.js';

import type { ChatNavigationProp } from './chat.react.js';		import type { ChatNavigationProp } from './chat.react.js';
import Avatar from '../components/avatar.react.js';
import Button from '../components/button.react.js';		import Button from '../components/button.react.js';
		import ThreadAvatar from '../components/thread-avatar.react.js';
import { ThreadSettingsRouteName } from '../navigation/route-names.js';		import { ThreadSettingsRouteName } from '../navigation/route-names.js';
import { useStyles } from '../themes/colors.js';		import { useStyles } from '../themes/colors.js';
import { useShouldRenderAvatars } from '../utils/avatar-utils.js';		import { useShouldRenderAvatars } from '../utils/avatar-utils.js';

type BaseProps = {		type BaseProps = {
+threadInfo: ThreadInfo,		+threadInfo: ThreadInfo,
+navigate: $PropertyType<ChatNavigationProp<'MessageList'>, 'navigate'>,		+navigate: $PropertyType<ChatNavigationProp<'MessageList'>, 'navigate'>,
+isSearchEmpty: boolean,		+isSearchEmpty: boolean,
+areSettingsEnabled: boolean,		+areSettingsEnabled: boolean,
...HeaderTitleInputProps,		...HeaderTitleInputProps,
};		};
type Props = {		type Props = {
...BaseProps,		...BaseProps,
+styles: typeof unboundStyles,		+styles: typeof unboundStyles,
+title: string,		+title: string,
+avatarInfo: ClientAvatar,
+shouldRenderAvatars: boolean,		+shouldRenderAvatars: boolean,
};		};
class MessageListHeaderTitle extends React.PureComponent<Props> {		class MessageListHeaderTitle extends React.PureComponent<Props> {
render() {		render() {
const {		const {
threadInfo,		threadInfo,
navigate,		navigate,
isSearchEmpty,		isSearchEmpty,
areSettingsEnabled,		areSettingsEnabled,
styles,		styles,
title,		title,
avatarInfo,
shouldRenderAvatars,		shouldRenderAvatars,
...rest		...rest
} = this.props;		} = this.props;

let avatar;		let avatar;
if (!isSearchEmpty && shouldRenderAvatars) {		if (!isSearchEmpty && shouldRenderAvatars) {
avatar = (		avatar = (
<View style={styles.avatarContainer}>		<View style={styles.avatarContainer}>
<Avatar avatarInfo={avatarInfo} size="small" />		<ThreadAvatar size="small" threadInfo={threadInfo} />
</View>		</View>
);		);
}		}

return (		return (
<Button		<Button
onPress={this.onPress}		onPress={this.onPress}
style={styles.button}		style={styles.button}
Show All 36 Lines	const ConnectedMessageListHeaderTitle: React.ComponentType<BaseProps> =
React.memo<BaseProps>(function ConnectedMessageListHeaderTitle(		React.memo<BaseProps>(function ConnectedMessageListHeaderTitle(
props: BaseProps,		props: BaseProps,
) {		) {
const styles = useStyles(unboundStyles);		const styles = useStyles(unboundStyles);

const shouldRenderAvatars = useShouldRenderAvatars();		const shouldRenderAvatars = useShouldRenderAvatars();

const { uiName } = useResolvedThreadInfo(props.threadInfo);		const { uiName } = useResolvedThreadInfo(props.threadInfo);
const avatarInfo = useGetAvatarForThread(props.threadInfo);

const { isSearchEmpty } = props;		const { isSearchEmpty } = props;

const title = isSearchEmpty ? 'New Message' : uiName;		const title = isSearchEmpty ? 'New Message' : uiName;

return (		return (
<MessageListHeaderTitle		<MessageListHeaderTitle
{...props}		{...props}
styles={styles}		styles={styles}
title={title}		title={title}
avatarInfo={avatarInfo}
shouldRenderAvatars={shouldRenderAvatars}		shouldRenderAvatars={shouldRenderAvatars}
/>		/>
);		);
});		});

export default ConnectedMessageListHeaderTitle;		export default ConnectedMessageListHeaderTitle;