Differential D7017 Diff 24269 web/chat/inline-engagement.react.js

Changeset View

Standalone View

web/chat/inline-engagement.react.js

Show All 12 Lines
import CommIcon from '../CommIcon.react.js';		import CommIcon from '../CommIcon.react.js';
import MessageReactionsModal from '../modals/chat/message-reactions-modal.react.js';		import MessageReactionsModal from '../modals/chat/message-reactions-modal.react.js';
import { useOnClickThread } from '../selectors/thread-selectors.js';		import { useOnClickThread } from '../selectors/thread-selectors.js';

type Props = {		type Props = {
+threadInfo: ?ThreadInfo,		+threadInfo: ?ThreadInfo,
+reactions?: ReactionInfo,		+reactions?: ReactionInfo,
+positioning: 'left' \| 'center' \| 'right',		+positioning: 'left' \| 'center' \| 'right',
		+label?: ?string,
};		};
function InlineEngagement(props: Props): React.Node {		function InlineEngagement(props: Props): React.Node {
const { threadInfo, reactions, positioning } = props;		const { threadInfo, reactions, positioning, label } = props;
const { pushModal, popModal } = useModalContext();		const { pushModal, popModal } = useModalContext();
const repliesText = useInlineEngagementText(threadInfo);		const repliesText = useInlineEngagementText(threadInfo);

const containerClasses = classNames([		const containerClasses = classNames([
css.inlineEngagementContainer,		css.inlineEngagementContainer,
{		{
[css.leftContainer]: positioning === 'left',		[css.leftContainer]: positioning === 'left',
[css.centerContainer]: positioning === 'center',		[css.centerContainer]: positioning === 'center',
▲ Show 20 Lines • Show All 50 Lines • ▼ Show 20 Lines	const reactionsList = React.useMemo(() => {

return (		return (
<a onClick={onClickReactions} className={reactionsContainerClasses}>		<a onClick={onClickReactions} className={reactionsContainerClasses}>
{reactionText}		{reactionText}
</a>		</a>
);		);
}, [reactions, onClickReactions, reactionsContainerClasses]);		}, [reactions, onClickReactions, reactionsContainerClasses]);

		const isLeft = positioning === 'left';
		const labelClasses = classNames({
		[css.messageLabel]: true,
		[css.messageLabelLeft]: isLeft,
		[css.messageLabelRight]: !isLeft,
		[css.onlyMessageLabel]: !sidebarItem && !reactionsList,
		});
		const messageLabel = React.useMemo(() => {
		if (!label) {
		return null;
		}
		return (
		<div className={labelClasses}>
		<span>{label}</span>
		</div>
		);
		}, [label, labelClasses]);

		const components = [sidebarItem, reactionsList];
		if (isLeft) {
		components.unshift(messageLabel);
		} else {
		components.push(messageLabel);
		}
return (		return (
<div className={containerClasses}>		<div className={containerClasses}>
{sidebarItem}		{components.map((component, index) => (
		ashoatUnsubmitted Done Inline Actions Can we please avoid inline logic in JSX? JSX should be a "leaf node" in the AST ashoat: Can we please avoid inline logic in JSX? JSX should be a "leaf node" in the AST
{reactionsList}		<React.Fragment key={index}>{component}</React.Fragment>
		))}
</div>		</div>
);		);
}		}

export default InlineEngagement;		export default InlineEngagement;