Changeset View
Changeset View
Standalone View
Standalone View
web/chat/composed-message.react.js
// @flow | // @flow | ||||
import classNames from 'classnames'; | import classNames from 'classnames'; | ||||
import * as React from 'react'; | import * as React from 'react'; | ||||
import { | import { | ||||
Circle as CircleIcon, | Circle as CircleIcon, | ||||
CheckCircle as CheckCircleIcon, | CheckCircle as CheckCircleIcon, | ||||
XCircle as XCircleIcon, | XCircle as XCircleIcon, | ||||
} from 'react-feather'; | } from 'react-feather'; | ||||
import { useStringForUser } from 'lib/hooks/ens-cache.js'; | import { useStringForUser } from 'lib/hooks/ens-cache.js'; | ||||
import { type ChatMessageInfoItem } from 'lib/selectors/chat-selectors.js'; | import { type ChatMessageInfoItem } from 'lib/selectors/chat-selectors.js'; | ||||
import { getMessageLabel } from 'lib/shared/edit-messages-utils.js'; | import { getMessageLabel } from 'lib/shared/edit-messages-utils.js'; | ||||
import { assertComposableMessageType } from 'lib/types/message-types.js'; | import { assertComposableMessageType } from 'lib/types/message-types.js'; | ||||
import { type ThreadInfo } from 'lib/types/thread-types.js'; | import { type ThreadInfo } from 'lib/types/thread-types.js'; | ||||
import { getComposedMessageID } from './chat-constants.js'; | |||||
import css from './chat-message-list.css'; | import css from './chat-message-list.css'; | ||||
import FailedSend from './failed-send.react.js'; | import FailedSend from './failed-send.react.js'; | ||||
import InlineEngagement from './inline-engagement.react.js'; | import InlineEngagement from './inline-engagement.react.js'; | ||||
import UserAvatar from '../avatars/user-avatar.react.js'; | import UserAvatar from '../avatars/user-avatar.react.js'; | ||||
import CommIcon from '../CommIcon.react.js'; | import CommIcon from '../CommIcon.react.js'; | ||||
import { type InputState, InputStateContext } from '../input/input-state.js'; | import { type InputState, InputStateContext } from '../input/input-state.js'; | ||||
import { useMessageTooltip } from '../utils/tooltip-action-utils.js'; | import { useMessageTooltip } from '../utils/tooltip-action-utils.js'; | ||||
import { tooltipPositions } from '../utils/tooltip-utils.js'; | import { tooltipPositions } from '../utils/tooltip-utils.js'; | ||||
export type ComposedMessageID = string; | |||||
const availableTooltipPositionsForViewerMessage = [ | const availableTooltipPositionsForViewerMessage = [ | ||||
tooltipPositions.LEFT, | tooltipPositions.LEFT, | ||||
tooltipPositions.LEFT_BOTTOM, | tooltipPositions.LEFT_BOTTOM, | ||||
tooltipPositions.LEFT_TOP, | tooltipPositions.LEFT_TOP, | ||||
tooltipPositions.RIGHT, | tooltipPositions.RIGHT, | ||||
tooltipPositions.RIGHT_BOTTOM, | tooltipPositions.RIGHT_BOTTOM, | ||||
tooltipPositions.RIGHT_TOP, | tooltipPositions.RIGHT_TOP, | ||||
tooltipPositions.BOTTOM, | tooltipPositions.BOTTOM, | ||||
▲ Show 20 Lines • Show All 149 Lines • ▼ Show 20 Lines | return ( | ||||
<div className={contentClassName}> | <div className={contentClassName}> | ||||
{avatar} | {avatar} | ||||
<div | <div | ||||
className={messageBoxContainerClassName} | className={messageBoxContainerClassName} | ||||
onMouseEnter={this.props.onMouseEnter} | onMouseEnter={this.props.onMouseEnter} | ||||
onMouseLeave={this.props.onMouseLeave} | onMouseLeave={this.props.onMouseLeave} | ||||
> | > | ||||
{pinIcon} | {pinIcon} | ||||
<div className={messageBoxClassName} style={messageBoxStyle}> | <div | ||||
className={messageBoxClassName} | |||||
style={messageBoxStyle} | |||||
id={getComposedMessageID(item.messageInfo)} | |||||
> | |||||
{this.props.children} | {this.props.children} | ||||
</div> | </div> | ||||
</div> | </div> | ||||
{deliveryIcon} | {deliveryIcon} | ||||
</div> | </div> | ||||
{failedSendInfo} | {failedSendInfo} | ||||
{inlineEngagement} | {inlineEngagement} | ||||
</React.Fragment> | </React.Fragment> | ||||
▲ Show 20 Lines • Show All 41 Lines • Show Last 20 Lines |