@moontra/moonui-pro 2.17.4 → 2.17.5

package/src/components/virtual-list/index.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
 import { cn } from '../../lib/utils'
 
 // Virtual List Props
@@ -14,6 +15,27 @@ export interface VirtualListProps<T = any> {
   renderItem: (item: T, index: number) => React.ReactNode
   onScroll?: (scrollTop: number) => void
   className?: string
+  // Infinite scrolling props
+  hasNextPage?: boolean
+  isLoadingNextPage?: boolean
+  onLoadMore?: () => void | Promise<void>
+  loadMoreThreshold?: number
+  renderLoader?: () => React.ReactNode
+  renderEndMessage?: () => React.ReactNode
+  // Animation props
+  enableAnimations?: boolean
+  itemEnterAnimation?: {
+    initial?: object
+    animate?: object
+    exit?: object
+    transition?: object
+  }
+  listAnimation?: {
+    initial?: object
+    animate?: object
+    transition?: object
+  }
+  staggerDelay?: number
 }
 
 // Item bilgilerini saklamak için
@@ -33,7 +55,28 @@ export function VirtualList<T = any>({
   overscan = 5,
   renderItem,
   onScroll,
-  className
+  className,
+  // Infinite scrolling props
+  hasNextPage = false,
+  isLoadingNextPage = false,
+  onLoadMore,
+  loadMoreThreshold = 500,
+  renderLoader,
+  renderEndMessage,
+  // Animation props
+  enableAnimations = false,
+  itemEnterAnimation = {
+    initial: { opacity: 0, y: 20 },
+    animate: { opacity: 1, y: 0 },
+    exit: { opacity: 0, y: -20 },
+    transition: { duration: 0.2 }
+  },
+  listAnimation = {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    transition: { duration: 0.3 }
+  },
+  staggerDelay = 0.05
 }: VirtualListProps<T>) {
   // State yönetimi
   const [scrollTop, setScrollTop] = useState(0)
@@ -46,34 +89,99 @@ export function VirtualList<T = any>({
   const scrollTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined)
   const isScrollingTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined)
 
+  // Container dimensions tracking
+  useEffect(() => {
+    if (!containerRef.current) return
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      const entry = entries[0]
+      if (entry) {
+        setContainerDimensions({
+          width: entry.contentRect.width,
+          height: entry.contentRect.height
+        })
+      }
+    })
+
+    resizeObserver.observe(containerRef.current)
+    return () => resizeObserver.disconnect()
+  }, [])
+
+  // Grid layout calculation
+  const gridPositions = useGridLayout(
+    items,
+    gridConfig,
+    direction,
+    containerDimensions.width || (typeof width === 'number' ? width : 800),
+    itemHeight,
+    itemWidth
+  )
+
   // Item pozisyonlarını hesapla
   const itemPositions = useMemo(() => {
+    if (direction === 'grid') {
+      return gridPositions
+    }
+
     const positions: ItemInfo[] = []
     let currentTop = 0
+    let currentLeft = 0
 
     for (let i = 0; i < items.length; i++) {
       const currentHeight = variableHeight 
         ? (itemHeights.get(i) || estimatedItemHeight)
         : itemHeight
+      
+      const currentWidth = variableWidth
+        ? (itemWidths.get(i) || estimatedItemWidth)
+        : (direction === 'horizontal' ? itemWidth : containerDimensions.width || 0)
 
       positions.push({
         index: i,
         height: currentHeight,
-        top: currentTop
+        width: currentWidth,
+        top: direction === 'horizontal' ? 0 : currentTop,
+        left: direction === 'horizontal' ? currentLeft : 0
       })
 
-      currentTop += currentHeight
+      if (direction === 'horizontal') {
+        currentLeft += currentWidth
+      } else {
+        currentTop += currentHeight
+      }
     }
 
     return positions
-  }, [items.length, itemHeight, estimatedItemHeight, variableHeight, itemHeights])
+  }, [
+    items.length, 
+    itemHeight, 
+    itemWidth,
+    estimatedItemHeight, 
+    estimatedItemWidth,
+    variableHeight, 
+    variableWidth,
+    itemHeights, 
+    itemWidths,
+    direction,
+    containerDimensions.width,
+    gridPositions
+  ])
 
   // Toplam içerik yüksekliği
   const totalHeight = useMemo(() => {
-    return itemPositions.length > 0 
+    let baseHeight = itemPositions.length > 0 
       ? itemPositions[itemPositions.length - 1].top + itemPositions[itemPositions.length - 1].height
       : 0
-  }, [itemPositions])
+
+    // Infinite scrolling için ek yükseklik ekle
+    if (hasNextPage && isLoadingNextPage) {
+      baseHeight += 50 // Loader yüksekliği
+    } else if (!hasNextPage && items.length > 0) {
+      baseHeight += 40 // End message yüksekliği
+    }
+
+    return baseHeight
+  }, [itemPositions, hasNextPage, isLoadingNextPage, items.length])
 
   // Görünür aralığı hesapla
   const visibleRange = useMemo(() => {
@@ -91,6 +199,15 @@ export function VirtualList<T = any>({
     }
   }, [scrollTop, height, itemPositions, overscan, items.length, itemHeight])
 
+  // Memory Management Hook
+  const {
+    metrics,
+    memoryCache,
+    updateScrollDistance,
+    optimizeGC,
+    trackRenderPerformance
+  } = useMemoryManagement(memoryManagement, visibleRange, items.length)
+
   // Görünür itemlar
   const visibleItems = useMemo(() => {
     const result: Array<{ item: T; index: number; style: React.CSSProperties }> = []
@@ -119,14 +236,33 @@ export function VirtualList<T = any>({
   // Scroll handler
   const handleScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
     const scrollTop = e.currentTarget.scrollTop
+    const scrollHeight = e.currentTarget.scrollHeight
+    const clientHeight = e.currentTarget.clientHeight
+    
     setScrollTop(scrollTop)
     setIsScrolling(true)
 
+    // Memory management scroll tracking
+    updateScrollDistance(scrollTop)
+
+    // Garbage collection optimization
+    optimizeGC()
+
     // Scroll callback
     if (onScroll) {
       onScroll(scrollTop)
     }
 
+    // Infinite scrolling check
+    if (
+      hasNextPage &&
+      !isLoadingNextPage &&
+      onLoadMore &&
+      scrollHeight - (scrollTop + clientHeight) <= loadMoreThreshold
+    ) {
+      onLoadMore()
+    }
+
     // Scroll timeout'ını temizle ve yenisini ayarla
     if (scrollTimeoutRef.current) {
       clearTimeout(scrollTimeoutRef.current)
@@ -140,7 +276,7 @@ export function VirtualList<T = any>({
     isScrollingTimeoutRef.current = setTimeout(() => {
       setIsScrolling(false)
     }, 150)
-  }, [onScroll])
+  }, [onScroll, hasNextPage, isLoadingNextPage, onLoadMore, loadMoreThreshold, updateScrollDistance, optimizeGC])
 
   // Variable height için resize observer
   useEffect(() => {
@@ -217,8 +353,12 @@ export function VirtualList<T = any>({
     }
   }, [itemHeight, height, totalHeight])
 
+  const ContainerComponent = enableAnimations ? motion.div : 'div'
+  const ContentComponent = enableAnimations ? motion.div : 'div'
+  const ItemComponent = enableAnimations ? motion.div : 'div'
+
   return (
-    <div
+    <ContainerComponent
       ref={containerRef}
       className={cn(
         "relative overflow-hidden border rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-ring",
@@ -228,47 +368,186 @@ export function VirtualList<T = any>({
       tabIndex={0}
       role="listbox"
       aria-label={`Virtual list with ${items.length} items`}
+      {...(enableAnimations && listAnimation)}
     >
       <div
         ref={scrollElementRef}
         className="h-full overflow-auto scrollbar-thin scrollbar-thumb-muted scrollbar-track-transparent"
         onScroll={handleScroll}
       >
-        <div
+        <ContentComponent
           style={{
             height: totalHeight,
             position: 'relative'
           }}
+          {...(enableAnimations && {
+            initial: { opacity: 0 },
+            animate: { opacity: 1 },
+            transition: { duration: 0.2 }
+          })}
         >
-          {visibleItems.map(({ item, index, style }) => (
-            <div
-              key={index}
-              data-index={index}
-              style={style}
-              role="option"
-              aria-selected="false"
-              className="outline-none"
+          <AnimatePresence mode="popLayout">
+            {visibleItems.map(({ item, index, style }, itemIndex) => (
+              <ItemComponent
+                key={`${index}-${JSON.stringify(item)}`}
+                data-index={index}
+                style={style}
+                role="option"
+                aria-selected="false"
+                className="outline-none"
+                {...(enableAnimations && {
+                  ...itemEnterAnimation,
+                  transition: {
+                    ...itemEnterAnimation.transition,
+                    delay: itemIndex * staggerDelay
+                  }
+                })}
+              >
+                {renderItem(item, index)}
+              </ItemComponent>
+            ))}
+          </AnimatePresence>
+
+          {/* Infinite scrolling loader */}
+          {hasNextPage && isLoadingNextPage && (
+            <motion.div 
+              style={{
+                position: 'absolute',
+                top: totalHeight,
+                left: 0,
+                right: 0,
+                minHeight: 50
+              }}
+              className="flex items-center justify-center py-4"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -20 }}
+              transition={{ duration: 0.3 }}
             >
-              {renderItem(item, index)}
-            </div>
-          ))}
-        </div>
+              {renderLoader ? renderLoader() : (
+                <div className="flex items-center gap-2 text-muted-foreground">
+                  <motion.div 
+                    className="rounded-full h-4 w-4 border-2 border-primary border-t-transparent"
+                    animate={{ rotate: 360 }}
+                    transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
+                  />
+                  <span className="text-sm">Loading more...</span>
+                </div>
+              )}
+            </motion.div>
+          )}
+
+          {/* End message */}
+          {!hasNextPage && items.length > 0 && (
+            <motion.div 
+              style={{
+                position: 'absolute',
+                top: totalHeight,
+                left: 0,
+                right: 0,
+                minHeight: 40
+              }}
+              className="flex items-center justify-center py-3"
+              initial={{ opacity: 0, scale: 0.9 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ duration: 0.2 }}
+            >
+              {renderEndMessage ? renderEndMessage() : (
+                <div className="text-sm text-muted-foreground">
+                  No more items to load
+                </div>
+              )}
+            </motion.div>
+          )}
+        </ContentComponent>
       </div>
 
       {/* Loading indicator for scrolling */}
-      {isScrolling && (
-        <div className="absolute top-2 right-2 bg-muted/80 text-muted-foreground px-2 py-1 rounded text-xs">
-          Scrolling...
-        </div>
-      )}
+      <AnimatePresence>
+        {isScrolling && (
+          <motion.div 
+            className="absolute top-2 right-2 bg-muted/80 text-muted-foreground px-2 py-1 rounded text-xs"
+            initial={{ opacity: 0, scale: 0.8 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.8 }}
+            transition={{ duration: 0.15 }}
+          >
+            Scrolling...
+          </motion.div>
+        )}
+      </AnimatePresence>
 
       {/* Scroll position indicator */}
       {items.length > 100 && (
-        <div className="absolute bottom-2 right-2 bg-muted/80 text-muted-foreground px-2 py-1 rounded text-xs">
+        <motion.div 
+          className="absolute bottom-2 right-2 bg-muted/80 text-muted-foreground px-2 py-1 rounded text-xs"
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.2, delay: 0.5 }}
+        >
           {Math.round((scrollTop / Math.max(totalHeight - height, 1)) * 100)}%
-        </div>
+        </motion.div>
       )}
-    </div>
+
+      {/* Performance Monitor */}
+      {enablePerformanceMonitoring && memoryManagement.enableDebugMode && (
+        <PerformanceMonitor metrics={metrics} />
+      )}
+    </ContainerComponent>
+  )
+}
+
+// Performance Monitor Component
+function PerformanceMonitor({ metrics }: { metrics: VirtualListPerformanceMetrics }) {
+  const formatMemory = (bytes: number) => {
+    const kb = bytes / 1024
+    const mb = kb / 1024
+    
+    if (mb >= 1) return `${mb.toFixed(2)} MB`
+    if (kb >= 1) return `${kb.toFixed(2)} KB`
+    return `${bytes} B`
+  }
+
+  return (
+    <motion.div 
+      className="absolute top-2 left-2 bg-black/90 text-white p-3 rounded-lg text-xs font-mono shadow-lg"
+      initial={{ opacity: 0, x: -20 }}
+      animate={{ opacity: 1, x: 0 }}
+      transition={{ duration: 0.3 }}
+    >
+      <div className="space-y-1">
+        <div className="text-green-400 font-semibold">🚀 Performance Monitor</div>
+        <div className="grid grid-cols-2 gap-x-4 gap-y-1">
+          <span>Renders:</span>
+          <span className="text-blue-300">{metrics.renderCount}</span>
+          
+          <span>Avg Render:</span>
+          <span className="text-blue-300">{metrics.averageRenderTime.toFixed(2)}ms</span>
+          
+          <span>Memory:</span>
+          <span className={`${metrics.memoryUsage > 5 * 1024 * 1024 ? 'text-red-400' : 'text-green-400'}`}>
+            {formatMemory(metrics.memoryUsage)}
+          </span>
+          
+          <span>Visible Items:</span>
+          <span className="text-yellow-300">{metrics.visibleItemsCount}</span>
+          
+          <span>Scroll FPS:</span>
+          <span className={`${metrics.scrollFPS < 50 ? 'text-red-400' : 'text-green-400'}`}>
+            {metrics.scrollFPS}
+          </span>
+          
+          <span>Distance:</span>
+          <span className="text-purple-300">{Math.round(metrics.totalScrollDistance)}px</span>
+        </div>
+        
+        {metrics.lastGCTime && (
+          <div className="text-orange-400 text-xs mt-2">
+            Last GC: {new Date(metrics.lastGCTime).toLocaleTimeString()}
+          </div>
+        )}
+      </div>
+    </motion.div>
   )
 }
 
@@ -279,6 +558,7 @@ export function useVirtualList<T>(
 ) {
   const [config, setConfig] = useState(initialConfig)
   const [selectedItems, setSelectedItems] = useState<Set<number>>(new Set())
+  const [focusedIndex, setFocusedIndex] = useState<number>(-1)
 
   const updateConfig = useCallback((newConfig: Partial<VirtualListProps<T>>) => {
     setConfig(prev => ({ ...prev, ...newConfig }))
@@ -296,17 +576,66 @@ export function useVirtualList<T>(
     })
   }, [])
 
+  const toggleItem = useCallback((index: number) => {
+    setSelectedItems(prev => {
+      const newSet = new Set(prev)
+      if (newSet.has(index)) {
+        newSet.delete(index)
+      } else {
+        newSet.add(index)
+      }
+      return newSet
+    })
+  }, [])
+
+  const selectRange = useCallback((startIndex: number, endIndex: number) => {
+    setSelectedItems(prev => {
+      const newSet = new Set(prev)
+      const start = Math.min(startIndex, endIndex)
+      const end = Math.max(startIndex, endIndex)
+      
+      for (let i = start; i <= end; i++) {
+        newSet.add(i)
+      }
+      return newSet
+    })
+  }, [])
+
+  const selectAll = useCallback(() => {
+    setSelectedItems(new Set(Array.from({ length: items.length }, (_, i) => i)))
+  }, [items.length])
+
   const clearSelection = useCallback(() => {
     setSelectedItems(new Set())
   }, [])
 
+  const isSelected = useCallback((index: number) => {
+    return selectedItems.has(index)
+  }, [selectedItems])
+
+  const getSelectedItems = useCallback(() => {
+    return Array.from(selectedItems).map(index => items[index]).filter(Boolean)
+  }, [selectedItems, items])
+
+  const getSelectedCount = useCallback(() => {
+    return selectedItems.size
+  }, [selectedItems])
+
   return {
     config,
     updateConfig,
     selectedItems,
+    focusedIndex,
+    setFocusedIndex,
     selectItem,
     deselectItem,
-    clearSelection
+    toggleItem,
+    selectRange,
+    selectAll,
+    clearSelection,
+    isSelected,
+    getSelectedItems,
+    getSelectedCount
   }
 }
 
@@ -316,6 +645,12 @@ export interface SelectableVirtualListProps<T = any> extends VirtualListProps<T>
   multiSelect?: boolean
   selectedItems?: Set<number>
   onSelectionChange?: (selectedItems: Set<number>) => void
+  focusedIndex?: number
+  onFocusChange?: (focusedIndex: number) => void
+  selectAllEnabled?: boolean
+  onSelectAll?: () => void
+  onDeselectAll?: () => void
+  getItemId?: (item: T, index: number) => string | number
 }
 
 export function SelectableVirtualList<T = any>({
@@ -323,44 +658,108 @@ export function SelectableVirtualList<T = any>({
   multiSelect = false,
   selectedItems = new Set(),
   onSelectionChange,
+  focusedIndex = -1,
+  onFocusChange,
+  selectAllEnabled = false,
+  onSelectAll,
+  onDeselectAll,
+  getItemId,
   renderItem: originalRenderItem,
   ...props
 }: SelectableVirtualListProps<T>) {
-  const handleItemClick = useCallback((index: number) => {
+  const [lastSelectedIndex, setLastSelectedIndex] = useState<number>(-1)
+
+  const handleItemClick = useCallback((index: number, event?: React.MouseEvent) => {
     if (!selectable || !onSelectionChange) return
 
     const newSelection = new Set(selectedItems)
 
-    if (multiSelect) {
+    if (multiSelect && event?.shiftKey && lastSelectedIndex !== -1) {
+      // Shift+click için range selection
+      const start = Math.min(lastSelectedIndex, index)
+      const end = Math.max(lastSelectedIndex, index)
+      
+      for (let i = start; i <= end; i++) {
+        newSelection.add(i)
+      }
+    } else if (multiSelect && (event?.ctrlKey || event?.metaKey)) {
+      // Ctrl/Cmd+click için toggle
+      if (newSelection.has(index)) {
+        newSelection.delete(index)
+      } else {
+        newSelection.add(index)
+      }
+    } else if (multiSelect) {
+      // Normal click in multi-select mode
       if (newSelection.has(index)) {
         newSelection.delete(index)
       } else {
         newSelection.add(index)
       }
     } else {
+      // Single select mode
       newSelection.clear()
       newSelection.add(index)
     }
 
+    setLastSelectedIndex(index)
     onSelectionChange(newSelection)
-  }, [selectable, multiSelect, selectedItems, onSelectionChange])
+    onFocusChange?.(index)
+  }, [selectable, multiSelect, selectedItems, onSelectionChange, lastSelectedIndex, onFocusChange])
+
+  const handleKeyDown = useCallback((event: React.KeyboardEvent) => {
+    if (!selectable) return
+
+    switch (event.key) {
+      case 'Enter':
+      case ' ':
+        event.preventDefault()
+        if (focusedIndex >= 0 && focusedIndex < props.items.length) {
+          handleItemClick(focusedIndex)
+        }
+        break
+      case 'a':
+        if ((event.ctrlKey || event.metaKey) && multiSelect && selectAllEnabled) {
+          event.preventDefault()
+          if (onSelectAll) {
+            onSelectAll()
+          }
+        }
+        break
+      case 'Escape':
+        if (multiSelect && onDeselectAll) {
+          event.preventDefault()
+          onDeselectAll()
+        }
+        break
+    }
+  }, [selectable, focusedIndex, props.items.length, handleItemClick, multiSelect, selectAllEnabled, onSelectAll, onDeselectAll])
 
   const renderItem = useCallback((item: T, index: number) => {
     const isSelected = selectedItems.has(index)
+    const isFocused = focusedIndex === index
+    const itemId = getItemId ? getItemId(item, index) : index
     
     return (
       <div
+        key={itemId}
         className={cn(
-          "transition-colors",
+          "transition-colors outline-none",
           selectable && "cursor-pointer hover:bg-muted/50",
-          isSelected && "bg-primary/10 border-l-4 border-primary"
+          isSelected && "bg-primary/10 border-l-4 border-primary",
+          isFocused && "ring-2 ring-ring ring-offset-2"
         )}
-        onClick={() => selectable && handleItemClick(index)}
+        onClick={(e) => selectable && handleItemClick(index, e)}
+        onKeyDown={handleKeyDown}
+        tabIndex={selectable ? 0 : undefined}
+        role={selectable ? "option" : undefined}
+        aria-selected={selectable ? isSelected : undefined}
+        aria-label={selectable ? `Item ${index + 1}${isSelected ? ', selected' : ''}` : undefined}
       >
         {originalRenderItem(item, index)}
       </div>
     )
-  }, [originalRenderItem, selectable, selectedItems, handleItemClick])
+  }, [originalRenderItem, selectable, selectedItems, focusedIndex, handleItemClick, handleKeyDown, getItemId])
 
   return <VirtualList {...props} renderItem={renderItem} />
 }