From 7ccf595e77b09f9733b8c66a73cb9360248dfc48 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Sat, 19 Nov 2022 17:30:34 +0200
Subject: [PATCH] useOnclickoutside
---
wax-prosemirror-components/index.js | 3 ---
.../EditorInfo/CounterInfo/EditorInfoTool.js | 7 ++++--
.../EditorInfo/EditorShortCutsTool.js | 2 +-
.../src/components/tables/CreateTable.js | 3 +--
wax-prosemirror-core/index.js | 2 ++
.../src/components}/helpers/useDebounce.js | 0
.../components/helpers/useOnClickOutside.js | 25 +++++++++++++++++++
.../ExpandedFindAndReplaceComponent.js | 4 +--
.../components/FindComponent.js | 4 +--
.../components/TextHighlightingTool.js | 4 +--
.../components/SpecialCharactersTool.js | 4 +--
.../components/TransformCaseComponent.js | 8 ++----
12 files changed, 44 insertions(+), 22 deletions(-)
rename {wax-prosemirror-components/src => wax-prosemirror-core/src/components}/helpers/useDebounce.js (100%)
create mode 100644 wax-prosemirror-core/src/components/helpers/useOnClickOutside.js
diff --git a/wax-prosemirror-components/index.js b/wax-prosemirror-components/index.js
index 60fea30e7..035796f96 100644
--- a/wax-prosemirror-components/index.js
+++ b/wax-prosemirror-components/index.js
@@ -18,6 +18,3 @@ export { default as EditingSuggestingDropDown } from './src/components/editingSu
export { default as CustomTagInlineComponent } from './src/components/customtag/CustomTagInlineComponent';
export { default as CustomTagInlineOverlayComponent } from './src/components/customtag/CustomTagInlineOverlayCompoment';
export { default as CustomTagBlockComponent } from './src/components/customtag/CustomTagBlockComponent';
-
-export { default as useDebounce } from './src/helpers/useDebounce';
-export { default as useOnClickOutside } from './src/helpers/useOnClickOutside';
diff --git a/wax-prosemirror-components/src/components/EditorInfo/CounterInfo/EditorInfoTool.js b/wax-prosemirror-components/src/components/EditorInfo/CounterInfo/EditorInfoTool.js
index 79212d0ee..d78734e93 100644
--- a/wax-prosemirror-components/src/components/EditorInfo/CounterInfo/EditorInfoTool.js
+++ b/wax-prosemirror-components/src/components/EditorInfo/CounterInfo/EditorInfoTool.js
@@ -9,9 +9,12 @@ import React, {
import styled from 'styled-components';
import { grid, override } from '@pubsweet/ui-toolkit';
import { v4 as uuidv4 } from 'uuid';
-import { WaxContext, DocumentHelpers } from 'wax-prosemirror-core';
+import {
+ WaxContext,
+ DocumentHelpers,
+ useOnClickOutside,
+} from 'wax-prosemirror-core';
import MenuButton from '../../../ui/buttons/MenuButton';
-import useOnClickOutside from '../../../helpers/useOnClickOutside';
const Wrapper = styled.div`
font-size: 0;
diff --git a/wax-prosemirror-components/src/components/EditorInfo/EditorShortCutsTool.js b/wax-prosemirror-components/src/components/EditorInfo/EditorShortCutsTool.js
index 82561c409..450a939c2 100644
--- a/wax-prosemirror-components/src/components/EditorInfo/EditorShortCutsTool.js
+++ b/wax-prosemirror-components/src/components/EditorInfo/EditorShortCutsTool.js
@@ -3,7 +3,7 @@ import styled from 'styled-components';
import { grid } from '@pubsweet/ui-toolkit';
import { v4 as uuidv4 } from 'uuid';
import MenuButton from '../../ui/buttons/MenuButton';
-import useOnClickOutside from '../../helpers/useOnClickOutside';
+import { useOnClickOutside } from 'wax-prosemirror-core';
const Wrapper = styled.div`
font-size: 0;
diff --git a/wax-prosemirror-components/src/components/tables/CreateTable.js b/wax-prosemirror-components/src/components/tables/CreateTable.js
index 235e4d29f..8d1697821 100644
--- a/wax-prosemirror-components/src/components/tables/CreateTable.js
+++ b/wax-prosemirror-components/src/components/tables/CreateTable.js
@@ -1,11 +1,10 @@
/* eslint react/prop-types: 0 */
import React, { useState, useContext, useMemo, useRef } from 'react';
-import { WaxContext } from 'wax-prosemirror-core';
+import { WaxContext, useOnClickOutside } from 'wax-prosemirror-core';
import styled from 'styled-components';
import { grid } from '@pubsweet/ui-toolkit';
import MenuButton from '../../ui/buttons/MenuButton';
import InsertTableTool from '../../ui/tables/InsertTableTool';
-import useOnClickOutside from '../../helpers/useOnClickOutside';
const Wrapper = styled.div`
font-size: 0;
diff --git a/wax-prosemirror-core/index.js b/wax-prosemirror-core/index.js
index 0d0eab3ff..6606b1c41 100644
--- a/wax-prosemirror-core/index.js
+++ b/wax-prosemirror-core/index.js
@@ -37,3 +37,5 @@ export { default as LeftMenuTitle } from './src/components/LeftMenuTitle';
export { default as LeftSideButton } from './src/components/LeftSideButton';
export { default as ReactDropDownStyles } from './src/components/helpers/ReactDropDownStyles';
export { default as DateParser } from './src/components/helpers/DateParser';
+export { default as useDebounce } from './src/components/helpers/useDebounce';
+export { default as useOnClickOutside } from './src/components/helpers/useOnClickOutside';
diff --git a/wax-prosemirror-components/src/helpers/useDebounce.js b/wax-prosemirror-core/src/components/helpers/useDebounce.js
similarity index 100%
rename from wax-prosemirror-components/src/helpers/useDebounce.js
rename to wax-prosemirror-core/src/components/helpers/useDebounce.js
diff --git a/wax-prosemirror-core/src/components/helpers/useOnClickOutside.js b/wax-prosemirror-core/src/components/helpers/useOnClickOutside.js
new file mode 100644
index 000000000..25dffb0b9
--- /dev/null
+++ b/wax-prosemirror-core/src/components/helpers/useOnClickOutside.js
@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+
+// Hook
+const useOnClickOutside = (ref, handler) => {
+ useEffect(() => {
+ const listener = event => {
+ /* Do nothing if clicking ref's element or descendent elements */
+ if (!ref.current || ref.current.contains(event.target)) {
+ return;
+ }
+
+ handler(event);
+ };
+
+ document.addEventListener('mousedown', listener);
+ document.addEventListener('touchstart', listener);
+
+ return () => {
+ document.removeEventListener('mousedown', listener);
+ document.removeEventListener('touchstart', listener);
+ };
+ }, [ref, handler]);
+};
+
+export default useOnClickOutside;
diff --git a/wax-prosemirror-services/src/FindAndReplaceService/components/ExpandedFindAndReplaceComponent.js b/wax-prosemirror-services/src/FindAndReplaceService/components/ExpandedFindAndReplaceComponent.js
index c17097f27..cb595f6b9 100644
--- a/wax-prosemirror-services/src/FindAndReplaceService/components/ExpandedFindAndReplaceComponent.js
+++ b/wax-prosemirror-services/src/FindAndReplaceService/components/ExpandedFindAndReplaceComponent.js
@@ -1,10 +1,10 @@
/* eslint react/prop-types: 0 */
import React, { useState, useRef, useContext, useEffect } from 'react';
import { each, eachRight } from 'lodash';
-import { WaxContext, DocumentHelpers } from 'wax-prosemirror-core';
+import { WaxContext, DocumentHelpers, useDebounce } from 'wax-prosemirror-core';
import styled from 'styled-components';
import { grid, th } from '@pubsweet/ui-toolkit';
-import { Icon, useDebounce } from 'wax-prosemirror-components';
+import { Icon } from 'wax-prosemirror-components';
import CheckBox from './CheckBox';
import helpers from './helpers';
diff --git a/wax-prosemirror-services/src/FindAndReplaceService/components/FindComponent.js b/wax-prosemirror-services/src/FindAndReplaceService/components/FindComponent.js
index 21bc44244..b85cce349 100644
--- a/wax-prosemirror-services/src/FindAndReplaceService/components/FindComponent.js
+++ b/wax-prosemirror-services/src/FindAndReplaceService/components/FindComponent.js
@@ -4,8 +4,8 @@ import React, { useState, useRef, useContext, useEffect } from 'react';
import { each, eachRight } from 'lodash';
import styled from 'styled-components';
import { grid } from '@pubsweet/ui-toolkit';
-import { WaxContext } from 'wax-prosemirror-core';
-import { Icon, useDebounce } from 'wax-prosemirror-components';
+import { WaxContext, useDebounce } from 'wax-prosemirror-core';
+import { Icon } from 'wax-prosemirror-components';
import helpers from './helpers';
const Wrapper = styled.div`
diff --git a/wax-prosemirror-services/src/HighlightService/components/TextHighlightingTool.js b/wax-prosemirror-services/src/HighlightService/components/TextHighlightingTool.js
index 8d210207f..9fc8af828 100644
--- a/wax-prosemirror-services/src/HighlightService/components/TextHighlightingTool.js
+++ b/wax-prosemirror-services/src/HighlightService/components/TextHighlightingTool.js
@@ -2,8 +2,8 @@ import React, { useMemo, useState, useRef, useContext } from 'react';
import styled from 'styled-components';
import { grid } from '@pubsweet/ui-toolkit';
import { v4 as uuidv4 } from 'uuid';
-import { WaxContext } from 'wax-prosemirror-core';
-import { MenuButton, useOnClickOutside } from 'wax-prosemirror-components';
+import { WaxContext, useOnClickOutside } from 'wax-prosemirror-core';
+import { MenuButton } from 'wax-prosemirror-components';
const Wrapper = styled.div`
font-size: 0;
diff --git a/wax-prosemirror-services/src/SpecialCharactersService/components/SpecialCharactersTool.js b/wax-prosemirror-services/src/SpecialCharactersService/components/SpecialCharactersTool.js
index 8d5049853..eb5d3172a 100644
--- a/wax-prosemirror-services/src/SpecialCharactersService/components/SpecialCharactersTool.js
+++ b/wax-prosemirror-services/src/SpecialCharactersService/components/SpecialCharactersTool.js
@@ -1,8 +1,8 @@
import React, { useContext, useMemo, useState, useRef } from 'react';
import styled from 'styled-components';
import { grid } from '@pubsweet/ui-toolkit';
-import { WaxContext } from 'wax-prosemirror-core';
-import { MenuButton, useOnClickOutside } from 'wax-prosemirror-components';
+import { WaxContext, useOnClickOutside } from 'wax-prosemirror-core';
+import { MenuButton } from 'wax-prosemirror-components';
import SpecialCharactersComponent from './SpecialCharactersComponent';
const Wrapper = styled.div`
diff --git a/wax-prosemirror-services/src/TransformService/components/TransformCaseComponent.js b/wax-prosemirror-services/src/TransformService/components/TransformCaseComponent.js
index e5c37f52c..0d67abe4f 100644
--- a/wax-prosemirror-services/src/TransformService/components/TransformCaseComponent.js
+++ b/wax-prosemirror-services/src/TransformService/components/TransformCaseComponent.js
@@ -2,12 +2,8 @@ import React, { useContext, useMemo, useRef, useState } from 'react';
import styled from 'styled-components';
import { grid } from '@pubsweet/ui-toolkit';
import { v4 as uuid } from 'uuid';
-import { WaxContext } from 'wax-prosemirror-core';
-import {
- MenuButton,
- useOnClickOutside,
- Icon,
-} from 'wax-prosemirror-components';
+import { WaxContext, useOnClickOutside } from 'wax-prosemirror-core';
+import { MenuButton, Icon } from 'wax-prosemirror-components';
const Wrapper = styled.div`
font-size: 0;
--
GitLab