fix(): make defaultItemHeight work with initialTopMostItemIndex

petyosi · Aug 10, 2021 · 125aec4 · 125aec4
1 parent eb64bed
commit 125aec4
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 26 deletions.
diff --git a/e2e/prepend-last-tall-item.tsx b/e2e/prepend-last-tall-item.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react'
+import { Virtuoso } from '../src/'
+
+function itemContent(index: number) {
+  const height = index === 1099 ? 120 : 30
+  const backgroundColor = index === 1099 ? 'red' : 'transparent'
+  return <div style={{ height, backgroundColor }}>Item {index}</div>
+}
+
+export default function App() {
+  const [fii] = React.useState(1000)
+  return (
+    <Virtuoso
+      totalCount={100}
+      defaultItemHeight={30}
+      firstItemIndex={fii}
+      initialTopMostItemIndex={99}
+      itemContent={itemContent}
+      style={{ height: 800 }}
+    />
+  )
+}
diff --git a/src/initialTopMostItemIndexSystem.ts b/src/initialTopMostItemIndexSystem.ts
@@ -34,7 +34,9 @@ export const initialTopMostItemIndexSystem = u.system(
           u.publish(scrolledToInitialItem, true)
         })
 
-        u.publish(scrollToIndex, initialTopMostItemIndex)
+        setTimeout(() => {
+          u.publish(scrollToIndex, initialTopMostItemIndex)
+        })
       }
     )
 

diff --git a/test/listSystem.test.ts b/test/listSystem.test.ts
@@ -83,7 +83,7 @@ describe('list engine', () => {
   })
 
   describe('initial index', () => {
-    it('starts from a specified location', () => {
+    it('starts from a specified location', (done) => {
       const INITIAL_INDEX = 300
       const SIZE = 30
       const { propsReady, initialTopMostItemIndex, listState, scrollTop, scrollTo, viewportHeight, totalCount, sizeRanges } = init(
@@ -106,14 +106,17 @@ describe('list engine', () => {
 
       expect(getValue(listState).items).toHaveLength(0)
 
-      expect(sub).toHaveBeenCalledWith({
-        top: INITIAL_INDEX * SIZE,
-        behavior: 'auto',
-      })
+      setTimeout(() => {
+        expect(sub).toHaveBeenCalledWith({
+          top: INITIAL_INDEX * SIZE,
+          behavior: 'auto',
+        })
 
-      // the UI responds by publishing back through the scrollTop stream
-      publish(scrollTop, INITIAL_INDEX * SIZE)
-      expect(getValue(listState).items).toHaveLength(7)
+        // the UI responds by publishing back through the scrollTop stream
+        publish(scrollTop, INITIAL_INDEX * SIZE)
+        expect(getValue(listState).items).toHaveLength(7)
+        done()
+      })
     })
   })
 
@@ -230,27 +233,29 @@ describe('list engine', () => {
 
       expect(getValue(listState).items).toHaveLength(0)
 
-      expect(sub).toHaveBeenCalledWith({
-        top: INITIAL_INDEX * SIZE,
-        behavior: 'auto',
-      })
-
       setTimeout(() => {
-        publish(scrollTop, INITIAL_INDEX * SIZE)
+        expect(sub).toHaveBeenCalledWith({
+          top: INITIAL_INDEX * SIZE,
+          behavior: 'auto',
+        })
 
-        publish(scrollTop, INITIAL_INDEX * SIZE - 2)
+        setTimeout(() => {
+          publish(scrollTop, INITIAL_INDEX * SIZE)
 
-        publish(sizeRanges, [
-          {
-            startIndex: INITIAL_INDEX - 1,
-            endIndex: INITIAL_INDEX - 1,
-            size: SIZE + 40,
-          },
-        ])
+          publish(scrollTop, INITIAL_INDEX * SIZE - 2)
 
-        expect(scrollBySub).toHaveBeenCalledWith(-40)
-        done()
-      }, 2500)
+          publish(sizeRanges, [
+            {
+              startIndex: INITIAL_INDEX - 1,
+              endIndex: INITIAL_INDEX - 1,
+              size: SIZE + 40,
+            },
+          ])
+
+          expect(scrollBySub).toHaveBeenCalledWith(-40)
+          done()
+        }, 2500)
+      })
     })
   })