@ornery/ui-grid-react 0.1.4 → 0.1.5

package/src/useVirtualScroll.ts

@@ -1,4 +1,5 @@
 import { useCallback, useRef, useState } from 'react';
+import { calculateVirtualWindow } from './virtualScrollMath';
 
 export interface UseVirtualScrollOptions {
   itemCount: number;
@@ -21,22 +22,22 @@ export function useVirtualScroll(options: UseVirtualScrollOptions): UseVirtualSc
   const [scrollTop, setScrollTop] = useState(0);
   const viewportRef = useRef<HTMLDivElement | null>(null);
 
-  const rawStart = Math.floor(scrollTop / itemSize) - overscan;
-  const start = Math.max(0, rawStart);
-  const rawEnd = rawStart + Math.ceil(viewportHeight / itemSize) + 2 * overscan;
-  const end = Math.min(itemCount, rawEnd);
-
-  const totalHeight = itemCount * itemSize;
-  const offsetY = start * itemSize;
+  const virtualWindow = calculateVirtualWindow({
+    itemCount,
+    itemSize,
+    viewportHeight,
+    overscan,
+    scrollTop,
+  });
 
   const onScroll = useCallback((event: React.UIEvent<HTMLDivElement>) => {
     setScrollTop(event.currentTarget.scrollTop);
   }, []);
 
   return {
-    visibleRange: { start, end },
-    totalHeight,
-    offsetY,
+    visibleRange: virtualWindow.visibleRange,
+    totalHeight: virtualWindow.totalHeight,
+    offsetY: virtualWindow.offsetY,
     onScroll,
     viewportRef,
     scrollTop,

package/src/virtualScrollMath.test.ts

@@ -0,0 +1,44 @@
+import { describe, expect, it } from 'vitest';
+import { calculateVirtualWindow } from './virtualScrollMath';
+
+describe('virtualScrollMath', () => {
+  it('calculates the default overscanned window deterministically', () => {
+    expect(calculateVirtualWindow({
+      itemCount: 100,
+      itemSize: 44,
+      viewportHeight: 220,
+      scrollTop: 0,
+    })).toEqual({
+      visibleRange: { start: 0, end: 8 },
+      totalHeight: 4400,
+      offsetY: 0,
+    });
+  });
+
+  it('calculates a scrolled window deterministically', () => {
+    expect(calculateVirtualWindow({
+      itemCount: 100,
+      itemSize: 44,
+      viewportHeight: 220,
+      overscan: 3,
+      scrollTop: 440,
+    })).toEqual({
+      visibleRange: { start: 7, end: 18 },
+      totalHeight: 4400,
+      offsetY: 308,
+    });
+  });
+
+  it('handles zero item size safely', () => {
+    expect(calculateVirtualWindow({
+      itemCount: 10,
+      itemSize: 0,
+      viewportHeight: 220,
+      scrollTop: 88,
+    })).toEqual({
+      visibleRange: { start: 0, end: 0 },
+      totalHeight: 0,
+      offsetY: 0,
+    });
+  });
+});

package/src/virtualScrollMath.ts

@@ -0,0 +1,36 @@
+export interface VirtualWindowRequest {
+  itemCount: number;
+  itemSize: number;
+  viewportHeight: number;
+  overscan?: number;
+  scrollTop: number;
+}
+
+export interface VirtualWindowResult {
+  visibleRange: { start: number; end: number };
+  totalHeight: number;
+  offsetY: number;
+}
+
+export function calculateVirtualWindow(request: VirtualWindowRequest): VirtualWindowResult {
+  const overscan = request.overscan ?? 3;
+
+  if (request.itemCount <= 0 || request.itemSize <= 0) {
+    return {
+      visibleRange: { start: 0, end: 0 },
+      totalHeight: Math.max(0, request.itemCount) * Math.max(0, request.itemSize),
+      offsetY: 0,
+    };
+  }
+
+  const rawStart = Math.floor(request.scrollTop / request.itemSize) - overscan;
+  const start = Math.max(0, rawStart);
+  const rawEnd = rawStart + Math.ceil(request.viewportHeight / request.itemSize) + 2 * overscan;
+  const end = Math.min(request.itemCount, rawEnd);
+
+  return {
+    visibleRange: { start, end },
+    totalHeight: request.itemCount * request.itemSize,
+    offsetY: start * request.itemSize,
+  };
+}