Skip to content

Commit

Permalink
fix: grid SSR works with initial topmost item index
Browse files Browse the repository at this point in the history
  • Loading branch information
petyosi committed Sep 10, 2024
1 parent 78aa3dd commit 62d577d
Show file tree
Hide file tree
Showing 4 changed files with 17 additions and 7 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import React from 'react'
import { VirtuosoGrid } from '../src'

export function Example() {
return <VirtuosoGrid id="root" initialTopMostItemIndex={10} totalCount={20000} initialItemCount={30} />
}
3 changes: 1 addition & 2 deletions examples/grid-initial-item-count.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import * as React from 'react'
import { VirtuosoGrid, GridComponents, ListRange } from '../src'
import { VirtuosoGrid, GridComponents, ListRange, GridStateSnapshot } from '../src'
import { debounce } from 'lodash'
import { GridStateSnapshot } from '../src/gridSystem'
import { createHashRouter, Link, RouterProvider, useParams, useSearchParams } from 'react-router-dom'

function fetchData(page: number) {
Expand Down
6 changes: 1 addition & 5 deletions src/gridSystem.ts
Original file line number Diff line number Diff line change
Expand Up @@ -106,10 +106,7 @@ export const gridSystem = /*#__PURE__*/ u.system(
u.filter(([_, location]) => !!location)
),
() => {
// console.log('block rendering')
u.publish(scrolledToInitialItem, false)
// topmost item index takes precedence over initial item count
u.publish(initialItemCount, 0)
}
)

Expand Down Expand Up @@ -235,8 +232,7 @@ export const gridSystem = /*#__PURE__*/ u.system(

if (itemWidth === 0) {
const startIndex = getInitialTopMostItemIndexNumber(initialTopMostItemIndex, totalCount)
// if the initial item count is set, we don't render the items from the initial item count.
const endIndex = startIndex === 0 ? Math.max(initialItemCount - 1, 0) : startIndex
const endIndex = Math.max(startIndex + initialItemCount - 1, 0)
return buildProbeGridState(buildItems(startIndex, endIndex, data))
}

Expand Down
9 changes: 9 additions & 0 deletions test/ssr.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,15 @@ describe('SSR List', () => {
})

it('renders 30 grid items with offset', () => {
const html = ReactDOMServer.renderToString(
<VirtuosoGrid id="root" initialTopMostItemIndex={10} totalCount={20000} initialItemCount={30} />
)
const { document } = new JSDOM(html).window
expect(document.querySelector('#root > div > div')!.childElementCount).toEqual(30)
expect(document.querySelector('#root > div > div > div')?.innerHTML).toEqual('Item 10')
})

it('renders 30 items with offset', () => {
const html = ReactDOMServer.renderToString(
<Virtuoso
id="root"
Expand Down

0 comments on commit 62d577d

Please sign in to comment.