Differential D7210 Diff 24629 web/chat/thread-top-bar.react.js

Changeset View

Standalone View

web/chat/thread-top-bar.react.js

	// @flow			// @flow

	import * as React from 'react';			import * as React from 'react';

	import { threadIsPending } from 'lib/shared/thread-utils.js';			import { threadIsPending } from 'lib/shared/thread-utils.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 ThreadMenu from './thread-menu.react.js';			import ThreadMenu from './thread-menu.react.js';
	import css from './thread-top-bar.css';			import css from './thread-top-bar.css';
				import ThreadAvatar from '../components/thread-avatar.react.js';

	type ThreadTopBarProps = {			type ThreadTopBarProps = {
	+threadInfo: ThreadInfo,			+threadInfo: ThreadInfo,
	};			};
	function ThreadTopBar(props: ThreadTopBarProps): React.Node {			function ThreadTopBar(props: ThreadTopBarProps): React.Node {
	const { threadInfo } = props;			const { threadInfo } = props;
	const threadBackgroundColorStyle = React.useMemo(
	() => ({
	background: `#${threadInfo.color}`,
	}),
	[threadInfo.color],
	);

	let threadMenu = null;			let threadMenu = null;
	if (!threadIsPending(threadInfo.id)) {			if (!threadIsPending(threadInfo.id)) {
	threadMenu = <ThreadMenu threadInfo={threadInfo} />;			threadMenu = <ThreadMenu threadInfo={threadInfo} />;
	}			}

	const { uiName } = useResolvedThreadInfo(threadInfo);			const { uiName } = useResolvedThreadInfo(threadInfo);

	return (			return (
	<div className={css.topBarContainer}>			<div className={css.topBarContainer}>
	<div className={css.topBarThreadInfo}>			<div className={css.topBarThreadInfo}>
	<div			<ThreadAvatar size="small" threadInfo={threadInfo} />
	className={css.threadColorSquare}
	style={threadBackgroundColorStyle}
	/>
	<div className={css.threadTitle}>{uiName}</div>			<div className={css.threadTitle}>{uiName}</div>
	</div>			</div>
	{threadMenu}			{threadMenu}
	</div>			</div>
	);			);
	}			}

	export default ThreadTopBar;			export default ThreadTopBar;