Changeset View
Changeset View
Standalone 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 ( | return ( | ||||
<div className={containerClasses}> | <div className={labelClasses}> | ||||
{sidebarItem} | <span>{label}</span> | ||||
{reactionsList} | |||||
</div> | </div> | ||||
); | ); | ||||
}, [label, labelClasses]); | |||||
const components = [sidebarItem, reactionsList]; | |||||
if (isLeft) { | |||||
components.unshift(messageLabel); | |||||
} else { | |||||
components.push(messageLabel); | |||||
} | |||||
return <div className={containerClasses}>{components}</div>; | |||||
} | } | ||||
export default InlineEngagement; | export default InlineEngagement; |