virtual-scroller 1.10.0 → 1.10.2

package/source/VirtualScroller.constructor.js

@@ -46,7 +46,9 @@ export default function VirtualScrollerConstructor(
 		getColumnsCount,
 		getItemId,
 		tbody,
+		// `estimatedItemHeight` is deprecated, use `getEstimatedItemHeight()` instead.
 		estimatedItemHeight,
+		getEstimatedVisibleItemRowsCount,
 		onItemInitialRender,
 		// `onItemFirstRender(i)` is deprecated, use `onItemInitialRender(item)` instead.
 		onItemFirstRender,
@@ -57,6 +59,7 @@ export default function VirtualScrollerConstructor(
 
 	let {
 		bypass,
+		getEstimatedItemHeight,
 		getScrollableContainer
 	} = options
 
@@ -66,6 +69,10 @@ export default function VirtualScrollerConstructor(
 	// For example, React Native, `<canvas/>`, etc.
 	this.engine = engine || DOMEngine
 
+	if (!getEstimatedItemHeight && typeof estimatedItemHeight === 'number') {
+		getEstimatedItemHeight = () => estimatedItemHeight
+	}
+
 	// `scrollableContainer` option is deprecated.
 	// Use `getScrollableContainer()` option instead.
 	if (!getScrollableContainer && scrollableContainer) {
@@ -174,8 +181,8 @@ export default function VirtualScrollerConstructor(
 	}
 
 	log('Items count', items.length)
-	if (estimatedItemHeight) {
-		log('Estimated item height', estimatedItemHeight)
+	if (getEstimatedItemHeight) {
+		log('Estimated item height', getEstimatedItemHeight())
 	}
 
 	createStateHelpers.call(this, { state, onStateChange, render, items })
@@ -190,7 +197,8 @@ export default function VirtualScrollerConstructor(
 
 	createHelpers.call(this, {
 		getScrollableContainer,
-		estimatedItemHeight,
+		getEstimatedItemHeight,
+		getEstimatedVisibleItemRowsCount,
 		measureItemsBatchSize,
 		initialScrollPosition,
 		onScrollPositionChange,
@@ -208,7 +216,8 @@ export default function VirtualScrollerConstructor(
 
 function createHelpers({
 	getScrollableContainer,
-	estimatedItemHeight,
+	getEstimatedItemHeight,
+	getEstimatedVisibleItemRowsCount,
 	measureItemsBatchSize,
 	initialScrollPosition,
 	onScrollPositionChange,
@@ -242,7 +251,8 @@ function createHelpers({
 
 	this.layout = new Layout({
 		bypass: this.bypass,
-		estimatedItemHeight,
+		getInitialEstimatedItemHeight: getEstimatedItemHeight,
+		getInitialEstimatedVisibleItemRowsCount: getEstimatedVisibleItemRowsCount,
 		measureItemsBatchSize,
 		getPrerenderMargin: () => this.getPrerenderMargin(),
 		getVerticalSpacing: () => this.getVerticalSpacing(),
@@ -253,6 +263,8 @@ function createHelpers({
 		getItemHeightBeforeResize: (i) => this.getState().beforeResize && this.getState().beforeResize.itemHeights[i],
 		getBeforeResizeItemsCount: () => this.getState().beforeResize ? this.getState().beforeResize.itemHeights.length : 0,
 		getAverageItemHeight: () => this.itemHeights.getAverage(),
+		// `this.scrollableContainer` is gonna be `undefined` during server-side rendering.
+		// https://gitlab.com/catamphetamine/virtual-scroller/-/issues/30
 		getMaxVisibleAreaHeight: () => this.scrollableContainer && this.scrollableContainer.getHeight(),
 		//
 		// The "previously calculated layout" feature is not currently used.

package/source/VirtualScroller.state.js

@@ -161,7 +161,7 @@ export default function createStateHelpers({
 	function getInitialStateFromScratch() {
 		const items = initialItems
 		const state = {
-			...getInitialLayoutState.call(this, items),
+			...getInitialLayoutState.call(this, items, { beforeStart: true }),
 			items,
 			itemStates: new Array(items.length)
 		}
@@ -221,15 +221,26 @@ export default function createStateHelpers({
 			warn('Reset Layout')
 			state = {
 				...state,
-				...getInitialLayoutState.call(this, state.items)
+				...getInitialLayoutState.call(this, state.items, { beforeStart: false })
 			}
 		}
 
 		return state
 	}
 
-	function getInitialLayoutState(items) {
+	function getInitialLayoutState(items, { beforeStart }) {
 		const itemsCount = items.length
+
+		const getColumnsCount = () => this.getActualColumnsCount()
+
+		const columnsCount = beforeStart
+			? this.layout.getInitialLayoutValueWithFallback(
+				'columnsCount',
+				getColumnsCount,
+				1
+			)
+			: getColumnsCount()
+
 		const {
 			firstShownItemIndex,
 			lastShownItemIndex,
@@ -237,9 +248,12 @@ export default function createStateHelpers({
 			afterItemsHeight
 		} = this.layout.getInitialLayoutValues({
 			itemsCount,
-			columnsCount: this.getActualColumnsCount()
+			columnsCount: this.getActualColumnsCount(),
+			beforeStart
 		})
+
 		const itemHeights = new Array(itemsCount)
+
 		// Optionally preload items to be rendered.
 		this.onBeforeShowItems(
 			items,
@@ -247,6 +261,7 @@ export default function createStateHelpers({
 			firstShownItemIndex,
 			lastShownItemIndex
 		)
+
 		return {
 			itemHeights,
 			columnsCount: this.getActualColumnsCountForState(),

package/source/react/VirtualScroller.js

@@ -17,7 +17,11 @@ function VirtualScroller({
 	items,
 	itemComponent: Component,
 	itemComponentProps,
+	// `estimatedItemHeight` property name is deprecated,
+	// use `getEstimatedItemHeight` property instead.
 	estimatedItemHeight,
+	getEstimatedItemHeight,
+	getEstimatedVisibleItemRowsCount,
 	bypass,
 	tbody,
 	// `preserveScrollPosition` property name is deprecated,
@@ -48,7 +52,11 @@ function VirtualScroller({
 	// Create a `VirtualScroller` instance.
 	const virtualScroller = useVirtualScroller({
 		items,
+		// `estimatedItemHeight` property name is deprecated,
+		// use `getEstimatedItemHeight` property instead.
 		estimatedItemHeight,
+		getEstimatedItemHeight,
+		getEstimatedVisibleItemRowsCount,
 		bypass,
 		// bypassBatchSize,
 		tbody,
@@ -76,7 +84,8 @@ function VirtualScroller({
 		return virtualScroller.getInitialState()
 	}, [])
 
-	// Create state management functions.
+	// Use React's `useState()` hook for managing `VirtualScroller`'s state lifecycle.
+	// This way, React will re-render the component on every state update.
 	const {
 		getState,
 		updateState
@@ -224,7 +233,11 @@ VirtualScroller.propTypes = {
 	items: PropTypes.arrayOf(PropTypes.any).isRequired,
 	itemComponent: elementType.isRequired,
 	itemComponentProps: PropTypes.object,
+	// `estimatedItemHeight` property name is deprecated,
+	// use `getEstimatedItemHeight` property instead.
 	estimatedItemHeight: PropTypes.number,
+	getEstimatedItemHeight: PropTypes.func,
+	getEstimatedVisibleItemRowsCount: PropTypes.func,
 	bypass: PropTypes.bool,
 	// bypassBatchSize: PropTypes.number,
 	tbody: PropTypes.bool,

package/source/react/useVirtualScroller.js

@@ -5,7 +5,10 @@ import VirtualScroller from '../VirtualScroller.js'
 // Creates a `VirtualScroller` instance.
 export default function useVirtualScroller({
 	items,
+	// `estimatedItemHeight` is deprecated, use `getEstimatedItemHeight()` instead.
 	estimatedItemHeight,
+	getEstimatedItemHeight,
+	getEstimatedVisibleItemRowsCount,
 	bypass,
 	// bypassBatchSize,
 	tbody,
@@ -34,7 +37,10 @@ export default function useVirtualScroller({
 			items,
 			{
 				_useTimeoutInRenderLoop: true,
+				// `estimatedItemHeight` is deprecated, use `getEstimatedItemHeight()` instead.
 				estimatedItemHeight,
+				getEstimatedItemHeight,
+				getEstimatedVisibleItemRowsCount,
 				bypass,
 				// bypassBatchSize,
 				tbody,