find and replace component position

wax-prosemirror-components/package.json

@@ -28,7 +28,8 @@
     "uuid": "^7.0.3",
     "wax-prosemirror-core": "^0.0.20",
     "wax-prosemirror-utilities": "^0.0.20",
-    "@pubsweet/ui-toolkit": "^2.3.1"
+    "@pubsweet/ui-toolkit": "^2.3.1",
+    "react-visibility-sensor": "^5.1.1"
   },
   "resolutions": {
     "prosemirror-model": "1.11.0",

wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceComponent.js

+import React, { useRef, useMemo, useContext, useState } from 'react';
+import { WaxContext } from 'wax-prosemirror-core';
+import styled from 'styled-components';
+import { grid } from '@pubsweet/ui-toolkit';
+
+const Wrapper = styled.div`
+  font-size: 16px;
+  color: black;
+  min-width: 400px;
+  background: grey;
+`;
+
+const FindAndReplaceComponent = () => {
+  return <Wrapper> this is the find and replace component</Wrapper>;
+};
+
+export default FindAndReplaceComponent;

wax-prosemirror-components/src/components/findAndReplace/FindAndReplaceTool.js

-import React, { useEffect, useRef, useMemo, useContext, useState } from 'react';
+import React, { useRef, useMemo, useContext, useState } from 'react';
 import { WaxContext } from 'wax-prosemirror-core';
 import styled from 'styled-components';
 import { grid } from '@pubsweet/ui-toolkit';
+import VisibilitySensor from 'react-visibility-sensor';
 
 import MenuButton from '../../ui/buttons/MenuButton';
+import FindAndReplaceComponent from './FindAndReplaceComponent';
+import useOnClickOutside from '../../helpers/useOnClickOutside';
 
-const CreateTable = ({ view = {}, item }) => {
+const FindAndReplaceTool = ({ view = {}, item }) => {
   const {
     view: { main },
     activeViewId,
@@ -24,6 +27,7 @@ const CreateTable = ({ view = {}, item }) => {
     margin-top: ${grid(1)};
     position: absolute;
     background: white;
+    top: 30px;
   `;
 
   const { state } = view;
@@ -31,19 +35,26 @@ const CreateTable = ({ view = {}, item }) => {
   const ref = useRef();
   const [isOpen, setIsOpen] = useState(false);
 
-  const dropComponent = <div> find and replace</div>;
+  const dropComponent = <FindAndReplaceComponent />;
 
   // const isDisabled =
   //   enable && !enable(state) && !(select && select(state, activeViewId));
   //
-  // useOnClickOutside(ref, () => setIsOpen(false));
+  useOnClickOutside(ref, () => setIsOpen(false));
+
+  const styles = { right: '-205px' };
+  const [style, setStyle] = useState(styles);
+  console.log('here?');
+  const onChange = isVisible => {
+    if (!isVisible) setStyle({ right: '0' });
+  };
 
   const MemorizedDropdown = useMemo(
     () => (
       <Wrapper ref={ref}>
         <MenuButton
           active={isOpen}
-          // disabled={isDisabled}
+          disabled={false}
           iconName={icon}
           onMouseDown={() => {
             setIsOpen(!isOpen);
@@ -51,13 +62,17 @@ const CreateTable = ({ view = {}, item }) => {
           title={title}
         />
 
-        {isOpen && <DropWrapper>{dropComponent}</DropWrapper>}
+        {isOpen && (
+          <VisibilitySensor onChange={onChange}>
+            <DropWrapper style={style}>{dropComponent}</DropWrapper>
+          </VisibilitySensor>
+        )}
       </Wrapper>
     ),
-    [isOpen],
+    [isOpen, style],
   );
 
   return MemorizedDropdown;
 };
 
-export default CreateTable;
+export default FindAndReplaceTool;

yarn.lock

@@ -14997,6 +14997,13 @@ react-transition-group@^4.3.0:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
+react-visibility-sensor@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/react-visibility-sensor/-/react-visibility-sensor-5.1.1.tgz#5238380960d3a0b2be0b7faddff38541e337f5a9"
+  integrity sha512-cTUHqIK+zDYpeK19rzW6zF9YfT4486TIgizZW53wEZ+/GPBbK7cNS0EHyJVyHYacwFEvvHLEKfgJndbemWhB/w==
+  dependencies:
+    prop-types "^15.7.2"
+
 react@^16.13.1, react@^16.8.3:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"