playbook_ui 12.34.0.pre.alpha.fixdialogcloseevents1004 → 12.34.0.pre.alpha.play716popoverkitcloseonclickissue998
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_dialog/dialogHelper.js +3 -7
- data/app/pb_kits/playbook/pb_popover/_popover.tsx +14 -6
- data/app/pb_kits/playbook/pb_popover/docs/_popover_close.jsx +2 -0
- data/app/pb_kits/playbook/pb_popover/index.ts +5 -2
- data/dist/playbook-rails.js +7 -7
- data/lib/playbook/version.rb +1 -1
- metadata +1 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: de8314a6b967b5e972e46892edd4fe1c7b9dfcb9ca199120cc898e92724b137a
|
4
|
+
data.tar.gz: 4f323f8d98c5219d26de002ed897bf31ab5dee71af172727559e3b1aca47b04c
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 2fb6010127b3e609045f7b7b6ba41aa650ed266e00b8b0660a4b9e544568300b2a7a7722a6b43f9913bc2791ef7234522b303433a566fa52bf95345ecf13ef89
|
7
|
+
data.tar.gz: 4bf867ee4ee1ef8fa70d12a0fd5bd61efbdbab94d0a7b03f3060857eac345c75c4de7a02bb65ef200f5a5c1e801317d6e8208e55cba22f8fee32a553728860ae
|
@@ -21,17 +21,13 @@ const dialogHelper = () => {
|
|
21
21
|
|
22
22
|
// Close dialog box on outside click
|
23
23
|
dialogs.forEach((dialogElement) => {
|
24
|
-
dialogElement.addEventListener("
|
24
|
+
dialogElement.addEventListener("click", (event) => {
|
25
25
|
const dialogParentDataset = dialogElement.parentElement.dataset
|
26
26
|
if (dialogParentDataset.overlayClick === "overlay_close") return
|
27
27
|
|
28
|
-
const
|
29
|
-
const clickedOutsideDialogModal = event.clientX < dialogModal.left ||
|
30
|
-
event.clientX > dialogModal.right ||
|
31
|
-
event.clientY < dialogModal.top ||
|
32
|
-
event.clientY > dialogModal.bottom
|
28
|
+
const clickedOutsideDialogBox = event.target.classList.contains("pb_dialog_rails")
|
33
29
|
|
34
|
-
if (
|
30
|
+
if (clickedOutsideDialogBox) {
|
35
31
|
dialogElement.close()
|
36
32
|
event.stopPropagation()
|
37
33
|
}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
import React, { useEffect } from "react";
|
1
|
+
import React, { useEffect, useState } from "react";
|
2
2
|
import ReactDOM from "react-dom";
|
3
3
|
import {
|
4
4
|
Popper,
|
@@ -17,6 +17,7 @@ import {
|
|
17
17
|
|
18
18
|
import classnames from "classnames";
|
19
19
|
import { globalProps, GlobalProps } from "../utilities/globalProps";
|
20
|
+
import _uniqueId from 'lodash/uniqueId';
|
20
21
|
|
21
22
|
type PbPopoverProps = {
|
22
23
|
aria?: { [key: string]: string };
|
@@ -72,6 +73,7 @@ const Popover = (props: PbPopoverProps) => {
|
|
72
73
|
maxWidth,
|
73
74
|
minHeight,
|
74
75
|
minWidth,
|
76
|
+
targetId,
|
75
77
|
} = props;
|
76
78
|
|
77
79
|
const popoverSpacing =
|
@@ -123,6 +125,7 @@ const Popover = (props: PbPopoverProps) => {
|
|
123
125
|
popoverSpacing,
|
124
126
|
overflowHandling
|
125
127
|
)}
|
128
|
+
id={targetId}
|
126
129
|
style={widthHeightStyles()}
|
127
130
|
>
|
128
131
|
{children}
|
@@ -136,6 +139,7 @@ const Popover = (props: PbPopoverProps) => {
|
|
136
139
|
};
|
137
140
|
|
138
141
|
const PbReactPopover = (props: PbPopoverProps) => {
|
142
|
+
const [targetId] = useState(_uniqueId('id-'))
|
139
143
|
const {
|
140
144
|
className,
|
141
145
|
children,
|
@@ -163,25 +167,27 @@ const PbReactPopover = (props: PbPopoverProps) => {
|
|
163
167
|
"click",
|
164
168
|
({ target }) => {
|
165
169
|
const targetIsPopover =
|
166
|
-
(target as HTMLElement).closest("
|
170
|
+
(target as HTMLElement).closest("#" + targetId) !==
|
167
171
|
null;
|
168
172
|
const targetIsReference =
|
169
|
-
(target as HTMLElement).closest("
|
173
|
+
(target as HTMLElement).closest("#reference-" + targetId) !==
|
170
174
|
null;
|
171
175
|
|
172
176
|
switch (closeOnClick) {
|
173
177
|
case "outside":
|
174
|
-
if (!targetIsPopover
|
178
|
+
if (!targetIsPopover && !targetIsReference) {
|
175
179
|
shouldClosePopover(true);
|
176
180
|
}
|
177
181
|
break;
|
178
182
|
case "inside":
|
179
|
-
if (targetIsPopover
|
183
|
+
if (targetIsPopover) {
|
180
184
|
shouldClosePopover(true);
|
181
185
|
}
|
182
186
|
break;
|
183
187
|
case "any":
|
184
|
-
|
188
|
+
if (targetIsPopover || !targetIsPopover && !targetIsReference) {
|
189
|
+
shouldClosePopover(true);
|
190
|
+
}
|
185
191
|
break;
|
186
192
|
}
|
187
193
|
},
|
@@ -200,6 +206,7 @@ const PbReactPopover = (props: PbPopoverProps) => {
|
|
200
206
|
offset={offset}
|
201
207
|
placement={placement}
|
202
208
|
referenceElement={referenceElement}
|
209
|
+
targetId={targetId}
|
203
210
|
zIndex={zIndex}
|
204
211
|
{...props}
|
205
212
|
>
|
@@ -214,6 +221,7 @@ const PbReactPopover = (props: PbPopoverProps) => {
|
|
214
221
|
<PopperReference>
|
215
222
|
{({ ref }) => (
|
216
223
|
<span
|
224
|
+
id={"reference-" + targetId}
|
217
225
|
className="pb_popover_reference_wrapper"
|
218
226
|
ref={ref}>
|
219
227
|
<reference.type {...reference.props} />
|
@@ -24,6 +24,7 @@ const PopoverClose = (props) => {
|
|
24
24
|
|
25
25
|
const handleOutsideTogglePopover = () => {
|
26
26
|
setOutsideShowPopover(!showOutsidePopover)
|
27
|
+
setAnyShowPopover(false)
|
27
28
|
}
|
28
29
|
|
29
30
|
const handleAnyShouldClosePopover = (shouldClosePopover) => {
|
@@ -32,6 +33,7 @@ const PopoverClose = (props) => {
|
|
32
33
|
|
33
34
|
const handleAnyTogglePopover = () => {
|
34
35
|
setAnyShowPopover(!showAnyPopover)
|
36
|
+
setOutsideShowPopover(false)
|
35
37
|
}
|
36
38
|
|
37
39
|
const insidePopoverTrigger = (
|
@@ -49,13 +49,16 @@ export default class PbPopover extends PbEnhancedElement {
|
|
49
49
|
checkCloseTooltip() {
|
50
50
|
document.querySelector('body').addEventListener('click', ({ target } ) => {
|
51
51
|
const isTooltipElement = (target as HTMLElement).closest(`#${this.tooltipId}`) !== null
|
52
|
+
const isTriggerElement = (target as HTMLElement).closest(`#${this.triggerElementId}`) !== null
|
52
53
|
|
53
54
|
switch (this.closeOnClick) {
|
54
55
|
case 'any':
|
55
|
-
|
56
|
+
if (isTooltipElement || !isTooltipElement && !isTriggerElement) {
|
57
|
+
this.hideTooltip()
|
58
|
+
}
|
56
59
|
break
|
57
60
|
case 'outside':
|
58
|
-
if (!isTooltipElement) {
|
61
|
+
if (!isTooltipElement && !isTriggerElement) {
|
59
62
|
this.hideTooltip()
|
60
63
|
}
|
61
64
|
break
|