box-ui-elements-mlh
Version:
229 lines (213 loc) • 9.9 kB
JavaScript
// @flow
import * as React from 'react';
import classNames from 'classnames';
import noop from 'lodash/noop';
import { FormattedMessage } from 'react-intl';
import TetherComponent from 'react-tether';
import Trash16 from '../../../../icon/line/Trash16';
import Pencil16 from '../../../../icon/line/Pencil16';
import Avatar from '../Avatar';
import Media from '../../../../components/media';
import { MenuItem } from '../../../../components/menu';
import { ACTIVITY_TARGETS } from '../../../common/interactionTargets';
import DeleteConfirmation from '../common/delete-confirmation';
import ActivityTimestamp from '../common/activity-timestamp';
import UserLink from '../common/user-link';
import ActivityCard from '../ActivityCard';
import ActivityError from '../common/activity-error';
import ActivityMessage from '../common/activity-message';
import CommentForm from '../comment-form';
import { PLACEHOLDER_USER } from '../../../../constants';
import messages from './messages';
import type { GetAvatarUrlCallback, GetProfileUrlCallback } from '../../../common/flowTypes';
import type { Translations } from '../../flowTypes';
import type { SelectorItems, User } from '../../../../common/types/core';
import type { BoxCommentPermission, ActionItemError } from '../../../../common/types/feed';
import './Comment.scss';
type Props = {
created_at: string | number,
created_by: User,
currentUser?: User,
error?: ActionItemError,
getAvatarUrl: GetAvatarUrlCallback,
getMentionWithQuery?: Function,
getUserProfileUrl?: GetProfileUrlCallback,
id: string,
isDisabled?: boolean,
isPending?: boolean,
mentionSelectorContacts?: SelectorItems<>,
modified_at?: string | number,
onDelete: ({ id: string, permissions?: BoxCommentPermission }) => any,
onEdit: (id: string, text: string, hasMention: boolean, permissions?: BoxCommentPermission) => any,
permissions?: BoxCommentPermission,
tagged_message: string,
translatedTaggedMessage?: string,
translations?: Translations,
};
type State = {
isConfirmingDelete: boolean,
isEditing: boolean,
isInputOpen: boolean,
};
class Comment extends React.Component<Props, State> {
static defaultProps = {
onDelete: noop,
onEdit: noop,
};
state = {
isConfirmingDelete: false,
isEditing: false,
isInputOpen: false,
};
handleDeleteConfirm = (): void => {
const { id, onDelete, permissions } = this.props;
onDelete({ id, permissions });
};
handleDeleteCancel = (): void => {
this.setState({ isConfirmingDelete: false });
};
handleDeleteClick = () => {
this.setState({ isConfirmingDelete: true });
};
handleEditClick = (): void => {
this.setState({ isEditing: true, isInputOpen: true });
};
commentFormFocusHandler = (): void => this.setState({ isInputOpen: true });
commentFormCancelHandler = (): void => this.setState({ isInputOpen: false, isEditing: false });
commentFormSubmitHandler = (): void => this.setState({ isInputOpen: false, isEditing: false });
handleUpdate = ({ id, text, hasMention }: { hasMention: boolean, id: string, text: string }): void => {
const { onEdit, permissions } = this.props;
onEdit(id, text, hasMention, permissions);
this.commentFormSubmitHandler();
};
render(): React.Node {
const {
created_by,
created_at,
permissions = {},
id,
isPending,
error,
tagged_message = '',
translatedTaggedMessage,
translations,
currentUser,
isDisabled,
getAvatarUrl,
getUserProfileUrl,
getMentionWithQuery,
mentionSelectorContacts,
onEdit,
} = this.props;
const { isConfirmingDelete, isEditing, isInputOpen } = this.state;
const createdAtTimestamp = new Date(created_at).getTime();
const createdByUser = created_by || PLACEHOLDER_USER;
const canEdit = onEdit !== noop && permissions.can_edit;
const canDelete = permissions.can_delete;
const isMenuVisible = (canDelete || canEdit) && !isPending;
return (
<ActivityCard className="bcs-Comment">
<Media
className={classNames('bcs-Comment-media', {
'bcs-is-pending': isPending || error,
})}
>
<Media.Figure>
<Avatar getAvatarUrl={getAvatarUrl} user={createdByUser} />
</Media.Figure>
<Media.Body>
{isMenuVisible && (
<TetherComponent
attachment="top right"
className="bcs-Comment-deleteConfirmationModal"
constraints={[{ to: 'scrollParent', attachment: 'together' }]}
targetAttachment="bottom right"
>
<Media.Menu
isDisabled={isConfirmingDelete}
data-testid="comment-actions-menu"
menuProps={{
'data-resin-component': ACTIVITY_TARGETS.COMMENT_OPTIONS,
}}
>
{canEdit && (
<MenuItem
data-resin-target={ACTIVITY_TARGETS.COMMENT_OPTIONS_EDIT}
data-testid="edit-comment"
onClick={this.handleEditClick}
>
<Pencil16 />
<FormattedMessage {...messages.commentEditMenuItem} />
</MenuItem>
)}
{canDelete && (
<MenuItem
data-resin-target={ACTIVITY_TARGETS.COMMENT_OPTIONS_DELETE}
data-testid="delete-comment"
onClick={this.handleDeleteClick}
>
<Trash16 />
<FormattedMessage {...messages.commentDeleteMenuItem} />
</MenuItem>
)}
</Media.Menu>
{isConfirmingDelete && (
<DeleteConfirmation
data-resin-component={ACTIVITY_TARGETS.COMMENT_OPTIONS}
isOpen={isConfirmingDelete}
message={messages.commentDeletePrompt}
onDeleteCancel={this.handleDeleteCancel}
onDeleteConfirm={this.handleDeleteConfirm}
/>
)}
</TetherComponent>
)}
<div className="bcs-Comment-headline">
<UserLink
data-resin-target={ACTIVITY_TARGETS.PROFILE}
id={createdByUser.id}
name={createdByUser.name}
getUserProfileUrl={getUserProfileUrl}
/>
</div>
<div>
<ActivityTimestamp date={createdAtTimestamp} />
</div>
{isEditing ? (
<CommentForm
isDisabled={isDisabled}
className={classNames('bcs-Comment-editor', {
'bcs-is-disabled': isDisabled,
})}
updateComment={this.handleUpdate}
isOpen={isInputOpen}
// $FlowFixMe
user={currentUser}
onCancel={this.commentFormCancelHandler}
onFocus={this.commentFormFocusHandler}
isEditing={isEditing}
entityId={id}
tagged_message={tagged_message}
getAvatarUrl={getAvatarUrl}
mentionSelectorContacts={mentionSelectorContacts}
getMentionWithQuery={getMentionWithQuery}
/>
) : (
<ActivityMessage
id={id}
tagged_message={tagged_message}
translatedTaggedMessage={translatedTaggedMessage}
{...translations}
translationFailed={error ? true : null}
getUserProfileUrl={getUserProfileUrl}
/>
)}
</Media.Body>
</Media>
{/* $FlowFixMe */}
{error ? <ActivityError {...error} /> : null}
</ActivityCard>
);
}
}
export default Comment;