@gustavo-valsechi/client 1.4.81 → 1.4.84
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.
|
@@ -44,6 +44,45 @@ const TargetProviderContainer = ({ children }) => {
|
|
|
44
44
|
const containerRef = (0, import_react.useRef)([]);
|
|
45
45
|
const [targets, setTargets] = (0, import_react.useState)([]);
|
|
46
46
|
const [inside, setInside] = (0, import_react.useState)(false);
|
|
47
|
+
(0, import_react.useEffect)(() => {
|
|
48
|
+
const handleScroll = () => {
|
|
49
|
+
if (inside) return;
|
|
50
|
+
import_lodash.default.forEach(containerRef.current, (elementRef) => {
|
|
51
|
+
elementRef.style.opacity = "0";
|
|
52
|
+
elementRef.style.zIndex = "-1";
|
|
53
|
+
});
|
|
54
|
+
};
|
|
55
|
+
window.addEventListener("scroll", handleScroll, { passive: true });
|
|
56
|
+
const addScrollListener = (el) => {
|
|
57
|
+
el.addEventListener("scroll", handleScroll, { passive: true });
|
|
58
|
+
};
|
|
59
|
+
const scrollables = document.querySelectorAll("*");
|
|
60
|
+
scrollables.forEach((el) => {
|
|
61
|
+
const style = getComputedStyle(el);
|
|
62
|
+
if (/(auto|scroll|overlay)/.test(style.overflow + style.overflowY + style.overflowX)) {
|
|
63
|
+
addScrollListener(el);
|
|
64
|
+
}
|
|
65
|
+
});
|
|
66
|
+
const observer = new MutationObserver((mutations) => {
|
|
67
|
+
for (const mutation of mutations) {
|
|
68
|
+
mutation.addedNodes.forEach((node) => {
|
|
69
|
+
if (!(node instanceof HTMLElement)) return;
|
|
70
|
+
const style = getComputedStyle(node);
|
|
71
|
+
if (/(auto|scroll|overlay)/.test(style.overflow + style.overflowY + style.overflowX)) {
|
|
72
|
+
addScrollListener(node);
|
|
73
|
+
}
|
|
74
|
+
});
|
|
75
|
+
}
|
|
76
|
+
});
|
|
77
|
+
observer.observe(document.body, { childList: true, subtree: true });
|
|
78
|
+
return () => {
|
|
79
|
+
window.removeEventListener("scroll", handleScroll);
|
|
80
|
+
document.querySelectorAll("*").forEach((el) => {
|
|
81
|
+
el.removeEventListener("scroll", handleScroll);
|
|
82
|
+
});
|
|
83
|
+
observer.disconnect();
|
|
84
|
+
};
|
|
85
|
+
}, [inside]);
|
|
47
86
|
(0, import_react.useEffect)(() => {
|
|
48
87
|
import_lodash.default.forEach(targets, (target, index) => {
|
|
49
88
|
var _a;
|
|
@@ -64,6 +103,12 @@ const TargetProviderContainer = ({ children }) => {
|
|
|
64
103
|
targetElement.style.zIndex = "10";
|
|
65
104
|
inputRef.current[index].focus();
|
|
66
105
|
});
|
|
106
|
+
element.addEventListener("resize", () => {
|
|
107
|
+
import_lodash.default.forEach(containerRef.current, (elementRef) => {
|
|
108
|
+
elementRef.style.opacity = "0";
|
|
109
|
+
elementRef.style.zIndex = "-1";
|
|
110
|
+
});
|
|
111
|
+
});
|
|
67
112
|
});
|
|
68
113
|
}, [targets, inputRef, containerRef]);
|
|
69
114
|
const getCoords = (target) => {
|
|
@@ -126,7 +171,7 @@ const TargetProviderContainer = ({ children }) => {
|
|
|
126
171
|
ref: (element) => inputRef.current[index] = element,
|
|
127
172
|
onBlur: () => {
|
|
128
173
|
if (inside) return;
|
|
129
|
-
target.ref.current
|
|
174
|
+
target.ref.current.click();
|
|
130
175
|
}
|
|
131
176
|
}
|
|
132
177
|
)
|
|
@@ -10,6 +10,45 @@ const TargetProviderContainer = ({ children }) => {
|
|
|
10
10
|
const containerRef = useRef([]);
|
|
11
11
|
const [targets, setTargets] = useState([]);
|
|
12
12
|
const [inside, setInside] = useState(false);
|
|
13
|
+
useEffect(() => {
|
|
14
|
+
const handleScroll = () => {
|
|
15
|
+
if (inside) return;
|
|
16
|
+
_.forEach(containerRef.current, (elementRef) => {
|
|
17
|
+
elementRef.style.opacity = "0";
|
|
18
|
+
elementRef.style.zIndex = "-1";
|
|
19
|
+
});
|
|
20
|
+
};
|
|
21
|
+
window.addEventListener("scroll", handleScroll, { passive: true });
|
|
22
|
+
const addScrollListener = (el) => {
|
|
23
|
+
el.addEventListener("scroll", handleScroll, { passive: true });
|
|
24
|
+
};
|
|
25
|
+
const scrollables = document.querySelectorAll("*");
|
|
26
|
+
scrollables.forEach((el) => {
|
|
27
|
+
const style = getComputedStyle(el);
|
|
28
|
+
if (/(auto|scroll|overlay)/.test(style.overflow + style.overflowY + style.overflowX)) {
|
|
29
|
+
addScrollListener(el);
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
const observer = new MutationObserver((mutations) => {
|
|
33
|
+
for (const mutation of mutations) {
|
|
34
|
+
mutation.addedNodes.forEach((node) => {
|
|
35
|
+
if (!(node instanceof HTMLElement)) return;
|
|
36
|
+
const style = getComputedStyle(node);
|
|
37
|
+
if (/(auto|scroll|overlay)/.test(style.overflow + style.overflowY + style.overflowX)) {
|
|
38
|
+
addScrollListener(node);
|
|
39
|
+
}
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
});
|
|
43
|
+
observer.observe(document.body, { childList: true, subtree: true });
|
|
44
|
+
return () => {
|
|
45
|
+
window.removeEventListener("scroll", handleScroll);
|
|
46
|
+
document.querySelectorAll("*").forEach((el) => {
|
|
47
|
+
el.removeEventListener("scroll", handleScroll);
|
|
48
|
+
});
|
|
49
|
+
observer.disconnect();
|
|
50
|
+
};
|
|
51
|
+
}, [inside]);
|
|
13
52
|
useEffect(() => {
|
|
14
53
|
_.forEach(targets, (target, index) => {
|
|
15
54
|
var _a;
|
|
@@ -30,6 +69,12 @@ const TargetProviderContainer = ({ children }) => {
|
|
|
30
69
|
targetElement.style.zIndex = "10";
|
|
31
70
|
inputRef.current[index].focus();
|
|
32
71
|
});
|
|
72
|
+
element.addEventListener("resize", () => {
|
|
73
|
+
_.forEach(containerRef.current, (elementRef) => {
|
|
74
|
+
elementRef.style.opacity = "0";
|
|
75
|
+
elementRef.style.zIndex = "-1";
|
|
76
|
+
});
|
|
77
|
+
});
|
|
33
78
|
});
|
|
34
79
|
}, [targets, inputRef, containerRef]);
|
|
35
80
|
const getCoords = (target) => {
|
|
@@ -92,7 +137,7 @@ const TargetProviderContainer = ({ children }) => {
|
|
|
92
137
|
ref: (element) => inputRef.current[index] = element,
|
|
93
138
|
onBlur: () => {
|
|
94
139
|
if (inside) return;
|
|
95
|
-
target.ref.current
|
|
140
|
+
target.ref.current.click();
|
|
96
141
|
}
|
|
97
142
|
}
|
|
98
143
|
)
|