61 lines
1.6 KiB
TypeScript
61 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { useCallback, useEffect, useRef, useState } from "react";
|
|
|
|
import { cn } from "@turbostarter/ui";
|
|
|
|
interface ScrollContainerProps {
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export function ScrollContainer({ children, className }: ScrollContainerProps) {
|
|
const scrollRef = useRef<HTMLDivElement>(null);
|
|
const [_canScrollUp, setCanScrollUp] = useState(false);
|
|
const [_canScrollDown, setCanScrollDown] = useState(false);
|
|
|
|
const updateScrollState = useCallback(() => {
|
|
const el = scrollRef.current;
|
|
if (!el) return;
|
|
|
|
const { scrollTop, scrollHeight, clientHeight } = el;
|
|
setCanScrollUp(scrollTop > 1);
|
|
setCanScrollDown(scrollTop + clientHeight < scrollHeight - 1);
|
|
}, []);
|
|
|
|
// Check on mount, resize, and content changes
|
|
useEffect(() => {
|
|
const el = scrollRef.current;
|
|
if (!el) return;
|
|
|
|
// Initial check
|
|
updateScrollState();
|
|
|
|
// Watch for size changes
|
|
const observer = new ResizeObserver(updateScrollState);
|
|
observer.observe(el);
|
|
|
|
// Also observe children for content changes
|
|
const mutationObserver = new MutationObserver(updateScrollState);
|
|
mutationObserver.observe(el, { childList: true, subtree: true });
|
|
|
|
return () => {
|
|
observer.disconnect();
|
|
mutationObserver.disconnect();
|
|
};
|
|
}, [updateScrollState]);
|
|
|
|
return (
|
|
<div className={cn("relative flex-1 overflow-hidden", className)}>
|
|
{/* Scroll content - shadows removed, handled by individual components */}
|
|
<div
|
|
ref={scrollRef}
|
|
onScroll={updateScrollState}
|
|
className="h-full overflow-auto"
|
|
>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|