refactor: measure elements logic

TanStack · Oct 24, 2022 · 6ec5b8d · 6ec5b8d
1 parent 4cb070d
commit 6ec5b8d
Show file tree

Hide file tree

Showing 10 changed files with 225 additions and 151 deletions.
diff --git a/examples/react/dynamic/src/main.tsx b/examples/react/dynamic/src/main.tsx
@@ -68,8 +68,9 @@ function RowVirtualizerDynamic({ rows }) {
         >
           {rowVirtualizer.getVirtualItems().map((virtualRow) => (
             <div
-              key={virtualRow.index}
-              ref={virtualRow.measureElement}
+              key={virtualRow.key}
+              data-index={virtualRow.index}
+              ref={rowVirtualizer.measureElement}
               className={virtualRow.index % 2 ? 'ListItemOdd' : 'ListItemEven'}
               style={{
                 position: 'absolute',
@@ -91,7 +92,7 @@ function RowVirtualizerDynamic({ rows }) {
 }
 
 function ColumnVirtualizerDynamic({ columns }) {
-  const parentRef = React.useRef()
+  const parentRef = React.useRef<HTMLDivElement | null>(null)
 
   const columnVirtualizer = useVirtualizer({
     horizontal: true,
@@ -121,7 +122,8 @@ function ColumnVirtualizerDynamic({ columns }) {
           {columnVirtualizer.getVirtualItems().map((virtualColumn) => (
             <div
               key={virtualColumn.key}
-              ref={virtualColumn.measureElement}
+              data-index={virtualColumn.index}
+              ref={columnVirtualizer.measureElement}
               className={
                 virtualColumn.index % 2 ? 'ListItemOdd' : 'ListItemEven'
               }
@@ -145,25 +147,35 @@ function ColumnVirtualizerDynamic({ columns }) {
 }
 
 function GridVirtualizerDynamic({ rows, columns }) {
-  const parentRef = React.useRef()
+  const parentRef = React.useRef<HTMLDivElement | null>(null)
 
   const rowVirtualizer = useVirtualizer({
     count: rows.length,
     getScrollElement: () => parentRef.current,
     estimateSize: () => 125,
+    indexAttribute: 'data-row-index',
   })
 
   const columnVirtualizer = useVirtualizer({
     horizontal: true,
     count: columns.length,
     getScrollElement: () => parentRef.current,
     estimateSize: () => 125,
+    indexAttribute: 'data-col-index',
   })
 
   const [show, setShow] = React.useState(true)
 
   const halfWay = Math.floor(rows.length / 2)
 
+  const ref = React.useMemo(
+    () => (node: HTMLDivElement | null) => {
+      rowVirtualizer.measureElement(node)
+      columnVirtualizer.measureElement(node)
+    },
+    [rowVirtualizer.measureElement, columnVirtualizer.measureElement],
+  )
+
   return (
     <>
       <div className="py-2 flex gap-2">
@@ -197,10 +209,9 @@ function GridVirtualizerDynamic({ rows, columns }) {
                 {columnVirtualizer.getVirtualItems().map((virtualColumn) => (
                   <div
                     key={virtualColumn.key}
-                    ref={(el) => {
-                      virtualRow.measureElement(el)
-                      virtualColumn.measureElement(el)
-                    }}
+                    data-col-index={virtualColumn.index}
+                    data-row-index={virtualRow.index}
+                    ref={ref}
                     className={
                       virtualColumn.index % 2
                         ? virtualRow.index % 2 === 0

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -61,6 +61,7 @@
     "prettier": "^2.6.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "resize-observer-polyfill": "^1.5.1",
     "rollup": "^2.70.2",
     "rollup-plugin-size": "^0.2.2",
     "rollup-plugin-svelte": "^7.1.0",

diff --git a/packages/react-virtual/__tests__/index.test.tsx b/packages/react-virtual/__tests__/index.test.tsx
@@ -57,14 +57,17 @@ function List({
           <div
             data-testid={`item-${virtualRow.key}`}
             key={virtualRow.key}
-            ref={(el) => (dynamic ? virtualRow.measureElement(el) : undefined)}
+            data-index={virtualRow.index}
+            ref={(el) =>
+              dynamic ? rowVirtualizer.measureElement(el) : undefined
+            }
             style={{
               position: 'absolute',
               top: 0,
               left: 0,
               width: '100%',
               transform: `translateY(${virtualRow.start}px)`,
-              height: virtualRow.size,
+              height: itemSize,
             }}
           >
             Row {virtualRow.index}

diff --git a/packages/react-virtual/__tests__/jest.setup.js b/packages/react-virtual/__tests__/jest.setup.js
@@ -1 +1,4 @@
 import '@testing-library/jest-dom'
+import ResizeObserver from 'resize-observer-polyfill'
+
+global.ResizeObserver = ResizeObserver
diff --git a/packages/react-virtual/src/index.tsx b/packages/react-virtual/src/index.tsx
@@ -17,7 +17,7 @@ export * from '@tanstack/virtual-core'
 const useIsomorphicLayoutEffect =
   typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect
 
-function useVirtualizerBase<TScrollElement, TItemElement = unknown>(
+function useVirtualizerBase<TScrollElement, TItemElement extends Element>(
   options: VirtualizerOptions<TScrollElement, TItemElement>,
 ): Virtualizer<TScrollElement, TItemElement> {
   const rerender = React.useReducer(() => ({}), {})[1]
@@ -47,7 +47,7 @@ function useVirtualizerBase<TScrollElement, TItemElement = unknown>(
   return instance
 }
 
-export function useVirtualizer<TScrollElement, TItemElement = unknown>(
+export function useVirtualizer<TScrollElement, TItemElement extends Element>(
   options: PartialKeys<
     VirtualizerOptions<TScrollElement, TItemElement>,
     'observeElementRect' | 'observeElementOffset' | 'scrollToFn'
@@ -61,7 +61,7 @@ export function useVirtualizer<TScrollElement, TItemElement = unknown>(
   })
 }
 
-export function useWindowVirtualizer<TItemElement = unknown>(
+export function useWindowVirtualizer<TItemElement extends Element>(
   options: PartialKeys<
     VirtualizerOptions<Window, TItemElement>,
     | 'getScrollElement'