@contember/react-utils 1.2.0-rc.16 → 1.2.0-rc.18

package/src/hooks/useOnScrollWithin.ts

@@ -19,49 +19,50 @@ export function useOnScrollWithin(
 	const callbackRef = useRef(callback); callbackRef.current = callback
 	const lastTimeStamp = useRef<number>(0)
 
-	const element = unwrapRefValue(refOrElement)
-
 	useLayoutEffect(() => {
+		const element = unwrapRefValue(refOrElement)
+
 		let timeoutID: number | undefined = undefined
 
-		function debouncedHandler(event: Event) {
-			clearTimeout(timeoutID)
+		if (element) {
+			function debouncedHandler(event: Event) {
+				clearTimeout(timeoutID)
 
-			const delta = event.timeStamp - lastTimeStamp.current
-			scopedConsoleRef.current.logged('event:element.scroll:delta', delta)
+				const delta = event.timeStamp - lastTimeStamp.current
+				scopedConsoleRef.current.logged('event:element.scroll:delta', delta)
 
-			if (delta > interval) {
-				scopedConsoleRef.current.warned('event:element.scroll:immediately', event)
-				callbackRef.current(event)
-				lastTimeStamp.current = event.timeStamp
-			} else {
-				timeoutID = setTimeout(() => {
-					scopedConsoleRef.current.warned('event:element.scroll:debounced', event)
-					lastTimeStamp.current = event.timeStamp
+				if (delta > interval) {
+					scopedConsoleRef.current.warned('event:element.scroll:immediately', event)
 					callbackRef.current(event)
-				}, interval)
+					lastTimeStamp.current = event.timeStamp
+				} else {
+					timeoutID = setTimeout(() => {
+						scopedConsoleRef.current.warned('event:element.scroll:debounced', event)
+						lastTimeStamp.current = event.timeStamp
+						callbackRef.current(event)
+					}, interval)
+				}
 			}
-		}
 
-		if (element && element instanceof HTMLElement) {
-			if (element instanceof HTMLBodyElement || element instanceof HTMLHtmlElement) {
-				window.addEventListener('scroll', debouncedHandler, { capture: true, passive: true })
-				window.addEventListener('resize', debouncedHandler)
+			if (element instanceof HTMLElement) {
+				if (element instanceof HTMLBodyElement || element instanceof HTMLHtmlElement) {
+					window.addEventListener('scroll', debouncedHandler, { capture: true, passive: true })
+					window.addEventListener('resize', debouncedHandler)
 
-				return () => {
-					window.removeEventListener('scroll', debouncedHandler)
-					window.removeEventListener('resize', debouncedHandler)
-				}
-			} else {
-				element.addEventListener('scroll', debouncedHandler, { passive: true, capture: true })
+					return () => {
+						window.removeEventListener('scroll', debouncedHandler)
+						window.removeEventListener('resize', debouncedHandler)
+					}
+				} else {
+					element.addEventListener('scroll', debouncedHandler, { passive: true, capture: true })
 
-				return () => {
-					element.removeEventListener('scroll', debouncedHandler)
+					return () => {
+						element.removeEventListener('scroll', debouncedHandler)
+					}
 				}
 			}
-		} else if (element) {
+		} else {
 			throw new Error('Exhaustive error: Expecting element to be instance of HTMLElement')
 		}
-
-	}, [element, interval, scopedConsoleRef])
+	}, [interval, refOrElement, scopedConsoleRef])
 }