@rolder/kit 3.0.0-alpha.7 → 3.0.0-alpha.8

package/dist/ui/scrollArea/useScrollArea.js

@@ -1,146 +0,0 @@
-import { useDebouncedCallback, useMergedRef, useResizeObserver } from "@mantine/hooks";
-import { useCallback, useEffect, useRef, useState } from "react";
-const useScrollAreaState = (options = {})=>{
-    const { autoScroll = false, scrollToBottomOnInit = false, animated = true, nearThreshold = 32 } = options;
-    const scrollAreaRef = useRef(null);
-    const isUserInteractingRef = useRef(false);
-    const userInteractionTimeoutRef = useRef(void 0);
-    const isInitializedRef = useRef(false);
-    const [contentResizeRef, contentRect] = useResizeObserver();
-    const [scrollPosition, setScrollPosition] = useState({
-        scrollTop: 0,
-        clientHeight: 0,
-        scrollHeight: 0
-    });
-    const isAtTop = 0 === scrollPosition.scrollTop;
-    const isAtBottom = scrollPosition.scrollTop + scrollPosition.clientHeight >= scrollPosition.scrollHeight;
-    const isNearTop = scrollPosition.scrollTop <= nearThreshold;
-    const isNearBottom = scrollPosition.scrollTop + scrollPosition.clientHeight >= scrollPosition.scrollHeight - nearThreshold;
-    const isAboveCenter = scrollPosition.scrollTop < (scrollPosition.scrollHeight - scrollPosition.clientHeight) / 2;
-    const hasScrollableContent = scrollPosition.scrollHeight > scrollPosition.clientHeight;
-    const debouncedUpdatePosition = useDebouncedCallback((element)=>{
-        const newPosition = {
-            scrollTop: element.scrollTop,
-            clientHeight: element.clientHeight,
-            scrollHeight: element.scrollHeight
-        };
-        setScrollPosition(newPosition);
-    }, {
-        delay: 16
-    });
-    const scrollToTop = useCallback((isAnimated)=>{
-        const element = scrollAreaRef.current;
-        if (!element) return;
-        const shouldAnimate = isAnimated ?? animated;
-        if (shouldAnimate) element.scrollTo({
-            top: 0,
-            behavior: 'smooth'
-        });
-        else element.scrollTop = 0;
-    }, [
-        animated
-    ]);
-    const scrollToBottom = useCallback((isAnimated)=>{
-        const element = scrollAreaRef.current;
-        if (!element) return;
-        const shouldAnimate = isAnimated ?? animated;
-        if (shouldAnimate) element.scrollTo({
-            top: element.scrollHeight,
-            behavior: 'smooth'
-        });
-        else element.scrollTop = element.scrollHeight;
-        const scrollHeightBefore = element.scrollHeight;
-        setTimeout(()=>{
-            const scrollHeightAfter = element.scrollHeight;
-            const diff = element.scrollHeight - (element.scrollTop + element.clientHeight);
-            if (diff > 1 && scrollHeightAfter !== scrollHeightBefore) element.scrollTop = element.scrollHeight;
-        }, 50);
-    }, [
-        animated
-    ]);
-    const performAutoScroll = useCallback(()=>{
-        if (!autoScroll || isUserInteractingRef.current || !scrollAreaRef.current) return;
-        if (isAtBottom) scrollToBottom(false);
-    }, [
-        autoScroll,
-        isAtBottom,
-        scrollToBottom
-    ]);
-    const handleUserInteraction = useCallback(()=>{
-        isUserInteractingRef.current = true;
-        if (userInteractionTimeoutRef.current) clearTimeout(userInteractionTimeoutRef.current);
-        userInteractionTimeoutRef.current = setTimeout(()=>{
-            isUserInteractingRef.current = false;
-        }, 150);
-    }, []);
-    const handleScroll = useCallback((event)=>{
-        const element = event.target;
-        debouncedUpdatePosition(element);
-    }, [
-        debouncedUpdatePosition
-    ]);
-    useEffect(()=>{
-        if (!scrollToBottomOnInit || isInitializedRef.current) return;
-        if (hasScrollableContent) {
-            scrollToBottom(animated);
-            isInitializedRef.current = true;
-        }
-    }, [
-        scrollToBottomOnInit,
-        hasScrollableContent,
-        scrollToBottom,
-        animated
-    ]);
-    useEffect(()=>{
-        const element = scrollAreaRef.current;
-        if (!element || 0 === contentRect.height) return;
-        debouncedUpdatePosition(element);
-        const timeoutId = setTimeout(performAutoScroll, 10);
-        return ()=>clearTimeout(timeoutId);
-    }, [
-        contentRect.height,
-        debouncedUpdatePosition,
-        performAutoScroll
-    ]);
-    useEffect(()=>{
-        const element = scrollAreaRef.current;
-        if (!element) return;
-        const events = [
-            'wheel',
-            'touchstart',
-            'touchmove',
-            'mousedown'
-        ];
-        element.addEventListener('scroll', handleScroll);
-        events.forEach((event)=>{
-            element.addEventListener(event, handleUserInteraction);
-        });
-        debouncedUpdatePosition(element);
-        return ()=>{
-            element.removeEventListener('scroll', handleScroll);
-            events.forEach((event)=>{
-                element.removeEventListener(event, handleUserInteraction);
-            });
-            if (userInteractionTimeoutRef.current) clearTimeout(userInteractionTimeoutRef.current);
-        };
-    }, [
-        handleScroll,
-        handleUserInteraction,
-        debouncedUpdatePosition
-    ]);
-    const callbackRef = useMergedRef(scrollAreaRef);
-    return {
-        isAtTop,
-        isNearTop,
-        isAtBottom,
-        isNearBottom,
-        isAboveCenter,
-        hasScrollableContent,
-        scrollToTop,
-        scrollToBottom,
-        viewportRef: scrollAreaRef,
-        _callbackRef: callbackRef,
-        _contentResizeRef: contentResizeRef
-    };
-};
-export { useScrollAreaState };