fix: account for headerHeight when restoring state (#1110)

Co-authored-by: Adam Segal <[email protected]>
petyosi · Jul 20, 2024 · 370023b · 370023b
1 parent e27936a
commit 370023b
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/examples/state.tsx b/examples/state.tsx
@@ -1,6 +1,10 @@
 import * as React from 'react'
 import { StateSnapshot, Virtuoso, VirtuosoHandle } from '../src'
 
+function Header() {
+  return <div>Header</div>
+}
+
 export function Example() {
   const ref = React.useRef<VirtuosoHandle>(null)
   const state = React.useRef<StateSnapshot | undefined>(undefined)
@@ -25,6 +29,9 @@ export function Example() {
         ref={ref}
         restoreStateFrom={state.current}
         computeItemKey={(key: number) => `item-${key.toString()}`}
+        components={{
+          Header,
+        }}
         totalCount={100}
         itemContent={(index) => <div style={{ height: index % 2 ? 30 : 20 }}>Item {index}</div>}
         style={{ height: 300 }}

diff --git a/src/stateLoadSystem.ts b/src/stateLoadSystem.ts
@@ -9,7 +9,7 @@ import { windowScrollerSystem } from './windowScrollerSystem'
 export const stateLoadSystem = u.system(
   ([
     { sizes, sizeRanges },
-    { scrollTop },
+    { scrollTop, headerHeight },
     { initialTopMostItemIndex },
     { didMount },
     { useWindowScroll, windowScrollContainerState, windowViewportRect },
@@ -24,12 +24,16 @@ export const stateLoadSystem = u.system(
     u.connect(windowViewportRect, statefulWindowViewportRect)
 
     u.subscribe(
-      u.pipe(getState, u.withLatestFrom(sizes, scrollTop, useWindowScroll, statefulWindowScrollContainerState, statefulWindowViewportRect)),
-      ([callback, sizes, scrollTop, useWindowScroll, windowScrollContainerState, windowViewportRect]) => {
+      u.pipe(
+        getState,
+        u.withLatestFrom(sizes, scrollTop, useWindowScroll, statefulWindowScrollContainerState, statefulWindowViewportRect, headerHeight)
+      ),
+      ([callback, sizes, scrollTop, useWindowScroll, windowScrollContainerState, windowViewportRect, headerHeight]) => {
         const ranges = sizeTreeToRanges(sizes.sizeTree)
         if (useWindowScroll && windowScrollContainerState !== null && windowViewportRect !== null) {
           scrollTop = windowScrollContainerState.scrollTop - windowViewportRect.offsetTop
         }
+        scrollTop -= headerHeight
         callback({ ranges, scrollTop })
       }
     )