"use client"; // Adapted from beui.dev/components/blocks/infinite-masonry import { useVirtualizer } from "@tanstack/react-virtual"; import { AlertCircle, Inbox } from "lucide-react"; import { motion, useReducedMotion } from "motion/react"; import { useCallback, useEffect, useRef, useState, type MutableRefObject, type ReactNode, } from "react"; import { cn } from "@/lib/utils"; /** Motion tokens — inlined so the registry file stays self-contained. */ const EASE_OUT = [0.16, 1, 0.3, 1] as const; const SPRING_PANEL = { type: "spring" as const, stiffness: 420, damping: 40, mass: 0.5, }; function faNum(n: number) { return n.toLocaleString("fa-IR"); } export type InfiniteMasonryKey = string | number | bigint; export interface InfiniteMasonryProps { items: readonly T[]; getItemKey: (item: T, index: number) => InfiniteMasonryKey; renderItem: (item: T, index: number) => ReactNode; onLoadMore: () => void | Promise; hasMore: boolean; loading?: boolean; error?: ReactNode; onRetry?: () => void; estimateSize?: (item: T, index: number) => number; renderLoadingItem?: (index: number) => ReactNode; emptyState?: ReactNode; endState?: ReactNode; minColumnWidth?: number; maxColumns?: number; gap?: number; overscan?: number; prefetch?: number; animateItems?: boolean; ariaLabel?: string; className?: string; contentClassName?: string; itemClassName?: string; } type MasonryMetrics = { columns: number; width: number; }; function useMasonryMetrics({ elementRef, gap, maxColumns, minColumnWidth, }: { elementRef: React.RefObject; gap: number; maxColumns: number; minColumnWidth: number; }) { const [metrics, setMetrics] = useState({ columns: 1, width: 0, }); useEffect(() => { const element = elementRef.current; if (!element) return; const update = (width: number) => { const columns = Math.min( maxColumns, Math.max(1, Math.floor((width + gap) / (minColumnWidth + gap))), ); setMetrics((current) => current.columns === columns && current.width === width ? current : { columns, width }, ); }; update(element.getBoundingClientRect().width); const observer = new ResizeObserver(([entry]) => { update(entry.contentRect.width); }); observer.observe(element); return () => observer.disconnect(); }, [elementRef, gap, maxColumns, minColumnWidth]); return metrics; } function DefaultLoadingItem({ index }: { index: number }) { return (

); } function DefaultEmptyState() { return (

); } function MasonryItemReveal({ itemKey, lane, revealedKeys, animate, children, }: { itemKey: InfiniteMasonryKey; lane: number; revealedKeys: MutableRefObject>; animate: boolean; children: ReactNode; }) { const [shouldReveal] = useState( () => animate && !revealedKeys.current.has(itemKey), ); useEffect(() => { revealedKeys.current.add(itemKey); }, [itemKey, revealedKeys]); const delay = Math.min(lane, 3) * 0.04; return ( {children} ); } export function InfiniteMasonry({ items, getItemKey, renderItem, onLoadMore, hasMore, loading = false, error, onRetry, estimateSize = () => 240, renderLoadingItem = (index) => , emptyState = , endState, minColumnWidth = 208, maxColumns = 4, gap = 12, overscan = 4, prefetch = 3, animateItems = true, ariaLabel = "فهرست میسونری بی‌نهایت", className, contentClassName, itemClassName, }: InfiniteMasonryProps) { const reduceMotion = useReducedMotion(); const scrollRef = useRef(null); const contentRef = useRef(null); const loadMoreRef = useRef(onLoadMore); const loadPendingRef = useRef(false); const initialItemCountRef = useRef(items.length); const revealedKeysRef = useRef(new Set()); const { columns, width } = useMasonryMetrics({ elementRef: contentRef, gap, maxColumns, minColumnWidth, }); useEffect(() => { loadMoreRef.current = onLoadMore; }, [onLoadMore]); useEffect(() => { if (!loading) loadPendingRef.current = false; }, [loading]); const hasError = error !== undefined && error !== null; const tailCount = hasError ? 1 : loading ? columns : 0; const virtualizer = useVirtualizer({ count: items.length + tailCount, getScrollElement: () => scrollRef.current, getItemKey: (index) => index < items.length ? getItemKey(items[index], index) : `masonry-tail-${index - items.length}`, estimateSize: (index) => index < items.length ? estimateSize(items[index], index) : 144 + ((index - items.length) % 3) * 36, gap, lanes: columns, overscan: overscan * columns, }); const virtualItems = virtualizer.getVirtualItems(); const viewportEnd = (virtualizer.scrollOffset ?? 0) + (virtualizer.scrollRect?.height ?? 0); const lastVisibleIndex = virtualItems.reduce( (lastIndex, item) => item.start < viewportEnd ? Math.max(lastIndex, item.index) : lastIndex, -1, ); useEffect(() => { if ( hasError || loading || !hasMore || loadPendingRef.current || lastVisibleIndex < Math.max(0, items.length - prefetch) ) { return; } loadPendingRef.current = true; void Promise.resolve(loadMoreRef.current()).finally(() => { loadPendingRef.current = false; }); }, [hasError, hasMore, items.length, lastVisibleIndex, loading, prefetch]); if (items.length === 0 && !hasMore && !loading && !hasError) { return (

{emptyState}

); } const columnWidth = columns > 0 ? Math.max(0, (width - gap * (columns - 1)) / columns) : 0; return (

{virtualItems.map((virtualItem) => { const isTail = virtualItem.index >= items.length; const tailIndex = virtualItem.index - items.length; return (

{isTail ? ( hasError ? (

{error}

{onRetry ? ( ) : null}

) : ( renderLoadingItem(tailIndex) ) ) : ( = initialItemCountRef.current } > {renderItem(items[virtualItem.index], virtualItem.index)} )}

); })}

{!hasMore && items.length > 0 && endState ? (

{endState}

) : null} {loading ? "در حال بارگذاری موارد بیشتر" : null}

); } /* -------------------------------------------------------------------------- */ /* Demo */ /* -------------------------------------------------------------------------- */ type GalleryItem = { id: string; title: string; category: string; image: string; imageHeight: number; }; const PAGE_SIZE = 6; const MAX_ITEMS = 42; const gallerySource = [ { title: "هندسهٔ نرم", category: "معماری", image: "/unsplash/1486406146926-c627a92ad1ab.webp", imageHeight: 260, }, { title: "افق باز", category: "منظره", image: "/unsplash/1500530855697-b586d89ba3ee.webp", imageHeight: 190, }, { title: "ریتم کار", category: "فضای کار", image: "/unsplash/1497366216548-37526070297c.webp", imageHeight: 230, }, { title: "میز مشترک", category: "استودیو", image: "/unsplash/1488590528505-98d2b5aba04b.webp", imageHeight: 300, }, { title: "در جلسه", category: "مردم", image: "/unsplash/1522075469751-3a6694fb2f61.webp", imageHeight: 210, }, { title: "بعد از ساعت", category: "دفتر", image: "/unsplash/1498050108023-c5249f4df085.webp", imageHeight: 280, }, ] as const; function createItems(start: number, count: number): GalleryItem[] { return Array.from({ length: count }, (_, offset) => { const index = start + offset; const source = gallerySource[index % gallerySource.length]; return { ...source, id: `gallery-${index}`, title: `${source.title} ${faNum(Math.floor(index / gallerySource.length) + 1)}`, }; }); } /** پیش‌نمایش فارسی — میسونری مجازی با بارگذاری هنگام اسکرول. */ export default function InfiniteMasonryExample() { const [items, setItems] = useState(() => createItems(0, 12)); const [loading, setLoading] = useState(false); const hasMore = items.length < MAX_ITEMS; const loadMore = useCallback(async () => { if (loading || !hasMore) return; setLoading(true); await new Promise((resolve) => setTimeout(resolve, 650)); setItems((current) => { const count = Math.min(PAGE_SIZE, MAX_ITEMS - current.length); return count > 0 ? [...current, ...createItems(current.length, count)] : current; }); setLoading(false); }, [hasMore, loading]); return (

فهرست بصری

اسکرول کنید تا صفحهٔ بعد بارگذاری شود

{faNum(items.length)} مورد

item.id} renderItem={(item) => (

)} onLoadMore={loadMore} hasMore={hasMore} loading={loading} estimateSize={(item) => item.imageHeight + 66} endState="همه موارد بارگذاری شد" ariaLabel="گالری الهام بصری" className="h-[34rem]" />

); }