diff --git a/web/chat/composed-message.react.js b/web/chat/composed-message.react.js index c71f31502..961604864 100644 --- a/web/chat/composed-message.react.js +++ b/web/chat/composed-message.react.js @@ -1,243 +1,242 @@ // @flow import classNames from 'classnames'; import * as React from 'react'; import { Circle as CircleIcon, CheckCircle as CheckCircleIcon, XCircle as XCircleIcon, } from 'react-feather'; import { type ChatMessageInfoItem } from 'lib/selectors/chat-selectors'; import { useSidebarExistsOrCanBeCreated } from 'lib/shared/thread-utils'; import { stringForUser } from 'lib/shared/user-utils'; import { assertComposableMessageType } from 'lib/types/message-types'; import { type ThreadInfo } from 'lib/types/thread-types'; import { type InputState, InputStateContext } from '../input/input-state'; import css from './chat-message-list.css'; import FailedSend from './failed-send.react'; import { InlineSidebar } from './inline-sidebar.react'; import MessageActionButtons from './message-action-buttons'; import { type OnMessagePositionWithContainerInfo, type MessagePositionInfo, } from './position-types'; import { tooltipPositions } from './tooltip-utils'; const availableTooltipPositionsForViewerMessage = [ tooltipPositions.TOP_RIGHT, tooltipPositions.LEFT, ]; const availableTooltipPositionsForNonViewerMessage = [ tooltipPositions.TOP_LEFT, tooltipPositions.RIGHT, ]; type BaseProps = { +item: ChatMessageInfoItem, +threadInfo: ThreadInfo, +sendFailed: boolean, +setMouseOverMessagePosition: ( messagePositionInfo: MessagePositionInfo, ) => void, +mouseOverMessagePosition?: ?OnMessagePositionWithContainerInfo, +canReply: boolean, +children: React.Node, +fixedWidth?: boolean, +borderRadius: number, }; type BaseConfig = React.Config; type Props = { ...BaseProps, // Redux state +sidebarExistsOrCanBeCreated: boolean, // withInputState +inputState: ?InputState, }; class ComposedMessage extends React.PureComponent { static defaultProps: { +borderRadius: number } = { borderRadius: 8, }; render(): React.Node { assertComposableMessageType(this.props.item.messageInfo.type); const { borderRadius, item, threadInfo } = this.props; const { id, creator } = item.messageInfo; const threadColor = threadInfo.color; const { isViewer } = creator; const contentClassName = classNames({ [css.content]: true, [css.viewerContent]: isViewer, [css.nonViewerContent]: !isViewer, }); const messageBoxContainerClassName = classNames({ [css.messageBoxContainer]: true, [css.fixedWidthMessageBoxContainer]: this.props.fixedWidth, }); const messageBoxClassName = classNames({ [css.messageBox]: true, [css.fixedWidthMessageBox]: this.props.fixedWidth, }); const messageBoxStyle = { borderTopRightRadius: isViewer && !item.startsCluster ? 0 : borderRadius, borderBottomRightRadius: isViewer && !item.endsCluster ? 0 : borderRadius, borderTopLeftRadius: !isViewer && !item.startsCluster ? 0 : borderRadius, borderBottomLeftRadius: !isViewer && !item.endsCluster ? 0 : borderRadius, }; let authorName = null; if (!isViewer && item.startsCluster) { authorName = ( {stringForUser(creator)} ); } let deliveryIcon = null; let failedSendInfo = null; if (isViewer) { let deliveryIconSpan; let deliveryIconColor = threadColor; if (id !== null && id !== undefined) { deliveryIconSpan = ; } else if (this.props.sendFailed) { deliveryIconSpan = ; deliveryIconColor = 'FF0000'; failedSendInfo = ; } else { deliveryIconSpan = ; } deliveryIcon = (
{deliveryIconSpan}
); } let messageActionButtons; if ( this.props.mouseOverMessagePosition && this.props.mouseOverMessagePosition.item.messageInfo.id === id && (this.props.sidebarExistsOrCanBeCreated || this.props.canReply) ) { const availableTooltipPositions = isViewer ? availableTooltipPositionsForViewerMessage : availableTooltipPositionsForNonViewerMessage; messageActionButtons = ( ); } let messageActionLinks; if (messageActionButtons) { const actionLinksClassName = classNames({ [css.messageActionActiveArea]: true, [css.viewerMessageActionActiveArea]: isViewer, [css.nonViewerMessageActiveArea]: !isViewer, }); messageActionLinks = (
{messageActionButtons}
); } const viewerActionLinks = isViewer ? messageActionLinks : null; const nonViewerActionLinks = !isViewer ? messageActionLinks : null; let inlineSidebar = null; if (item.threadCreatedFromMessage) { const positioning = isViewer ? 'right' : 'left'; inlineSidebar = (
); } return ( {authorName}
{viewerActionLinks}
{this.props.children}
{nonViewerActionLinks}
{deliveryIcon}
{failedSendInfo} {inlineSidebar}
); } onMouseEnter: (event: SyntheticEvent) => void = event => { const { item } = this.props; const rect = event.currentTarget.getBoundingClientRect(); const { top, bottom, left, right, height, width } = rect; const messagePosition = { top, bottom, left, right, height, width }; this.props.setMouseOverMessagePosition({ type: 'on', item, messagePosition, }); }; onMouseLeave: () => void = () => { const { item } = this.props; this.props.setMouseOverMessagePosition({ type: 'off', item }); }; } type ConnectedConfig = React.Config< BaseProps, typeof ComposedMessage.defaultProps, >; const ConnectedComposedMessage: React.ComponentType = React.memo( function ConnectedComposedMessage(props) { const sidebarExistsOrCanBeCreated = useSidebarExistsOrCanBeCreated( props.threadInfo, props.item, ); const inputState = React.useContext(InputStateContext); return ( ); }, ); export default ConnectedComposedMessage; diff --git a/web/chat/message-action-buttons.js b/web/chat/message-action-buttons.js index ce527a680..c6f2644c4 100644 --- a/web/chat/message-action-buttons.js +++ b/web/chat/message-action-buttons.js @@ -1,223 +1,227 @@ // @flow import classNames from 'classnames'; import invariant from 'invariant'; import * as React from 'react'; import type { ChatMessageInfoItem } from 'lib/selectors/chat-selectors'; +import { useSidebarExistsOrCanBeCreated } from 'lib/shared/thread-utils'; import type { ThreadInfo } from 'lib/types/thread-types'; import type { InputState } from '../input/input-state.js'; import { useOnClickThread, useOnClickPendingSidebar, } from '../selectors/nav-selectors'; import SWMansionIcon from '../SWMansionIcon.react'; import css from './message-action-buttons.css'; import MessageReplyButton from './message-reply-button.react'; import type { ItemAndContainerPositionInfo, MessagePositionInfo, OnMessagePositionWithContainerInfo, PositionInfo, } from './position-types'; import { tooltipPositions, type TooltipPosition } from './tooltip-utils'; import { TooltipMenu, type TooltipStyle, TooltipTextItem, } from './tooltip.react'; const messageActionIconExcessVerticalWhitespace = 10; const openSidebarText = 'Go to sidebar'; const createSidebarText = 'Create sidebar'; type MessageActionButtonsProps = { +threadInfo: ThreadInfo, +item: ChatMessageInfoItem, +containerPosition: PositionInfo, +availableTooltipPositions: $ReadOnlyArray, +setMouseOverMessagePosition?: ( messagePositionInfo: MessagePositionInfo, ) => void, +mouseOverMessagePosition?: OnMessagePositionWithContainerInfo, +canReply?: boolean, +inputState?: ?InputState, - +sidebarExistsOrCanBeCreated?: boolean, }; function MessageActionButtons(props: MessageActionButtonsProps): React.Node { const { threadInfo, item, containerPosition, availableTooltipPositions, setMouseOverMessagePosition, mouseOverMessagePosition, canReply, inputState, - sidebarExistsOrCanBeCreated, } = props; const [tooltipVisible, setTooltipVisible] = React.useState(false); const [pointingTo, setPointingTo] = React.useState(); const toggleTooltip = React.useCallback( (event: SyntheticEvent) => { setTooltipVisible(!tooltipVisible); if (tooltipVisible) { return; } const rect = event.currentTarget.getBoundingClientRect(); const { top, bottom, left, right, width, height } = rect; const iconPosition: ItemAndContainerPositionInfo = { containerPosition, itemPosition: { top: top - containerPosition.top + messageActionIconExcessVerticalWhitespace, bottom: bottom - containerPosition.top - messageActionIconExcessVerticalWhitespace, left: left - containerPosition.left, right: right - containerPosition.left, width, height: height - messageActionIconExcessVerticalWhitespace * 2, }, }; setPointingTo(iconPosition); }, [containerPosition, tooltipVisible], ); const hideTooltip = React.useCallback(() => { setTooltipVisible(false); }, []); const { threadCreatedFromMessage, messageInfo } = item; const onThreadOpen = useOnClickThread(threadCreatedFromMessage); const onPendingSidebarOpen = useOnClickPendingSidebar( messageInfo, threadInfo, ); const onSidebarButtonClick = React.useCallback( (event: SyntheticEvent) => { if (threadCreatedFromMessage) { onThreadOpen(event); } else { onPendingSidebarOpen(event); } }, [onPendingSidebarOpen, onThreadOpen, threadCreatedFromMessage], ); const onReplyButtonClick = React.useCallback(() => { invariant( setMouseOverMessagePosition, 'setMouseOverMessagePosition should be set if replyButton exists', ); setMouseOverMessagePosition({ type: 'off', item: item }); }, [item, setMouseOverMessagePosition]); const sidebarTooltipButtonText = threadCreatedFromMessage ? openSidebarText : createSidebarText; let tooltipMenu = null; if (pointingTo && tooltipVisible) { tooltipMenu = ( ); } let replyButton; if (canReply) { invariant(inputState, 'inputState must be set if replyButton exists'); invariant( mouseOverMessagePosition, 'mouseOverMessagePosition must be set if replyButton exists', ); replyButton = ( ); } + const sidebarExistsOrCanBeCreated = useSidebarExistsOrCanBeCreated( + threadInfo, + item, + ); + let sidebarButton; if (sidebarExistsOrCanBeCreated) { sidebarButton = (
{tooltipMenu}
); } const { isViewer } = messageInfo.creator; const messageActionButtonsContainer = classNames({ [css.messageActionButtons]: true, [css.messageActionButtonsViewer]: isViewer, [css.messageActionButtonsNonViewer]: !isViewer, }); return (
{sidebarButton} {replyButton}
); } function getMessageActionTooltipStyle( tooltipPosition: TooltipPosition, ): TooltipStyle { let className; if (tooltipPosition === tooltipPositions.TOP_RIGHT) { className = classNames( css.messageActionTopRightTooltip, css.messageActionExtraAreaTop, css.messageActionExtraAreaTopRight, ); } else if (tooltipPosition === tooltipPositions.TOP_LEFT) { className = classNames( css.messageActionTopLeftTooltip, css.messageActionExtraAreaTop, css.messageActionExtraAreaTopLeft, ); } else if (tooltipPosition === tooltipPositions.RIGHT) { className = classNames( css.messageActionRightTooltip, css.messageActionExtraArea, css.messageActionExtraAreaRight, ); } else if (tooltipPosition === tooltipPositions.LEFT) { className = classNames( css.messageActionLeftTooltip, css.messageActionExtraArea, css.messageActionExtraAreaLeft, ); } invariant(className, `${tooltipPosition} is not valid for message tooltip`); return { className }; } export default MessageActionButtons;