42 lines
No EOL
1.1 KiB
TypeScript
42 lines
No EOL
1.1 KiB
TypeScript
import { useEffect, useState, useRef } from 'react'
|
|
import useLatestRef from 'App/hooks/useLatestRef'
|
|
import useCancelableTimeout from 'App/hooks/useCancelableTimeout'
|
|
|
|
const TIMEOUT_DURATION = 5000;
|
|
|
|
export default function useAutoscroll(
|
|
savedIndex: number,
|
|
autoscrollIndex: number,
|
|
updadteIndex: (index: number) => void,
|
|
) {
|
|
const [ autoscroll, setAutoscroll ] = useState(savedIndex === 0)
|
|
|
|
const [ timeoutStartAutoscroll, stopAutoscroll ] = useCancelableTimeout(
|
|
() => setAutoscroll(true),
|
|
() => setAutoscroll(false),
|
|
TIMEOUT_DURATION,
|
|
)
|
|
useEffect(() => {
|
|
if (autoscroll && autoscrollIndex !== savedIndex) {
|
|
updadteIndex(autoscrollIndex)
|
|
}
|
|
}, [ autoscroll, autoscrollIndex ])
|
|
|
|
const autoScrollRef = useLatestRef(autoscroll)
|
|
useEffect(() => {
|
|
if (!autoscroll) {
|
|
timeoutStartAutoscroll()
|
|
}
|
|
return () => {
|
|
if (autoScrollRef.current) {
|
|
updadteIndex(0) // index:0 means autoscroll is active
|
|
}
|
|
}
|
|
}, [])
|
|
|
|
return {
|
|
autoscrollIndex,
|
|
timeoutStartAutoscroll,
|
|
stopAutoscroll,
|
|
}
|
|
} |