datajunction-ui 0.0.1-rc.23 → 0.0.1-rc.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,10 +1,23 @@
|
|
|
1
1
|
import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
|
|
2
|
-
import { useState } from 'react';
|
|
2
|
+
import { useEffect, useRef, useState } from 'react';
|
|
3
3
|
import { nightOwl } from 'react-syntax-highlighter/src/styles/hljs';
|
|
4
4
|
import PythonIcon from '../../icons/PythonIcon';
|
|
5
5
|
|
|
6
6
|
export default function ClientCodePopover({ code }) {
|
|
7
7
|
const [codeAnchor, setCodeAnchor] = useState(false);
|
|
8
|
+
const ref = useRef(null);
|
|
9
|
+
|
|
10
|
+
useEffect(() => {
|
|
11
|
+
const handleClickOutside = event => {
|
|
12
|
+
if (ref.current && !ref.current.contains(event.target)) {
|
|
13
|
+
setCodeAnchor(false);
|
|
14
|
+
}
|
|
15
|
+
};
|
|
16
|
+
document.addEventListener('click', handleClickOutside, true);
|
|
17
|
+
return () => {
|
|
18
|
+
document.removeEventListener('click', handleClickOutside, true);
|
|
19
|
+
};
|
|
20
|
+
}, [setCodeAnchor]);
|
|
8
21
|
|
|
9
22
|
return (
|
|
10
23
|
<>
|
|
@@ -22,6 +35,7 @@ export default function ClientCodePopover({ code }) {
|
|
|
22
35
|
role="dialog"
|
|
23
36
|
aria-label="client-code"
|
|
24
37
|
style={{ display: codeAnchor === false ? 'none' : 'block' }}
|
|
38
|
+
ref={ref}
|
|
25
39
|
>
|
|
26
40
|
<SyntaxHighlighter language="python" style={nightOwl}>
|
|
27
41
|
{code}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {useContext, useEffect, useRef, useState} from 'react';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import DJClientContext from '../../providers/djclient';
|
|
4
4
|
import { Form, Formik } from 'formik';
|
|
@@ -9,6 +9,19 @@ import { displayMessageAfterSubmit, labelize } from '../../../utils/form';
|
|
|
9
9
|
export default function EditColumnPopover({ column, node, options, onSubmit }) {
|
|
10
10
|
const djClient = useContext(DJClientContext).DataJunctionAPI;
|
|
11
11
|
const [popoverAnchor, setPopoverAnchor] = useState(false);
|
|
12
|
+
const ref = useRef(null);
|
|
13
|
+
|
|
14
|
+
useEffect(() => {
|
|
15
|
+
const handleClickOutside = event => {
|
|
16
|
+
if (ref.current && !ref.current.contains(event.target)) {
|
|
17
|
+
setPopoverAnchor(false);
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
document.addEventListener('click', handleClickOutside, true);
|
|
21
|
+
return () => {
|
|
22
|
+
document.removeEventListener('click', handleClickOutside, true);
|
|
23
|
+
};
|
|
24
|
+
}, [setPopoverAnchor]);
|
|
12
25
|
|
|
13
26
|
const saveAttributes = async (
|
|
14
27
|
{ node, column, attributes },
|
|
@@ -44,6 +57,7 @@ export default function EditColumnPopover({ column, node, options, onSubmit }) {
|
|
|
44
57
|
role="dialog"
|
|
45
58
|
aria-label="client-code"
|
|
46
59
|
style={{ display: popoverAnchor === false ? 'none' : 'block' }}
|
|
60
|
+
ref={ref}
|
|
47
61
|
>
|
|
48
62
|
<Formik
|
|
49
63
|
initialValues={{
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { useContext, useState } from 'react';
|
|
1
|
+
import { useContext, useEffect, useRef, useState } from 'react';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import DJClientContext from '../../providers/djclient';
|
|
4
4
|
import { Form, Formik } from 'formik';
|
|
@@ -14,6 +14,20 @@ export default function LinkDimensionPopover({
|
|
|
14
14
|
}) {
|
|
15
15
|
const djClient = useContext(DJClientContext).DataJunctionAPI;
|
|
16
16
|
const [popoverAnchor, setPopoverAnchor] = useState(false);
|
|
17
|
+
const ref = useRef(null);
|
|
18
|
+
|
|
19
|
+
useEffect(() => {
|
|
20
|
+
const handleClickOutside = event => {
|
|
21
|
+
if (ref.current && !ref.current.contains(event.target)) {
|
|
22
|
+
setPopoverAnchor(false);
|
|
23
|
+
}
|
|
24
|
+
};
|
|
25
|
+
document.addEventListener('click', handleClickOutside, true);
|
|
26
|
+
return () => {
|
|
27
|
+
document.removeEventListener('click', handleClickOutside, true);
|
|
28
|
+
};
|
|
29
|
+
}, [setPopoverAnchor]);
|
|
30
|
+
|
|
17
31
|
const columnDimension = column.dimension;
|
|
18
32
|
|
|
19
33
|
const handleSubmit = async (
|
|
@@ -73,6 +87,7 @@ export default function LinkDimensionPopover({
|
|
|
73
87
|
role="dialog"
|
|
74
88
|
aria-label="client-code"
|
|
75
89
|
style={{ display: popoverAnchor === false ? 'none' : 'block' }}
|
|
90
|
+
ref={ref}
|
|
76
91
|
>
|
|
77
92
|
<Formik
|
|
78
93
|
initialValues={{
|