track change boxes components

wax-prosemirror-components/src/components/comments/CommentBox.js

@@ -9,7 +9,7 @@ const CommentBoxStyled = styled.div`
   display: flex;
   flex-direction: column;
   margin-top: 10px;
-  background: black;
+  background: #ffab20;
   position: absolute;
   transition: ${({ state }) => "top 1s, opacity 1.5s, left 1s"};
   top: ${props => (props.top ? `${props.top}px` : 0)};
@@ -28,14 +28,14 @@ const CommentBoxStyled = styled.div`
   }};
 `;
 
-export default ({ mark, view, top, dataBox }) => {
+export default ({ comment, view, top, dataBox }) => {
   const [animate, setAnimate] = useState(false);
   const { view: { main }, app, activeView } = useContext(WaxContext);
+  const { attrs: { id } } = comment;
+
   const activeCommentPlugin = app.PmPlugins.get("activeComment");
   const activeComment = activeCommentPlugin.getState(activeView.state).comment;
   let active = false;
-  const id = mark.attrs ? mark.attrs.id : mark.node.attrs.id;
-
   if (activeComment && id === activeComment.attrs.id) active = true;
   useEffect(() => {
     setAnimate(true);

wax-prosemirror-components/src/components/comments/CommentsBoxList.js

-import React, { Fragment } from "react";
-import CommentBox from "./CommentBox";
-
-export default ({ comments, view, position }) => {
-  return (
-    <Fragment>
-      {comments.map((comment, index) => {
-        const id = comment.attrs ? comment.attrs.id : comment.node.attrs.id;
-        const top = position[index] ? position[index][id] : 0;
-        return (
-          <CommentBox
-            key={id}
-            mark={comment}
-            view={view}
-            top={top}
-            dataBox={id}
-          />
-        );
-      })}
-    </Fragment>
-  );
-};

wax-prosemirror-components/src/components/rightArea/BoxList.js

+import React, { Fragment } from "react";
+import CommentBox from "../comments/CommentBox";
+import TrackChangeBox from "../trackChanges/TrackChangeBox";
+
+export default ({ commentsTracks, view, position }) => {
+  return (
+    <Fragment>
+      {commentsTracks.map((commentTrack, index) => {
+        const id = commentTrack.attrs
+          ? commentTrack.attrs.id
+          : commentTrack.node.attrs.id;
+
+        const top = position[index] ? position[index][id] : 0;
+
+        if (commentTrack.type && commentTrack.type.name === "comment") {
+          return (
+            <CommentBox
+              key={id}
+              comment={commentTrack}
+              view={view}
+              top={top}
+              dataBox={id}
+            />
+          );
+        } else {
+          return (
+            <TrackChangeBox
+              key={id}
+              comment={commentTrack}
+              view={view}
+              top={top}
+              dataBox={id}
+            />
+          );
+        }
+      })}
+    </Fragment>
+  );
+};

wax-prosemirror-components/src/components/rightArea/RightArea.js

@@ -9,7 +9,7 @@ import React, {
 import styled from "styled-components";
 import { WaxContext } from "wax-prosemirror-core";
 import { DocumentHelpers } from "wax-prosemirror-utilities";
-import CommentsBoxList from "./../comments/CommentsBoxList";
+import BoxList from "./BoxList";
 import { each, uniqBy, sortBy } from "lodash";
 
 export default ({ area }) => {
@@ -123,8 +123,8 @@ export default ({ area }) => {
 
   const CommentTrackComponent = useMemo(
     () => (
-      <CommentsBoxList
-        comments={marks[area] || []}
+      <BoxList
+        commentsTracks={marks[area] || []}
         area={area}
         view={main}
         position={position}

wax-prosemirror-components/src/components/trackChanges/TrackChangeBox.js

+import React, { Fragment, useState, useEffect, useContext } from "react";
+import { Transition } from "react-transition-group";
+import styled from "styled-components";
+import { WaxContext } from "wax-prosemirror-core";
+
+const CommentBoxStyled = styled.div`
+  height: 50px;
+  width: 50px;
+  display: flex;
+  flex-direction: column;
+  margin-top: 10px;
+  background: blue;
+  position: absolute;
+  transition: ${({ state }) => "top 1s, opacity 1.5s, left 1s"};
+  top: ${props => (props.top ? `${props.top}px` : 0)};
+  left: ${props => (props.active ? `${63}%` : `${65}%`)};
+  opacity: ${({ state }) => {
+    switch (state) {
+      case "exited":
+        return 0.2;
+      case "exiting":
+        return 0.4;
+      case "entering":
+        return 0.6;
+      case "entered":
+        return 1;
+    }
+  }};
+`;
+
+export default ({ comment, view, top, dataBox }) => {
+  const [animate, setAnimate] = useState(false);
+  const { view: { main }, app, activeView } = useContext(WaxContext);
+  // const { attrs: { id } } = comment;
+
+  // const activeCommentPlugin = app.PmPlugins.get("activeComment");
+  // const activeComment = activeCommentPlugin.getState(activeView.state).comment;
+  let active = false;
+  // if (activeComment && id === activeComment.attrs.id) active = true;
+  useEffect(() => {
+    setAnimate(true);
+  }, []);
+
+  return (
+    <Fragment>
+      <Transition in={animate} timeout={1000}>
+        {state => (
+          <CommentBoxStyled
+            top={top}
+            state={state}
+            data-box={dataBox}
+            active={active}
+          />
+        )}
+      </Transition>
+    </Fragment>
+  );
+};