Differential D7067 Diff 24033 native/chat/message-header.react.js

Changeset View

Standalone View

native/chat/message-header.react.js

	// @flow			// @flow

	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 } 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 { 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';

	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 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();

	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) {
				style.push({ marginLeft: 12 + avatarOffset });
				} else {
				style.push({ marginLeft: 12 });
				}

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

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

	Show All 20 Lines
	const authorNameHeight = 25;			const authorNameHeight = 25;

	const unboundStyles = {			const unboundStyles = {
	authorName: {			authorName: {
	bottom: 0,			bottom: 0,
	color: 'listBackgroundSecondaryLabel',			color: 'listBackgroundSecondaryLabel',
	fontSize: 14,			fontSize: 14,
	height: authorNameHeight,			height: authorNameHeight,
	marginLeft: 12,
	marginRight: 7,			marginRight: 7,
	paddingHorizontal: 12,			paddingHorizontal: 12,
	paddingVertical: 4,			paddingVertical: 4,
	},			},
	modal: {			modal: {
	// high contrast framed against OverlayNavigator-dimmed background			// high contrast framed against OverlayNavigator-dimmed background
	color: 'white',			color: 'white',
	},			},
	};			};

	export { MessageHeader, authorNameHeight };			export { MessageHeader, authorNameHeight };