Differential D8098 Diff 27659 native/chat/message-header.react.js

Changeset View

Standalone View

native/chat/message-header.react.js

	// @flow			// @flow

				import { useRoute } from '@react-navigation/native';
	import * as React from 'react';			import * as React from 'react';
	import { View } from 'react-native';			import { View } from 'react-native';

	import { useStringForUser } from 'lib/hooks/ens-cache.js';			import { useStringForUser } from 'lib/hooks/ens-cache.js';

	import { clusterEndHeight, avatarOffset } from './chat-constants.js';			import { clusterEndHeight, avatarOffset } from './chat-constants.js';
	import type { DisplayType } from './timestamp.react.js';			import type { DisplayType } from './timestamp.react.js';
	import { Timestamp, timestampHeight } from './timestamp.react.js';			import { Timestamp, timestampHeight } from './timestamp.react.js';
	import { SingleLine } from '../components/single-line.react.js';			import { SingleLine } from '../components/single-line.react.js';
				import { MessageListRouteName } from '../navigation/route-names.js';
	import { useStyles } from '../themes/colors.js';			import { useStyles } from '../themes/colors.js';
	import type { ChatMessageInfoItemWithHeight } from '../types/chat-types.js';			import type { ChatMessageInfoItemWithHeight } from '../types/chat-types.js';
	import { useShouldRenderAvatars } from '../utils/avatar-utils.js';			import { useShouldRenderAvatars } from '../utils/avatar-utils.js';

	type Props = {			type Props = {
	+item: ChatMessageInfoItemWithHeight,			+item: ChatMessageInfoItemWithHeight,
	+focused: boolean,			+focused: boolean,
	+display: DisplayType,			+display: DisplayType,
	};			};
	function MessageHeader(props: Props): React.Node {			function MessageHeader(props: Props): React.Node {
	const styles = useStyles(unboundStyles);			const styles = useStyles(unboundStyles);
	const { item, focused, display } = props;			const { item, focused, display } = props;
	const { creator, time } = item.messageInfo;			const { creator, time } = item.messageInfo;
	const { isViewer } = creator;			const { isViewer } = creator;
				const route = useRoute();
	const modalDisplay = display === 'modal';			const modalDisplay = display === 'modal';

	const shouldShowUsername = !isViewer && (modalDisplay \|\| item.startsCluster);			const shouldShowUsername = !isViewer && (modalDisplay \|\| item.startsCluster);
	const stringForUser = useStringForUser(shouldShowUsername ? creator : null);			const stringForUser = useStringForUser(shouldShowUsername ? creator : null);

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

	let authorName = null;			let authorName = null;
	if (stringForUser) {			if (stringForUser) {
	const style = [styles.authorName];			const style = [styles.authorName];
	if (modalDisplay) {			if (modalDisplay) {
	style.push(styles.modal);			style.push(styles.modal);
	}			}

	if (shouldRenderAvatars) {			if (shouldRenderAvatars) {
	style.push({ marginLeft: 12 + avatarOffset });			style.push({ marginLeft: 12 + avatarOffset });
	} else {			} else {
	style.push({ marginLeft: 12 });			style.push({ marginLeft: 12 });
	}			}

	authorName = <SingleLine style={style}>{stringForUser}</SingleLine>;			authorName = <SingleLine style={style}>{stringForUser}</SingleLine>;
	}			}

				// We only want to render the top-placed timestamp for a message if it's
				// rendered in the message list, and not any separate screens (i.e.
				// the MessageResultsScreen).
				const presentedFromMessageList =
				typeof route.params?.presentedFrom === 'string' &&
				route.params.presentedFrom.startsWith(MessageListRouteName);

				const messageInMessageList =
				route.name === MessageListRouteName \|\| presentedFromMessageList;

	const timestamp =			const timestamp =
	modalDisplay \|\| item.startsConversation ? (			messageInMessageList && (modalDisplay \|\| item.startsConversation) ? (
	<Timestamp time={time} display={display} />			<Timestamp time={time} display={display} />
	) : null;			) : null;

	let style = null;			let style = null;
	if (focused && !modalDisplay) {			if (focused && !modalDisplay) {
	let topMargin = 0;			let topMargin = 0;
	if (!item.startsCluster && !item.messageInfo.creator.isViewer) {			if (!item.startsCluster && !item.messageInfo.creator.isViewer) {
	topMargin += authorNameHeight + clusterEndHeight;			topMargin += authorNameHeight + clusterEndHeight;
	Show All 34 Lines