From f1f1a9d573c04e7aec29eedeb3bb325eccbe56f7 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Fri, 18 Sep 2020 14:19:13 +0300
Subject: [PATCH] connected comment in progress
---
.../components/comments/ConnectedComment.js | 22 +++++++++++++++++++
.../src/components/rightArea/BoxList.js | 8 ++++---
.../src/ui/comments/CommentBox.js | 16 +++++++++++++-
3 files changed, 42 insertions(+), 4 deletions(-)
create mode 100644 wax-prosemirror-components/src/components/comments/ConnectedComment.js
diff --git a/wax-prosemirror-components/src/components/comments/ConnectedComment.js b/wax-prosemirror-components/src/components/comments/ConnectedComment.js
new file mode 100644
index 000000000..15cf17eb5
--- /dev/null
+++ b/wax-prosemirror-components/src/components/comments/ConnectedComment.js
@@ -0,0 +1,22 @@
+/* eslint react/prop-types: 0 */
+import React, { useState, useEffect, useContext, memo } from 'react';
+import styled from 'styled-components';
+import { DocumentHelpers } from 'wax-prosemirror-utilities';
+import { WaxContext } from 'wax-prosemirror-core';
+import CommentBox from '../../ui/comments/CommentBox';
+
+export default ({ key, comment, dataBox, top, commentId, commentData }) => {
+ const MemorizedComponent = memo(() => {
+ return (
+ <CommentBox
+ key={commentId}
+ comment={commentData}
+ dataBox={commentId}
+ top={top}
+ commentId={commentId}
+ commentData={commentData}
+ />
+ );
+ });
+ return <MemorizedComponent />;
+};
diff --git a/wax-prosemirror-components/src/components/rightArea/BoxList.js b/wax-prosemirror-components/src/components/rightArea/BoxList.js
index 23e2ab47a..66b5dd3bf 100644
--- a/wax-prosemirror-components/src/components/rightArea/BoxList.js
+++ b/wax-prosemirror-components/src/components/rightArea/BoxList.js
@@ -1,7 +1,7 @@
/* eslint react/prop-types: 0 */
import { Mark } from 'prosemirror-model';
import React from 'react';
-import CommentBox from '../comments/CommentBox';
+import ConnectedComment from '../comments/ConnectedComment';
import TrackChangeBox from '../trackChanges/TrackChangeBox';
export default ({ commentsTracks, view, position }) => {
@@ -18,11 +18,13 @@ export default ({ commentsTracks, view, position }) => {
if (commentTrack.type && commentTrack.type.name === 'comment') {
return (
- <CommentBox
+ <ConnectedComment
key={id}
comment={commentTrack}
- top={top}
dataBox={id}
+ top={top}
+ commentId={id}
+ commentData={commentTrack.attrs.conversation}
/>
);
}
diff --git a/wax-prosemirror-components/src/ui/comments/CommentBox.js b/wax-prosemirror-components/src/ui/comments/CommentBox.js
index 7124537a3..47593084d 100644
--- a/wax-prosemirror-components/src/ui/comments/CommentBox.js
+++ b/wax-prosemirror-components/src/ui/comments/CommentBox.js
@@ -25,6 +25,7 @@ const Wrapper = styled.div`
box-sizing: border-box;
display: flex;
flex-direction: column;
+ position: absolute;
/* padding: 8px 0; */
${props => !props.active && inactive}
@@ -59,6 +60,7 @@ const CommentBox = props => {
onClickBox,
onClickPost,
onClickResolve,
+ top,
} = props;
// send signal to make this comment active
@@ -69,8 +71,18 @@ const CommentBox = props => {
if (!active && (!commentData || commentData.length === 0)) return null;
+ const style = {
+ top: `${top}px`,
+ };
+
return (
- <Wrapper active={active} className={className} onClick={onClickWrapper}>
+ <Wrapper
+ style={style}
+ active={active}
+ className={className}
+ onClick={onClickWrapper}
+ top={top}
+ >
{active && commentData.length > 0 && (
<Head>
<Resolve onClick={() => onClickResolve(commentId)}>Resolve</Resolve>
@@ -92,6 +104,7 @@ const CommentBox = props => {
CommentBox.propTypes = {
/** Whether this is the current active comment */
active: PropTypes.bool,
+ top: PropTypes.number,
/** List of objects containing data for comment items */
commentData: PropTypes.arrayOf(
PropTypes.shape({
@@ -115,6 +128,7 @@ CommentBox.propTypes = {
};
CommentBox.defaultProps = {
+ top: 0,
active: false,
commentData: [],
};
--
GitLab