From ad13f70030cac2fc260b90c6447eb0a64eb259b2 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Fri, 3 Mar 2023 10:56:58 +0200
Subject: [PATCH] useOnClickOutside
---
.../TablesService/components/TableDropDown.js | 7 +++-
.../DropDownComponent.js | 38 ++++++++++---------
2 files changed, 25 insertions(+), 20 deletions(-)
diff --git a/wax-prosemirror-services/src/TablesService/components/TableDropDown.js b/wax-prosemirror-services/src/TablesService/components/TableDropDown.js
index 85d783036..535666efd 100644
--- a/wax-prosemirror-services/src/TablesService/components/TableDropDown.js
+++ b/wax-prosemirror-services/src/TablesService/components/TableDropDown.js
@@ -9,7 +9,7 @@ import React, {
} from 'react';
import styled from 'styled-components';
import * as tablesFn from 'prosemirror-tables';
-import { WaxContext, Icon } from 'wax-prosemirror-core';
+import { WaxContext, Icon, useOnClickOutside } from 'wax-prosemirror-core';
const Wrapper = styled.div`
opacity: ${props => (props.disabled ? '0.4' : '1')};
@@ -81,9 +81,12 @@ const TableDropDown = ({ item }) => {
const { activeView } = useContext(WaxContext);
const itemRefs = useRef([]);
+ const wrapperRef = useRef();
const [isOpen, setIsOpen] = useState(false);
const isDisabled = !item.select(activeView.state);
+ useOnClickOutside(wrapperRef, () => setIsOpen(false));
+
useEffect(() => {
if (isDisabled) setIsOpen(false);
}, [isDisabled]);
@@ -129,7 +132,7 @@ const TableDropDown = ({ item }) => {
const TableDropDownComponent = useMemo(
() => (
- <Wrapper disabled={isDisabled}>
+ <Wrapper disabled={isDisabled} ref={wrapperRef}>
<DropDownButton
aria-expanded={isOpen}
aria-haspopup
diff --git a/wax-prosemirror-services/src/WaxToolGroups/QuestionsDropDownToolGroupService/DropDownComponent.js b/wax-prosemirror-services/src/WaxToolGroups/QuestionsDropDownToolGroupService/DropDownComponent.js
index 438526537..437534088 100644
--- a/wax-prosemirror-services/src/WaxToolGroups/QuestionsDropDownToolGroupService/DropDownComponent.js
+++ b/wax-prosemirror-services/src/WaxToolGroups/QuestionsDropDownToolGroupService/DropDownComponent.js
@@ -9,7 +9,7 @@ import React, {
createRef,
} from 'react';
import styled from 'styled-components';
-import { WaxContext, Icon } from 'wax-prosemirror-core';
+import { WaxContext, Icon, useOnClickOutside } from 'wax-prosemirror-core';
const Wrapper = styled.div`
opacity: ${props => (props.disabled ? '0.4' : '1')};
@@ -67,22 +67,6 @@ const StyledIcon = styled(Icon)`
`;
const DropDownComponent = ({ view, tools }) => {
- const context = useContext(WaxContext);
- const {
- activeView,
- activeViewId,
- pmViews: { main },
- } = context;
- const { state } = view;
-
- const itemRefs = useRef([]);
- const [isOpen, setIsOpen] = useState(false);
-
- const [label, setLabel] = useState(null);
- const isEditable = main.props.editable(editable => {
- return editable;
- });
-
const dropDownOptions = [
{
label: 'Multiple Choice',
@@ -126,6 +110,24 @@ const DropDownComponent = ({ view, tools }) => {
},
];
+ const context = useContext(WaxContext);
+ const {
+ activeView,
+ activeViewId,
+ pmViews: { main },
+ } = context;
+ const { state } = view;
+
+ const itemRefs = useRef([]);
+ const wrapperRef = useRef();
+ const [isOpen, setIsOpen] = useState(false);
+ useOnClickOutside(wrapperRef, () => setIsOpen(false));
+
+ const [label, setLabel] = useState(null);
+ const isEditable = main.props.editable(editable => {
+ return editable;
+ });
+
useEffect(() => {
setLabel('Question Type');
dropDownOptions.forEach(option => {
@@ -186,7 +188,7 @@ const DropDownComponent = ({ view, tools }) => {
const MultipleDropDown = useMemo(
() => (
- <Wrapper disabled={isDisabled}>
+ <Wrapper disabled={isDisabled} ref={wrapperRef}>
<DropDownButton
aria-expanded={isOpen}
aria-haspopup
--
GitLab