@moontra/moonui-pro 2.17.5 → 2.18.0

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

@@ -90,6 +90,8 @@ export function VirtualList<T = any>({
   const isScrollingTimeoutRef = useRef<NodeJS.Timeout | undefined>(undefined)
 
   // Container dimensions tracking
+  const [containerDimensions, setContainerDimensions] = useState({ width: 0, height: 0 })
+  
   useEffect(() => {
     if (!containerRef.current) return
 
@@ -107,21 +109,8 @@ export function VirtualList<T = any>({
     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
@@ -131,40 +120,23 @@ export function VirtualList<T = any>({
       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,
-        width: currentWidth,
-        top: direction === 'horizontal' ? 0 : currentTop,
-        left: direction === 'horizontal' ? currentLeft : 0
+        top: currentTop
       })
 
-      if (direction === 'horizontal') {
-        currentLeft += currentWidth
-      } else {
-        currentTop += currentHeight
-      }
+      currentTop += currentHeight
     }
 
     return positions
   }, [
     items.length, 
     itemHeight, 
-    itemWidth,
     estimatedItemHeight, 
-    estimatedItemWidth,
     variableHeight, 
-    variableWidth,
-    itemHeights, 
-    itemWidths,
-    direction,
-    containerDimensions.width,
-    gridPositions
+    itemHeights
   ])
 
   // Toplam içerik yüksekliği
@@ -199,14 +171,6 @@ 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(() => {
@@ -242,12 +206,6 @@ export function VirtualList<T = any>({
     setScrollTop(scrollTop)
     setIsScrolling(true)
 
-    // Memory management scroll tracking
-    updateScrollDistance(scrollTop)
-
-    // Garbage collection optimization
-    optimizeGC()
-
     // Scroll callback
     if (onScroll) {
       onScroll(scrollTop)
@@ -276,7 +234,7 @@ export function VirtualList<T = any>({
     isScrollingTimeoutRef.current = setTimeout(() => {
       setIsScrolling(false)
     }, 150)
-  }, [onScroll, hasNextPage, isLoadingNextPage, onLoadMore, loadMoreThreshold, updateScrollDistance, optimizeGC])
+  }, [onScroll, hasNextPage, isLoadingNextPage, onLoadMore, loadMoreThreshold])
 
   // Variable height için resize observer
   useEffect(() => {
@@ -489,67 +447,10 @@ export function VirtualList<T = any>({
         </motion.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>
-  )
-}
 
 // Utility hook for virtual list state management
 export function useVirtualList<T>(