initial track options component

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

-/* eslint react/prop-types: 0 */
-import { Mark } from 'prosemirror-model';
-import React, { useState, useEffect, useContext } from 'react';
-import { Transition } from 'react-transition-group';
-import styled from 'styled-components';
-import { WaxContext } from 'wax-prosemirror-core';
-
-const TrackChangeBoxStyled = styled.div`
-  display: flex;
-  flex-direction: column;
-  margin-top: 10px;
-  border: 1px solid 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}%`)};
-  max-width: 450px;
-  opacity: ${({ state }) => {
-    switch (state) {
-      case 'exited':
-        return 0.2;
-      case 'exiting':
-        return 0.4;
-      case 'entering':
-        return 0.6;
-      case 'entered':
-        return 1;
-      default:
-    }
-  }};
-`;
-
-export default ({ trackChange, view, top, dataBox }) => {
-  const [animate, setAnimate] = useState(false);
-  const {
-    view: { main },
-    app,
-    activeView,
-  } = useContext(WaxContext);
-  let action;
-  if (trackChange instanceof Mark) {
-    if ((trackChange.type.name = 'format_change')) {
-      const {
-        attrs: { username, before, after },
-      } = trackChange;
-      action = `User ${username} added ${after[0]}`;
-    }
-  } else {
-    action = `User demo changed paragraph to heading 1`;
-  }
-
-  let active = false;
-  useEffect(() => {
-    setAnimate(true);
-  }, []);
-
-  return (
-    <>
-      <Transition in={animate} timeout={1000}>
-        {state => (
-          <TrackChangeBoxStyled
-            top={top}
-            state={state}
-            data-box={dataBox}
-            active={active}
-          >
-            <div>
-              {action}
-              <button>Accept</button>
-              <button>Reject</button>
-            </div>
-          </TrackChangeBoxStyled>
-        )}
-      </Transition>
-    </>
-  );
-};

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

+import React, { useMemo, useState, useRef } from 'react';
+
+import styled from 'styled-components';
+import { grid } from '@pubsweet/ui-toolkit';
+
+import MenuButton from '../../ui/buttons/MenuButton';
+import TrackChangeOptionsComponent from './TrackChangeOptionsComponent';
+import useOnClickOutside from '../../helpers/useOnClickOutside';
+
+const Wrapper = styled.div`
+  font-size: 0;
+  position: relative;
+  z-index: 2;
+`;
+
+const DropWrapper = styled.div`
+  background: white;
+  margin-top: ${grid(1)};
+  position: absolute;
+  top: 32px;
+`;
+
+const TrackChangeOptionsTool = ({ view = {}, item }) => {
+  const { icon, title } = item;
+  const [isOpen, setIsOpen] = useState(false);
+  const ref = useRef();
+
+  useOnClickOutside(ref, () => setIsOpen(false));
+
+  const MemorizedDropdown = useMemo(
+    () => (
+      <Wrapper ref={ref}>
+        <MenuButton
+          active={isOpen}
+          disabled={false}
+          iconName={icon}
+          onMouseDown={() => {
+            setIsOpen(!isOpen);
+          }}
+          title={title}
+        />
+
+        {isOpen && (
+          <DropWrapper>
+            <TrackChangeOptionsComponent
+              close={() => {
+                setIsOpen(false);
+              }}
+            />
+          </DropWrapper>
+        )}
+      </Wrapper>
+    ),
+    [isOpen],
+  );
+
+  return MemorizedDropdown;
+};
+
+export default TrackChangeOptionsTool;