connected comment in progress

f1f1a9d5 · chris · 853cc396 · f1f1a9d5 · f1f1a9d5 · f1f1a9d5
Commit f1f1a9d5 authored 4 years ago by chris
--- a/wax-prosemirror-components/src/components/comments/ConnectedComment.js
+++ b/wax-prosemirror-components/src/components/comments/ConnectedComment.js
+/* 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 />;
+};
--- a/wax-prosemirror-components/src/components/rightArea/BoxList.js
+++ b/wax-prosemirror-components/src/components/rightArea/BoxList.js
 /* 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}
            />
          );
        }

--- 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: [],
 };