Mirror: React hooks for accessible, common web interactions. UI super powers without the UI.
make ssr-friendly for next.js (#9)
* make ssr-friendly for next.js
* Update src/utils/observeScrollArea.ts
Co-authored-by: Phil Pluckthun <phil@kitten.sh>
---------
Co-authored-by: Phil Pluckthun <phil@kitten.sh>
authored by
Jovi De Croock
Phil Pluckthun
and committed by
GitHub
4f7967f0
617ca61c
+18
-15
+18
-15
src/utils/observeScrollArea.ts
+18
-15
src/utils/observeScrollArea.ts
···
2
2
const mutationObservers: Map<HTMLElement, MutationObserver> = new Map();
3
3
const resizeListeners: Map<HTMLElement, Array<() => void>> = new Map();
4
4
5
-
const resizeObserver = new ResizeObserver(entries => {
6
-
const parents = new Set<Element>();
7
-
for (let i = 0; i < entries.length; i++) {
8
-
const parent = entries[i].target.parentElement;
9
-
if (parent && !parents.has(parent)) {
10
-
parents.add(parent);
11
-
const listeners = resizeListeners.get(parent) || [];
12
-
for (let i = 0; i < listeners.length; i++) listeners[i]();
13
-
}
14
-
}
15
-
});
5
+
const resizeObserver =
6
+
typeof ResizeObserver !== 'undefined'
7
+
? new ResizeObserver(entries => {
8
+
const parents = new Set<Element>();
9
+
for (let i = 0; i < entries.length; i++) {
10
+
const parent = entries[i].target.parentElement;
11
+
if (parent && !parents.has(parent)) {
12
+
parents.add(parent);
13
+
const listeners = resizeListeners.get(parent) || [];
14
+
for (let i = 0; i < listeners.length; i++) listeners[i]();
15
+
}
16
+
}
17
+
})
18
+
: undefined;
16
19
17
20
export function observeScrollArea(
18
21
element: HTMLElement,
···
41
44
for (let j = 0; j < entry.addedNodes.length; j++) {
42
45
const node = entry.addedNodes[j];
43
46
if (node.nodeType === Node.ELEMENT_NODE) {
44
-
resizeObserver.observe(node as Element, resizeOptions);
47
+
resizeObserver!.observe(node as Element, resizeOptions);
45
48
}
46
49
}
47
50
48
51
for (let j = 0; j < entry.removedNodes.length; j++) {
49
52
const node = entry.removedNodes[j];
50
53
if (node.nodeType === Node.ELEMENT_NODE) {
51
-
resizeObserver.unobserve(node as Element);
54
+
resizeObserver!.unobserve(node as Element);
52
55
}
53
56
}
54
57
}
···
58
61
const childNodes = element.childNodes;
59
62
for (let i = 0; i < childNodes.length; i++)
60
63
if (childNodes[i].nodeType === Node.ELEMENT_NODE)
61
-
resizeObserver.observe(childNodes[i] as Element, resizeOptions);
64
+
resizeObserver!.observe(childNodes[i] as Element, resizeOptions);
62
65
mutationObserver.observe(element, { childList: true });
63
66
});
64
67
···
77
80
const childNodes = element.childNodes;
78
81
for (let i = 0; i < childNodes.length; i++)
79
82
if (childNodes[i].nodeType === Node.ELEMENT_NODE)
80
-
resizeObserver.unobserve(childNodes[i] as Element);
83
+
resizeObserver!.unobserve(childNodes[i] as Element);
81
84
82
85
resizeListeners.delete(element);
83
86
mutationObservers.delete(element);