CommentReply.js

/* eslint-disable react/prop-types */
import React, { useState, useRef, useEffect } from 'react';
import PropTypes from 'prop-types';
import styled, { css } from 'styled-components';
import { isEmpty } from 'lodash';
import { useTranslation } from 'react-i18next';
import { grid, th, override } from '@pubsweet/ui-toolkit';
import { useOnClickOutside } from 'wax-prosemirror-core';
import Mentions from 'rc-mentions';
import './mentions.css';

const Wrapper = styled.div`
  background: ${th('colorBackgroundHue')};
  display: flex;
  flex-direction: column;
  padding: ${grid(2)} ${grid(4)};
`;

const TextWrapper = styled.div``;

const CommentTitle = styled.input`
  background: ${th('colorBackgroundHue')};
  border: 3px solid ${th('colorBackgroundTabs')};
  font-family: ${th('fontWriting')};
  margin-bottom: 10px;
  position: relative;
  width: 100%;

  &:focus {
    outline: 1px solid ${th('colorPrimary')};
  }

  /* stylelint-disable-next-line order/properties-alphabetical-order */
  ${override('Wax.CommentTitle')}
`;

const ActionWrapper = styled.div`
  display: flex;
  justify-content: flex-start;
  margin-top: 4px;
`;

const primary = css`
  background: ${th('colorPrimary')};
  color: white;
`;

const Button = styled.button`
  border: 0;
  border-radius: 5px;
  color: gray;
  cursor: pointer;
  padding: ${grid(2)} ${grid(4)};
  
  /* stylelint-disable-next-line order/properties-alphabetical-order */
  ${props => props.primary && primary}
  ${props => props.disabled && `cursor: not-allowed; opacity: 0.3;`}

  ${override('Wax.CommentButtons')}
`;

const ButtonGroup = styled.div`
  > button:not(:last-of-type) {
    margin-right: 8px;
  }

  ${override('Wax.CommentButtonGroup')}
`;

const StyledMentions = styled(Mentions)`
  border: none;

  > textarea {
    background: ${th('colorBackgroundHue')};
    border: 3px solid ${th('colorBackgroundTabs')};
    font-family: ${th('fontWriting')};
    font-size: 14px;
    padding: 2px;

    &:focus {
      outline: 1px solid ${th('colorPrimary')};
    }
  }

  ${override('Wax.CommentTextArea')}
`;

const CommentReply = props => {
  const {
    className,
    isNewComment,
    onClickPost,
    isReadOnly,
    onTextAreaBlur,
    showTitle,
    usersMentionList,
  } = props;
  const { t, i18n } = useTranslation();
  const commentInput = useRef(null);
  const commentTitle = useRef(null);
  const [commentValue, setCommentValue] = useState('');
  const [title, setTitle] = useState('');
  const ref = useRef(null);

  useOnClickOutside(ref, onTextAreaBlur);

  useEffect(() => {
    setTimeout(() => {
      if (commentTitle.current && isNewComment) commentTitle.current.focus();
      if (!commentTitle.current && isNewComment) commentInput.current.focus();
    });
  }, []);

  const handleSubmit = e => {
    e.preventDefault();
    e.stopPropagation();
    onClickPost({ title, commentValue });
    setCommentValue('');
    setTitle('');
  };

  const resetValue = e => {
    e.preventDefault();
    setCommentValue('');
    setTitle('');
  };

  const { Option } = Mentions;

  return (
    <Wrapper className={className} ref={ref}>
      <TextWrapper>
        {isNewComment && showTitle && (
          <CommentTitle
            name="title"
            onChange={e => {
              setTitle(e.target.value);
            }}
            placeholder={`${
              !isEmpty(i18n) && i18n.exists(`Wax.Comments.Write title`)
                ? t(`Wax.Comments.Write title`)
                : 'Write title'
            }...`}
            ref={commentTitle}
            type="text"
            value={title}
          />
        )}

        <StyledMentions
          onChange={text => {
            setCommentValue(text);
          }}
          onPressEnter={e => {
            const mentionsOptionsEl = document.getElementsByClassName(
              'rc-mentions-measure',
            );

            if (
              e.keyCode === 13 &&
              !e.shiftKey &&
              mentionsOptionsEl.length === 0
            ) {
              e.preventDefault();
              if (commentValue) handleSubmit(e);
            }
          }}
          placeholder={
            isNewComment
              ? `${
                  !isEmpty(i18n) && i18n.exists(`Wax.Comments.Write comment`)
                    ? t(`Wax.Comments.Write comment`)
                    : 'Write comment'
                }...`
              : `${
                  !isEmpty(i18n) && i18n.exists(`Wax.Comments.Reply`)
                    ? t(`Wax.Comments.Reply`)
                    : 'Reply'
                }...`
          }
          ref={commentInput}
          rows="4"
          value={commentValue}
        >
          {usersMentionList &&
            usersMentionList.map(item => (
              <Option key={item.id} value={item.displayName}>
                {item.displayName}
              </Option>
            ))}
        </StyledMentions>
      </TextWrapper>

      <ActionWrapper>
        <ButtonGroup>
          <Button
            disabled={commentValue.length === 0 || isReadOnly}
            onClick={handleSubmit}
            primary
            type="submit"
          >
            {!isEmpty(i18n) && i18n.exists(`Wax.Comments.Post`)
              ? t(`Wax.Comments.Post`)
              : 'Post'}
          </Button>

          <Button disabled={commentValue.length === 0} onClick={resetValue}>
            {!isEmpty(i18n) && i18n.exists(`Wax.Comments.Cancel`)
              ? t(`Wax.Comments.Cancel`)
              : 'Cancel'}
          </Button>
        </ButtonGroup>
      </ActionWrapper>
    </Wrapper>
  );
};

CommentReply.propTypes = {
  isNewComment: PropTypes.bool.isRequired,
  onClickPost: PropTypes.func.isRequired,
  isReadOnly: PropTypes.bool.isRequired,
  onTextAreaBlur: PropTypes.func.isRequired,
  showTitle: PropTypes.bool.isRequired,
};

CommentReply.defaultProps = {};

export default CommentReply;