Permissions popup context iso
This commit is contained in:
parent
f3715411c6
commit
7b5faa1cc1
49 changed files with 562 additions and 506 deletions
64
ts/hooks/useIntersectionObserver.ts
Normal file
64
ts/hooks/useIntersectionObserver.ts
Normal file
|
@ -0,0 +1,64 @@
|
|||
// Copyright 2020-2021 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import { useCallback, useRef, useState } from 'react';
|
||||
import * as log from '../logging/log';
|
||||
|
||||
/**
|
||||
* A light hook wrapper around `IntersectionObserver`.
|
||||
*
|
||||
* Example usage:
|
||||
*
|
||||
* function MyComponent() {
|
||||
* const [intersectionRef, intersectionEntry] = useIntersectionObserver();
|
||||
* const isVisible = intersectionEntry
|
||||
* ? intersectionEntry.isIntersecting
|
||||
* : true;
|
||||
*
|
||||
* return (
|
||||
* <div ref={intersectionRef}>
|
||||
* I am {isVisible ? 'on the screen' : 'invisible'}
|
||||
* </div>
|
||||
* );
|
||||
* }
|
||||
*/
|
||||
export function useIntersectionObserver(): [
|
||||
(el?: Element | null) => void,
|
||||
IntersectionObserverEntry | null
|
||||
] {
|
||||
const [
|
||||
intersectionObserverEntry,
|
||||
setIntersectionObserverEntry,
|
||||
] = useState<IntersectionObserverEntry | null>(null);
|
||||
|
||||
const unobserveRef = useRef<(() => unknown) | null>(null);
|
||||
|
||||
const setRef = useCallback((el?: Element | null) => {
|
||||
if (unobserveRef.current) {
|
||||
unobserveRef.current();
|
||||
unobserveRef.current = null;
|
||||
}
|
||||
|
||||
if (!el) {
|
||||
return;
|
||||
}
|
||||
|
||||
const observer = new IntersectionObserver(entries => {
|
||||
if (entries.length !== 1) {
|
||||
log.error(
|
||||
'IntersectionObserverWrapper was observing the wrong number of elements'
|
||||
);
|
||||
return;
|
||||
}
|
||||
entries.forEach(entry => {
|
||||
setIntersectionObserverEntry(entry);
|
||||
});
|
||||
});
|
||||
|
||||
unobserveRef.current = observer.unobserve.bind(observer, el);
|
||||
|
||||
observer.observe(el);
|
||||
}, []);
|
||||
|
||||
return [setRef, intersectionObserverEntry];
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue