40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
|
'use client'
|
||
|
|
|
||
|
|
import type { ReactNode } from 'react'
|
||
|
|
import { useCallback } from 'react'
|
||
|
|
import IntersectionLine from '../intersection-line'
|
||
|
|
import { usePluginPageContext } from '@/app/components/plugins/plugin-page/context'
|
||
|
|
|
||
|
|
type DescriptionWrapperProps = {
|
||
|
|
children: ReactNode
|
||
|
|
}
|
||
|
|
const DescriptionWrapper = ({
|
||
|
|
children,
|
||
|
|
}: DescriptionWrapperProps) => {
|
||
|
|
const containerRef = usePluginPageContext(v => v.containerRef)
|
||
|
|
const scrollDisabled = usePluginPageContext(v => v.scrollDisabled)
|
||
|
|
const setScrollDisabled = usePluginPageContext(v => v.setScrollDisabled)
|
||
|
|
|
||
|
|
const handleScrollIntersectionChange = useCallback((isIntersecting: boolean) => {
|
||
|
|
if (!isIntersecting && !scrollDisabled) {
|
||
|
|
setScrollDisabled(true)
|
||
|
|
setTimeout(() => {
|
||
|
|
if (containerRef && containerRef.current)
|
||
|
|
containerRef.current.scrollTop = 0
|
||
|
|
}, 100)
|
||
|
|
}
|
||
|
|
}, [containerRef, scrollDisabled, setScrollDisabled])
|
||
|
|
|
||
|
|
return !scrollDisabled && (
|
||
|
|
<>
|
||
|
|
{children}
|
||
|
|
<IntersectionLine
|
||
|
|
containerRef={containerRef}
|
||
|
|
intersectedCallback={handleScrollIntersectionChange}
|
||
|
|
/>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default DescriptionWrapper
|