factor our observer hook
parent
9eb0986353
commit
1c2dc13fa3
|
@ -365,6 +365,31 @@ export const useSpaceSummary = (space: Room): {
|
||||||
return { loading, rooms, hierarchy, loadMore };
|
return { loading, rooms, hierarchy, loadMore };
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const useIntersectionObserver = (callback: () => void) => {
|
||||||
|
const handleObserver = (entries: IntersectionObserverEntry[]) => {
|
||||||
|
const target = entries[0];
|
||||||
|
if (target.isIntersecting) {
|
||||||
|
callback();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const observerRef = useRef<IntersectionObserver>();
|
||||||
|
return (element: HTMLDivElement) => {
|
||||||
|
if (observerRef.current) {
|
||||||
|
observerRef.current.disconnect();
|
||||||
|
} else if (element) {
|
||||||
|
observerRef.current = new IntersectionObserver(handleObserver, {
|
||||||
|
root: element.parentElement,
|
||||||
|
rootMargin: "0px 0px 600px 0px",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (observerRef.current && element) {
|
||||||
|
observerRef.current.observe(element);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
const SpaceHierarchy = ({
|
const SpaceHierarchy = ({
|
||||||
space,
|
space,
|
||||||
initialText = "",
|
initialText = "",
|
||||||
|
@ -408,28 +433,7 @@ const SpaceHierarchy = ({
|
||||||
const [removing, setRemoving] = useState(false);
|
const [removing, setRemoving] = useState(false);
|
||||||
const [saving, setSaving] = useState(false);
|
const [saving, setSaving] = useState(false);
|
||||||
|
|
||||||
const handleObserver = (entries: IntersectionObserverEntry[]) => {
|
const loaderRef = useIntersectionObserver(loadMore);
|
||||||
const target = entries[0];
|
|
||||||
if (target.isIntersecting) {
|
|
||||||
loadMore();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const observerRef = useRef<IntersectionObserver>();
|
|
||||||
const loaderRef = (element: HTMLDivElement) => {
|
|
||||||
if (observerRef.current) {
|
|
||||||
observerRef.current.disconnect();
|
|
||||||
} else if (element) {
|
|
||||||
observerRef.current = new IntersectionObserver(handleObserver, {
|
|
||||||
root: element.parentElement,
|
|
||||||
rootMargin: "0px 0px 600px 0px",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
if (observerRef.current && element) {
|
|
||||||
observerRef.current.observe(element);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
if (!loading && hierarchy.noSupport) {
|
if (!loading && hierarchy.noSupport) {
|
||||||
return <p>{ _t("Your server does not support showing space hierarchies.") }</p>;
|
return <p>{ _t("Your server does not support showing space hierarchies.") }</p>;
|
||||||
|
|
Loading…
Reference in New Issue