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 { getAvatarForUser } from 'lib/shared/avatar-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 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 Avatar from '../components/avatar.react.js'; | |||||
| import { type InputState, InputStateContext } from '../input/input-state.js'; | import { type InputState, InputStateContext } from '../input/input-state.js'; | ||||
| import { tooltipPositions, useMessageTooltip } from '../utils/tooltip-utils.js'; | import { tooltipPositions, useMessageTooltip } from '../utils/tooltip-utils.js'; | ||||
| const availableTooltipPositionsForViewerMessage = [ | const availableTooltipPositionsForViewerMessage = [ | ||||
| tooltipPositions.LEFT, | tooltipPositions.LEFT, | ||||
| tooltipPositions.LEFT_BOTTOM, | tooltipPositions.LEFT_BOTTOM, | ||||
| tooltipPositions.LEFT_TOP, | tooltipPositions.LEFT_TOP, | ||||
| tooltipPositions.RIGHT, | tooltipPositions.RIGHT, | ||||
| ▲ Show 20 Lines • Show All 105 Lines • ▼ Show 20 Lines | ) { | ||||
| threadInfo={item.threadCreatedFromMessage} | threadInfo={item.threadCreatedFromMessage} | ||||
| reactions={item.reactions} | reactions={item.reactions} | ||||
| positioning={positioning} | positioning={positioning} | ||||
| /> | /> | ||||
| </div> | </div> | ||||
| ); | ); | ||||
| } | } | ||||
| let avatar; | |||||
| if (!isViewer && item.endsCluster) { | |||||
| const avatarInfo = getAvatarForUser(creator); | |||||
| avatar = <Avatar avatarInfo={avatarInfo} size="large" />; | |||||
| } | |||||
| return ( | return ( | ||||
| <React.Fragment> | <React.Fragment> | ||||
| {authorName} | {authorName} | ||||
| <div className={contentClassName}> | <div className={contentClassName}> | ||||
| {avatar} | |||||
| <div | <div | ||||
| className={messageBoxContainerClassName} | className={messageBoxContainerClassName} | ||||
| onMouseEnter={this.props.onMouseEnter} | onMouseEnter={this.props.onMouseEnter} | ||||
| onMouseLeave={this.props.onMouseLeave} | onMouseLeave={this.props.onMouseLeave} | ||||
| > | > | ||||
| <div className={messageBoxClassName} style={messageBoxStyle}> | <div className={messageBoxClassName} style={messageBoxStyle}> | ||||
| {this.props.children} | {this.props.children} | ||||
| </div> | </div> | ||||
| ▲ Show 20 Lines • Show All 47 Lines • Show Last 20 Lines | |||||