@seafile/comment-editor 0.0.1-alpha.0

package/dist/basic-sdk/comment/components/comment-item-wrapper.js

@@ -0,0 +1,368 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _slate = require("@seafile/slate");
+var _slateReact = require("@seafile/slate-react");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _dayjs = _interopRequireDefault(require("dayjs"));
+var _context = _interopRequireDefault(require("../../context"));
+var _constants = require("../constants");
+var _helper = require("../helper");
+var _useCommentContext = require("../hooks/comment-hooks/use-comment-context");
+var _commentDeletePopover = _interopRequireDefault(require("./comment-delete-popover"));
+var _commentItemContent = _interopRequireDefault(require("./comment-item-content"));
+var _commentItemReply = _interopRequireDefault(require("./comment-item-reply"));
+const CommentItemWrapper = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    container = 'sdoc-comment-list-container',
+    editor,
+    element,
+    isActive,
+    comment,
+    commentsDetail,
+    setIsClickedContextComment,
+    setIsCommentPanelVisible,
+    onSelectElement,
+    isGlobalComment,
+    commentDetailRef,
+    updateScrollPosition,
+    setCurrentCommentGroup,
+    onCommentClick,
+    isEmptyComment,
+    isCollapseCommentEditor,
+    isClickedContextComment = false,
+    closeComment
+  } = _ref;
+  const listRef = (0, _react.useRef)(null);
+  const {
+    dispatch
+  } = (0, _useCommentContext.useCommentContext)();
+  const scrollRef = (0, _react.useRef)(document.querySelector('.sdoc-scroll-container'));
+  const [isShowDeletePopover, setIsShowDeletePopover] = (0, _react.useState)(false);
+  const commentOpToolsId = `commentOpTools_${comment === null || comment === void 0 ? void 0 : comment.id}`;
+  const style = !isGlobalComment && isCollapseCommentEditor ? {
+    maxHeight: '341px'
+  } : {};
+  const deleteComment = (0, _react.useCallback)(async commentId => {
+    await _context.default.deleteComment(commentId);
+    let {
+      element_id: elementId,
+      element_id_list
+    } = comment.detail;
+    if (element_id_list) {
+      var _comment$detail;
+      elementId = element_id_list[0];
+      (0, _helper.updateCommentedElementsAttrs)(element_id_list, editor, (_comment$detail = comment.detail) === null || _comment$detail === void 0 ? void 0 : _comment$detail.text_comment_id, false, true);
+    }
+    dispatch({
+      type: 'DELETE_COMMENT',
+      payload: {
+        element_id: elementId,
+        comment_id: commentId
+      }
+    });
+    closeComment && closeComment();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [comment.detail, dispatch, editor]);
+  const updateComment = (0, _react.useCallback)(async (commentId, newComment) => {
+    await _context.default.updateComment(commentId, newComment);
+    const elementId = (0, _helper.getPrimaryElementId)(comment.detail);
+    dispatch({
+      type: 'UPDATE_COMMENT',
+      payload: {
+        element_id: elementId,
+        comment_id: commentId,
+        comment: newComment
+      }
+    });
+  }, [comment.detail, dispatch]);
+  const updateCommentState = (0, _react.useCallback)(async (commentId, newComment) => {
+    const time = (0, _dayjs.default)().format('YYYY-MM-DD HH:mm:ss');
+    const user = _context.default.getUserInfo();
+    const reply = {
+      type: 'comment',
+      reply: newComment.resolved,
+      updated_at: time,
+      author: user.username
+    };
+
+    // When updating comment status, add a new reply
+    const res = await _context.default.insertReply(commentId, reply);
+    const {
+      reply: returnReply
+    } = res.data;
+    const newReply = {
+      ...reply,
+      id: returnReply.id,
+      reply: returnReply.reply,
+      user_name: returnReply.user_name,
+      avatar_url: returnReply.avatar_url
+    };
+    const elementId = (0, _helper.getPrimaryElementId)(comment.detail);
+    if (newComment.resolved === true) {
+      const resolvedComment = commentsDetail ? Object.values(commentsDetail).find(comments => comments.id === commentId) : comment;
+      if (resolvedComment.detail.element_id_list) {
+        var _resolvedComment$deta;
+        (0, _helper.updateCommentedElementsAttrs)(resolvedComment.detail.element_id_list, editor, (_resolvedComment$deta = resolvedComment.detail) === null || _resolvedComment$deta === void 0 ? void 0 : _resolvedComment$deta.text_comment_id, !newComment.resolved);
+        closeComment && closeComment();
+      }
+      if (commentsDetail && Object.values(commentsDetail).length === 1) {
+        setIsClickedContextComment(false);
+        setIsCommentPanelVisible(false);
+      }
+    }
+    if (newComment.resolved === false && comment.detail.element_id_list) {
+      const unresolvedComment = commentsDetail ? Object.values(commentsDetail).find(comments => comments.id === commentId) : comment;
+      if (unresolvedComment.detail.element_id_list) {
+        var _unresolvedComment$de;
+        (0, _helper.updateCommentedElementsAttrs)(unresolvedComment.detail.element_id_list, editor, (_unresolvedComment$de = unresolvedComment.detail) === null || _unresolvedComment$de === void 0 ? void 0 : _unresolvedComment$de.text_comment_id, !newComment.resolved);
+      }
+    }
+    dispatch({
+      type: 'INSERT_REPLY',
+      payload: {
+        element_id: elementId,
+        comment_id: commentId,
+        reply: newReply
+      }
+    });
+
+    // Modify comment status
+    await _context.default.updateComment(commentId, newComment);
+    dispatch({
+      type: 'UPDATE_COMMENT_STATE',
+      payload: {
+        element_id: elementId,
+        comment_id: commentId,
+        comment: newComment
+      }
+    });
+
+    // If the status of the comment is set to resolved, the page jumps to the position of the comment
+    if (!isClickedContextComment && newComment.resolved === true) {
+      setTimeout(() => {
+        updateScrollPosition && updateScrollPosition();
+      }, 100);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [comment, commentsDetail, dispatch, editor, isClickedContextComment, setIsClickedContextComment, setIsCommentPanelVisible, updateScrollPosition]);
+  const insertReply = (0, _react.useCallback)(async (commentId, replies) => {
+    const elementId = (0, _helper.getPrimaryElementId)(comment.detail);
+    for (let i = 0; i < replies.length; i++) {
+      const reply = replies[i];
+      const res = await _context.default.insertReply(commentId, reply);
+      const {
+        reply: returnReply
+      } = res.data;
+      const newReply = {
+        ...reply,
+        id: returnReply.id,
+        comment_id: commentId,
+        reply: returnReply.reply,
+        user_name: returnReply.user_name,
+        avatar_url: returnReply.avatar_url
+      };
+      dispatch({
+        type: 'INSERT_REPLY',
+        payload: {
+          element_id: elementId,
+          comment_id: commentId,
+          reply: newReply
+        }
+      });
+    }
+
+    // If the number of replies is greater than one, it means that the comment needs to be resubmitted and the status of the comment should be modified
+    if (replies.length > 1) {
+      const newComment = {
+        resolved: false
+      };
+      await _context.default.updateComment(commentId, newComment);
+      dispatch({
+        type: 'UPDATE_COMMENT_STATE',
+        payload: {
+          element_id: elementId,
+          comment_id: commentId,
+          comment: newComment
+        }
+      });
+    }
+    setTimeout(() => {
+      const options = {
+        top: 10000,
+        behavior: 'smooth'
+      };
+      listRef.current.scrollTo(options);
+    }, 0);
+  }, [comment.detail, dispatch]);
+  const insertContent = (0, _react.useCallback)(content => {
+    const user = _context.default.getUserInfo();
+    const replies = [];
+
+    // The comment has already been resolved, when adding a new reply, resubmit the comment
+    if (comment.resolved) {
+      const time = (0, _dayjs.default)().format('YYYY-MM-DD HH:mm:ss');
+      const stateChangeReply = {
+        type: 'comment',
+        reply: false,
+        updated_at: time,
+        author: user.username
+      };
+      replies.push(stateChangeReply);
+    }
+
+    // User added reply
+    const time = (0, _dayjs.default)().format('YYYY-MM-DD HH:mm:ss');
+    const reply = {
+      type: 'reply',
+      reply: content,
+      updated_at: time,
+      author: user.username
+    };
+    replies.push(reply);
+    insertReply(comment.id, replies);
+  }, [comment.id, comment.resolved, insertReply]);
+  (0, _react.useImperativeHandle)(ref ? ref : commentDetailRef, () => ({
+    insertContent
+  }));
+  const deleteReply = (0, _react.useCallback)(async replyId => {
+    const commentId = comment.id;
+    const elementId = (0, _helper.getPrimaryElementId)(comment.detail);
+    await _context.default.deleteReply(commentId, replyId);
+    dispatch({
+      type: 'DELETE_REPLY',
+      payload: {
+        element_id: elementId,
+        comment_id: commentId,
+        reply_id: replyId
+      }
+    });
+  }, [comment.detail, comment.id, dispatch]);
+  const updateReply = (0, _react.useCallback)(async (replyId, newReply) => {
+    const commentId = comment.id;
+    const elementId = (0, _helper.getPrimaryElementId)(comment.detail);
+    await _context.default.updateReply(commentId, replyId, newReply);
+    dispatch({
+      type: 'UPDATE_REPLY',
+      payload: {
+        element_id: elementId,
+        comment_id: commentId,
+        reply_id: replyId,
+        reply: newReply
+      }
+    });
+  }, [comment.detail, comment.id, dispatch]);
+  const onItemClick = (0, _react.useCallback)(event => {
+    if (event.target.className === _constants.COMMENT_URL_CLASSNAME) return;
+    onCommentClick && onCommentClick(comment);
+  }, [comment, onCommentClick]);
+  const onDeleteComment = (0, _react.useCallback)(() => {
+    setIsShowDeletePopover(true);
+  }, []);
+  const _deleteComment = (0, _react.useCallback)(() => {
+    deleteComment(comment.id);
+    setIsShowDeletePopover(false);
+    setCurrentCommentGroup && setCurrentCommentGroup(null);
+    if (isClickedContextComment) {
+      if (Object.values(commentsDetail).length === 1) {
+        setIsClickedContextComment(false);
+        setIsCommentPanelVisible(false);
+      } else {
+        const newCommentIdArray = Object.values(commentsDetail).filter(item => item.id !== comment.id).map(item => item.detail.text_comment_id);
+        onSelectElement(newCommentIdArray, true);
+      }
+    }
+  }, [comment.id, commentsDetail, deleteComment, isClickedContextComment, onSelectElement, setCurrentCommentGroup, setIsClickedContextComment, setIsCommentPanelVisible]);
+  (0, _react.useEffect)(() => {
+    if (!isActive) {
+      setIsShowDeletePopover(false);
+    }
+  }, [isActive]);
+  const className = (0, _classnames.default)('comment-ui-container', {
+    'active': isActive,
+    'sdoc-resolved': comment === null || comment === void 0 ? void 0 : comment.resolved,
+    'd-flex flex-column': element,
+    'global-comment-item-detail-wrapper': isGlobalComment,
+    'comment-item-detail-wrapper': !isGlobalComment
+  });
+  const handleScrollToArticle = (0, _react.useCallback)(e => {
+    e.stopPropagation();
+    const dom = _slateReact.ReactEditor.toDOMNode(editor, element);
+    const headerHeight = 56 + 37;
+    scrollRef.current.scrollTo({
+      top: dom.offsetTop - headerHeight,
+      behavior: 'smooth'
+    });
+  }, [editor, element, scrollRef]);
+  const newCommentId = isClickedContextComment && comment !== null && comment !== void 0 && comment.detail.element_id_list ? comment === null || comment === void 0 ? void 0 : comment.detail.element_id_list[0] : comment === null || comment === void 0 ? void 0 : comment.id;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    id: `comment-item-wrapper_${newCommentId}`,
+    className: className,
+    onClick: onItemClick
+  }, element && /*#__PURE__*/_react.default.createElement("div", {
+    className: "comment-item-selected-text-container",
+    onClick: handleScrollToArticle
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "sdocfont sdoc-comment-quote mr-2"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "comment-item-selected-text"
+  }, _slate.Node.string(element))), !isEmptyComment && /*#__PURE__*/_react.default.createElement("div", {
+    ref: listRef,
+    className: "comment-item-list",
+    style: style
+  }, comment.detail.element_id_list && !isGlobalComment && /*#__PURE__*/_react.default.createElement("div", {
+    className: "context-comment-item-selected-text-container"
+  }, /*#__PURE__*/_react.default.createElement("i", {
+    className: "sdocfont sdoc-comment-quote mr-2"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "context-comment-items"
+  }, comment.detail.element_id_list.map((elementId, index) => {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "context-comment-item-selected-text",
+      key: index
+    }, (0, _helper.getCommentedTextsByElementId)(elementId, comment.detail.text_comment_id));
+  }))), /*#__PURE__*/_react.default.createElement(_commentItemContent.default, {
+    key: newCommentId,
+    container: container,
+    isActive: isActive,
+    comment: comment,
+    updateComment: updateComment,
+    updateCommentState: updateCommentState,
+    onDeleteComment: onDeleteComment,
+    targetId: commentOpToolsId,
+    isClickedContextComment: isClickedContextComment
+  }), isClickedContextComment && comment.replies && comment.replies.length > 0 && comment.replies.filter(item => item.type === 'reply').map(reply => {
+    const props = {
+      key: reply.id,
+      isActive,
+      container,
+      reply,
+      deleteReply,
+      updateReply
+    };
+    return /*#__PURE__*/_react.default.createElement(_commentItemReply.default, props);
+  }), !isClickedContextComment && comment.replies && comment.replies.length > 0 && comment.replies.filter(item => item.type === 'reply').map(reply => {
+    const props = {
+      key: reply.id,
+      isActive,
+      container,
+      reply,
+      deleteReply,
+      updateReply
+    };
+    return /*#__PURE__*/_react.default.createElement(_commentItemReply.default, props);
+  })), isShowDeletePopover && isActive && /*#__PURE__*/_react.default.createElement(_commentDeletePopover.default, {
+    type: "comment",
+    targetId: commentOpToolsId,
+    deleteConfirm: _deleteComment,
+    setIsShowDeletePopover: setIsShowDeletePopover,
+    parentDom: listRef.current
+  }));
+});
+var _default = exports.default = CommentItemWrapper;