31 lines
1.2 KiB
TypeScript
31 lines
1.2 KiB
TypeScript
|
import { useEffect } from 'react'
|
||
|
|
import { useContextSelector } from 'use-context-selector'
|
||
|
|
import { PluginPageContext } from '../../plugin-page/context'
|
||
|
|
import { MarketplaceContext } from '../context'
|
||
|
|
|
||
|
|
export const useScrollIntersection = (
|
||
|
|
anchorRef: React.RefObject<HTMLDivElement>,
|
||
|
|
) => {
|
||
|
|
const containerRef = useContextSelector(PluginPageContext, v => v.containerRef)
|
||
|
|
const scrollIntersected = useContextSelector(MarketplaceContext, v => v.scrollIntersected)
|
||
|
|
const setScrollIntersected = useContextSelector(MarketplaceContext, v => v.setScrollIntersected)
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
let observer: IntersectionObserver | undefined
|
||
|
|
if (containerRef.current && anchorRef.current) {
|
||
|
|
observer = new IntersectionObserver((entries) => {
|
||
|
|
console.log(entries, 'entries')
|
||
|
|
if (entries[0].isIntersecting && !scrollIntersected)
|
||
|
|
setScrollIntersected(true)
|
||
|
|
|
||
|
|
if (!entries[0].isIntersecting && scrollIntersected)
|
||
|
|
setScrollIntersected(false)
|
||
|
|
}, {
|
||
|
|
root: containerRef.current,
|
||
|
|
})
|
||
|
|
observer.observe(anchorRef.current)
|
||
|
|
}
|
||
|
|
return () => observer?.disconnect()
|
||
|
|
}, [containerRef, anchorRef, scrollIntersected, setScrollIntersected])
|
||
|
|
}
|