Newer
Older
import React from 'react';
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';
import { isEmpty } from 'lodash';
import { useTranslation } from 'react-i18next';
import CommentItemList from './CommentItemList';
import CommentReply from './CommentReply';
cursor: pointer;
transition: box-shadow 0.2s;
/* transition: background-color 0.2s; */
&:hover {
/* background: white; */
const inactiveButton = css`
cursor: not-allowed;
opacity: 0.3;
`;
border-radius: 3px;
box-sizing: border-box;
display: flex;
flex-direction: column;
const Head = styled.div`
display: flex;
justify-content: flex-end;
padding: 8px 16px 0;
border-top: ${props => !props.isNewComment && `3px solid #E1EBFF`};
const CommentBox = props => {
const {
active,
className,
commentId,
commentData,
// send signal to make this comment active
const onClickWrapper = () => {
if (active) return;
onClickBox(commentId);
};
if (!active && (!commentData || commentData.length === 0)) return null;
<Wrapper active={active} className={className} onClick={onClickWrapper}>
<Resolve
isReadOnly={isReadOnly}
onClick={() => {
if (!isReadOnly) return onClickResolve(commentId);
return false;
}}
>
{!isEmpty(i18n) && i18n.exists(`Wax.Comments.Resolve`)
? t(`Wax.Comments.Resolve`)
: 'Resolve'}
<CommentItemList
active={active}
data={commentData}
title={title}
users={users}
/>
CommentBox.propTypes = {
/** Whether this is the current active comment */
active: PropTypes.bool,
/** List of objects containing data for comment items */
commentData: PropTypes.arrayOf(
PropTypes.shape({
content: PropTypes.string.isRequired,
displayName: PropTypes.string.isRequired,
}),
),
/** This comment's id in the document */
commentId: PropTypes.string.isRequired,
/** Function to run when box is clicked on.
* Use this to make comment active on click (it passes on the comment id).
* eg. `onClickBox = commentId => doSth(commentId)`
* Will only run if comment is not active already.
*/
onClickBox: PropTypes.func.isRequired,
/** Function to run when "post" button is clicked to send reply */
onClickPost: PropTypes.func.isRequired,
/** Function to run when "resolve" button is clicked */
onClickResolve: PropTypes.func.isRequired,
/** Function to run when text area loses focus */
onTextAreaBlur: PropTypes.func.isRequired,
title: PropTypes.string,
showTitle: PropTypes.bool.isRequired,
users: PropTypes.arrayOf(
PropTypes.shape({
displayName: PropTypes.string.isRequired,
userId: PropTypes.string.isRequired,
currentUser: PropTypes.bool,
}),
),
CommentBox.defaultProps = {
active: false,
commentData: [],