virtual-scroller 1.12.6 → 1.13.1

package/source/react/VirtualScroller.js

@@ -27,7 +27,7 @@ import { warn } from '../utility/debug.js'
 // * The React component re-renders itself the second time.
 
 function VirtualScroller({
-	as: AsComponent,
+	as: AsComponent = 'div',
 	items: itemsProperty,
 	itemComponent: Component,
 	itemComponentProps,
@@ -50,6 +50,7 @@ function VirtualScroller({
 	getColumnsCount,
 	getItemId,
 	className,
+	readyToStart,
 	onMount,
 	// `onItemFirstRender(i)` is deprecated, use `onItemInitialRender(item)` instead.
 	onItemFirstRender,
@@ -122,7 +123,7 @@ function VirtualScroller({
 
 	// Start `VirtualScroller` on mount.
 	// Stop `VirtualScroller` on unmount.
-	useVirtualScrollerStartStop(virtualScroller)
+	useVirtualScrollerStartStop(virtualScroller, { readyToStart })
 
 	// List items are rendered with `key`s so that React doesn't
 	// "reuse" `itemComponent`s in cases when `items` are changed.
@@ -233,6 +234,10 @@ function VirtualScroller({
 					//   The new property name is `setState`.
 					//   The old property name `onStateChange` is deprecated.
 					//
+					// * Passing `onHeightChange` property for legacy reasons.
+					//   The new property name is `onHeightDidChange`.
+					//   The old property name `onHeightChange` is deprecated.
+					//
 					return (
 						<Component
 							item={item}
@@ -291,6 +296,7 @@ VirtualScroller.propTypes = {
 	getColumnsCount: PropTypes.func,
 	getItemId: PropTypes.func,
 	className: PropTypes.string,
+	readyToStart: PropTypes.bool,
 	onMount: PropTypes.func,
 	onItemInitialRender: PropTypes.func,
 	// `onItemFirstRender(i)` is deprecated, use `onItemInitialRender(item)` instead.
@@ -311,7 +317,3 @@ VirtualScroller.propTypes = {
 	}),
 	getInitialItemState: PropTypes.func
 }
-
-VirtualScroller.defaultProps = {
-	as: 'div'
-}

package/source/react/useVirtualScrollerStartStop.js

@@ -1,12 +1,45 @@
-import { useLayoutEffect } from 'react'
+import { useLayoutEffect, useEffect, useRef } from 'react'
 
-export default function useVirtualScrollerStartStop(virtualScroller) {
-	useLayoutEffect(() => {
-		// Start listening to scroll events.
-		virtualScroller.start()
-		return () => {
+import log from '../utility/debug.js'
+
+export default function useVirtualScrollerStartStop(virtualScroller, { readyToStart }) {
+	const hasStarted = useRef(false)
+
+	const startIfReadyToStartAndNotStarted = () => {
+		if (!hasStarted.current) {
+			if (readyToStart === false) {
+				log('Could\'ve started but isn\'t ready to start')
+			} else {
+				hasStarted.current = true
+				// Start listening to scroll events.
+				virtualScroller.start()
+			}
+		}
+	}
+
+	const stopIfStarted = () => {
+		if (hasStarted.current) {
 			// Stop listening to scroll events.
 			virtualScroller.stop()
+			// Can be re-started.
+			hasStarted.current = false
 		}
+	}
+
+	// Uses `useLayoutEffect()` here rather than just `useEffect()`
+	// in order to reduce the timeframe of showing an empty list to the user.
+	useLayoutEffect(() => {
+		startIfReadyToStartAndNotStarted()
+		return stopIfStarted
 	}, [])
+
+	const readyToStartPrev = useRef(readyToStart)
+
+	useEffect(() => {
+		if (readyToStartPrev.current === false && readyToStart !== false) {
+			readyToStartPrev.current = readyToStart
+			log('Is ready to start')
+			startIfReadyToStartAndNotStarted()
+		}
+	}, [readyToStart])
 }