From 77cbf59c1334bd689d7d04569d7557dde96ff87a Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Tue, 13 Oct 2020 19:52:24 +0300
Subject: [PATCH] add custom hook for clickOutside
---
.../src/components/tables/CreateTable.js | 44 +++++++++++--------
1 file changed, 26 insertions(+), 18 deletions(-)
diff --git a/wax-prosemirror-components/src/components/tables/CreateTable.js b/wax-prosemirror-components/src/components/tables/CreateTable.js
index b942bcdda..31b2ec382 100644
--- a/wax-prosemirror-components/src/components/tables/CreateTable.js
+++ b/wax-prosemirror-components/src/components/tables/CreateTable.js
@@ -1,6 +1,6 @@
/* eslint react/prop-types: 0 */
-import React, { useState, useContext, useMemo } from 'react';
+import React, { useState, useContext, useMemo, useEffect, useRef } from 'react';
import { WaxContext } from 'wax-prosemirror-core';
import styled from 'styled-components';
import { grid } from '@pubsweet/ui-toolkit';
@@ -31,6 +31,7 @@ const CreateTable = ({ view = {}, item }) => {
const { state } = view;
const { enable, icon, run, select, title } = item;
+ const ref = useRef();
const [isOpen, setIsOpen] = useState(false);
const dropComponent = (
@@ -47,9 +48,11 @@ const CreateTable = ({ view = {}, item }) => {
const isDisabled =
enable && !enable(state) && !(select && select(state, activeViewId));
+ useOnClickOutside(ref, () => setIsOpen(false));
+
const MemorizedDropdown = useMemo(
() => (
- <Wrapper>
+ <Wrapper ref={ref}>
<MenuButton
active={isOpen}
disabled={isDisabled}
@@ -67,22 +70,27 @@ const CreateTable = ({ view = {}, item }) => {
);
return MemorizedDropdown;
-
- // const MemorizedDropdown = useMemo(
- // () => (
- // <Dropdown
- // active={showTool}
- // dropComponent={dropComponent}
- // iconName={icon}
- // disabled={isDisabled}
- // onMouseDown={toggleShowTool}
- // title={title}
- // />
- // ),
- // [isDisabled, showTool],
- // );
- //
- // return MemorizedDropdown;
};
+// 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 CreateTable;
--
GitLab