diff --git a/web/chat/message.react.js b/web/chat/message.react.js --- a/web/chat/message.react.js +++ b/web/chat/message.react.js @@ -47,14 +47,7 @@ message = ; } else { invariant(item.robotext, "Flow can't handle our fancy types :("); - message = ( - - ); + message = ; } return (
diff --git a/web/chat/robotext-message.react.js b/web/chat/robotext-message.react.js --- a/web/chat/robotext-message.react.js +++ b/web/chat/robotext-message.react.js @@ -1,13 +1,11 @@ // @flow -import classNames from 'classnames'; import * as React from 'react'; import { useDispatch } from 'react-redux'; import { type RobotextChatMessageInfoItem } from 'lib/selectors/chat-selectors'; import { threadInfoSelector } from 'lib/selectors/thread-selectors'; import { splitRobotext, parseRobotextEntity } from 'lib/shared/message-utils'; -import { useSidebarExistsOrCanBeCreated } from 'lib/shared/thread-utils'; import type { Dispatch } from 'lib/types/redux-types'; import { type ThreadInfo } from 'lib/types/thread-types'; @@ -16,33 +14,26 @@ import { updateNavInfoActionType } from '../redux/action-types'; import { useSelector } from '../redux/redux-utils'; import { InlineSidebar } from './inline-sidebar.react'; -import MessageTooltip from './message-tooltip.react'; -import type { - MessagePositionInfo, - OnMessagePositionWithContainerInfo, -} from './position-types'; import css from './robotext-message.css'; -import { tooltipPositions } from './tooltip-utils'; +import { tooltipPositions, useMessageTooltip } from './tooltip-utils'; -// eslint-disable-next-line no-unused-vars const availableTooltipPositionsForRobotext = [ - tooltipPositions.RIGHT_TOP, - tooltipPositions.RIGHT, tooltipPositions.LEFT, + tooltipPositions.LEFT_TOP, + tooltipPositions.LEFT_BOTTOM, + tooltipPositions.RIGHT, + tooltipPositions.RIGHT_TOP, + tooltipPositions.RIGHT_BOTTOM, ]; type BaseProps = { +item: RobotextChatMessageInfoItem, +threadInfo: ThreadInfo, - +setMouseOverMessagePosition: ( - messagePositionInfo: MessagePositionInfo, - ) => void, - +mouseOverMessagePosition: ?OnMessagePositionWithContainerInfo, }; type Props = { ...BaseProps, - // Redux state - +sidebarExistsOrCanBeCreated: boolean, + +onMouseLeave: ?() => mixed, + +onMouseEnter: (event: SyntheticEvent) => mixed, }; class RobotextMessage extends React.PureComponent { render() { @@ -58,40 +49,14 @@ ); } - const { item, sidebarExistsOrCanBeCreated } = this.props; - const { id } = item.messageInfo; - let messageTooltip; - if ( - this.props.mouseOverMessagePosition && - this.props.mouseOverMessagePosition.item.messageInfo.id === id && - sidebarExistsOrCanBeCreated - ) { - messageTooltip = ; - } - - let messageTooltipLinks; - if (messageTooltip) { - messageTooltipLinks = ( -
- {messageTooltip} -
- ); - } - return (
{this.linkedRobotext()} - {messageTooltipLinks}
{inlineSidebar}
@@ -131,25 +96,7 @@ return textParts; } - - onMouseEnter = (event: SyntheticEvent) => { - 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 = () => { - const { item } = this.props; - this.props.setMouseOverMessagePosition({ type: 'off', item }); - }; } - type BaseInnerThreadEntityProps = { +id: string, +name: string, @@ -198,14 +145,19 @@ const ConnectedRobotextMessage: React.ComponentType = React.memo( function ConnectedRobotextMessage(props) { - const sidebarExistsOrCanBeCreated = useSidebarExistsOrCanBeCreated( - props.threadInfo, - props.item, - ); + const { item, threadInfo } = props; + + const { onMouseLeave, onMouseEnter } = useMessageTooltip({ + item, + threadInfo, + availablePositions: availableTooltipPositionsForRobotext, + }); + return ( ); },