virtual-scroller 1.10.2 → 1.11.0

package/source/VirtualScroller.state.js

@@ -1,3 +1,4 @@
+import fillArray from './utility/fillArray.js'
 import log, { warn, isDebug, reportError } from './utility/debug.js'
 import { cleanUpBeforeResizeState } from './BeforeResize.js'
 import getStateSnapshot from './utility/getStateSnapshot.js'
@@ -25,7 +26,8 @@ import getStateSnapshot from './utility/getStateSnapshot.js'
 // then the state update of the window resize handler gets overwritten.
 
 export default function createStateHelpers({
-	state,
+	state: initialState,
+	getInitialItemState,
 	onStateChange,
 	render,
 	items: initialItems
@@ -33,7 +35,9 @@ export default function createStateHelpers({
 	this.onStateChange = onStateChange
 	this._render = render
 
-	this._onItemStateChange = (i, newItemState) => {
+	this.getInitialItemState = getInitialItemState
+
+	this._setItemState = (i, newItemState) => {
 		if (isDebug()) {
 			log('~ Item state changed ~')
 			log('Item', i)
@@ -80,10 +84,10 @@ export default function createStateHelpers({
 	}
 
 	this.getInitialState = () => {
-		if (state) {
-			return getRestoredState.call(this, state)
+		if (initialState) {
+			return getRestoredState.call(this, initialState)
 		}
-		return getInitialStateFromScratch.call(this)
+		return getInitialStateFromScratch.call(this, { getInitialItemState })
 	}
 
 	this.useState = ({
@@ -156,20 +160,24 @@ export default function createStateHelpers({
 	/**
 	 * Returns the initial state of the `VirtualScroller` "from scratch".
 	 * (i.e. not from a previously saved one).
+	 * @param {function} [options.getInitialItemState] — Gets initial item state.
 	 * @return {object}
 	 */
-	function getInitialStateFromScratch() {
+	function getInitialStateFromScratch({ getInitialItemState }) {
 		const items = initialItems
+
 		const state = {
 			...getInitialLayoutState.call(this, items, { beforeStart: true }),
 			items,
-			itemStates: new Array(items.length)
+			itemStates: fillArray(new Array(items.length), (i) => getInitialItemState(items[i]))
 		}
+
 		if (isDebug()) {
 			log('Initial state (autogenerated)', getStateSnapshot(state))
 		}
 		log('First shown item index', state.firstShownItemIndex)
 		log('Last shown item index', state.lastShownItemIndex)
+
 		return state
 	}
 

package/source/react/VirtualScroller.js

@@ -6,7 +6,7 @@ import useVirtualScroller from './useVirtualScroller.js'
 import useVirtualScrollerStartStop from './useVirtualScrollerStartStop.js'
 import useInstanceMethods from './useInstanceMethods.js'
 import useItemKeys from './useItemKeys.js'
-import useOnItemStateChange from './useOnItemStateChange.js'
+import useSetItemState from './useSetItemState.js'
 import useOnItemHeightChange from './useOnItemHeightChange.js'
 import useHandleItemsChange from './useHandleItemsChange.js'
 import useClassName from './useClassName.js'
@@ -44,6 +44,7 @@ function VirtualScroller({
 	onScrollPositionChange,
 	onStateChange,
 	initialState,
+	getInitialItemState,
 	...rest
 }, ref) {
 	// List items "container" DOM Element reference.
@@ -74,6 +75,7 @@ function VirtualScroller({
 		getItemId,
 		AsComponent,
 		initialState,
+		getInitialItemState,
 		onStateChange
 	}, {
 		container
@@ -116,9 +118,9 @@ function VirtualScroller({
 		getItemId
 	})
 
-	// Cache per-item `onItemStateChange` functions' "references"
+	// Cache per-item `setItemState` functions' "references"
 	// so that item components don't get re-rendered needlessly.
-	const getOnItemStateChange = useOnItemStateChange({
+	const getSetItemState = useSetItemState({
 		items,
 		virtualScroller
 	})
@@ -193,10 +195,21 @@ function VirtualScroller({
 			style={style}>
 			{renderedItems.map((item, i) => {
 				if (i >= firstShownItemIndex && i <= lastShownItemIndex) {
-					// Passing `item` as `children` property is legacy and is deprecated.
-					// If version `2.x` is published in some hypothetical future,
-					// the `item` and `itemIndex` properties should be moved below
-					// `{...itemComponentProps}`.
+					// * Passing `item` as `children` property is legacy and is deprecated.
+					//   If version `2.x` is published in some hypothetical future,
+					//   the `item` and `itemIndex` properties should be moved below
+					//   `{...itemComponentProps}`.
+					//
+					// * Passing `itemIndex` property is legacy and is deprecated.
+					//   The rationale is that setting new `items` on a React component
+					//   is an asynchronous operation, so when a user obtains `itemIndex`,
+					//   they don't know which `items` list does that index correspond to,
+					//   therefore making it useless, or even buggy if used incorreclty.
+					//
+					// * Passing `onStateChange` property for legacy reasons.
+					//   The new property name is `setState`.
+					//   The old property name `onStateChange` is deprecated.
+					//
 					return (
 						<Component
 							item={item}
@@ -204,7 +217,8 @@ function VirtualScroller({
 							{...itemComponentProps}
 							key={getItemKey(item, i)}
 							state={itemStates && itemStates[i]}
-							onStateChange={getOnItemStateChange(i)}
+							setState={getSetItemState(i)}
+							onStateChange={getSetItemState(i)}
 							onHeightChange={getOnItemHeightChange(i)}>
 							{item}
 						</Component>
@@ -262,7 +276,7 @@ VirtualScroller.propTypes = {
 	onStateChange: PropTypes.func,
 	initialState: PropTypes.shape({
 		items: PropTypes.arrayOf(PropTypes.object).isRequired,
-		itemStates: PropTypes.arrayOf(PropTypes.any),
+		itemStates: PropTypes.arrayOf(PropTypes.any).isRequired,
 		firstShownItemIndex: PropTypes.number.isRequired,
 		lastShownItemIndex: PropTypes.number.isRequired,
 		beforeItemsHeight: PropTypes.number.isRequired,
@@ -270,7 +284,8 @@ VirtualScroller.propTypes = {
 		itemHeights: PropTypes.arrayOf(PropTypes.number).isRequired,
 		columnsCount: PropTypes.number,
 		verticalSpacing: PropTypes.number
-	})
+	}),
+	getInitialItemState: PropTypes.func
 }
 
 VirtualScroller.defaultProps = {

package/source/react/{useOnItemStateChange.js → useSetItemState.js}

@@ -1,6 +1,6 @@
 import { useMemo, useRef, useCallback } from 'react'
 
-export default function useOnItemStateChange({
+export default function useSetItemState({
 	items,
 	virtualScroller
 }) {
@@ -12,11 +12,11 @@ export default function useOnItemStateChange({
 	// Handler functions cache.
 	const cache = useRef(initialCacheValue)
 
-	// Caches per-item `onItemStateChange` functions' "references"
+	// Caches per-item `setItemState` functions' "references"
 	// so that item components don't get re-rendered needlessly.
-	const getOnItemStateChange = useCallback((i) => {
+	const getSetItemState = useCallback((i) => {
 		if (!cache.current[i]) {
-			cache.current[i] = (itemState) => virtualScroller.onItemStateChange(i, itemState)
+			cache.current[i] = (itemState) => virtualScroller.setItemState(i, itemState)
 		}
 		return cache.current[i]
 	}, [
@@ -24,5 +24,5 @@ export default function useOnItemStateChange({
 		cache
 	])
 
-	return getOnItemStateChange
+	return getSetItemState
 }

package/source/react/useVirtualScroller.js

@@ -26,6 +26,7 @@ export default function useVirtualScroller({
 	getItemId,
 	AsComponent,
 	initialState,
+	getInitialItemState,
 	onStateChange
 }, {
 	container
@@ -58,6 +59,7 @@ export default function useVirtualScroller({
 				getItemId,
 				tbody: AsComponent === 'tbody',
 				state: initialState,
+				getInitialItemState,
 				onStateChange
 			}
 		)

package/source/utility/fillArray.js

@@ -0,0 +1,8 @@
+export default function fillArray(array, getItem) {
+	let i = 0
+	while (i < array.length) {
+		array[i] = getItem(i)
+		i++
+	}
+	return array
+}

package/commonjs/react/useOnItemStateChange.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useOnItemStateChange.js","names":["useOnItemStateChange","items","virtualScroller","initialCacheValue","useMemo","Array","length","cache","useRef","getOnItemStateChange","useCallback","i","current","itemState","onItemStateChange"],"sources":["../../source/react/useOnItemStateChange.js"],"sourcesContent":["import { useMemo, useRef, useCallback } from 'react'\r\n\r\nexport default function useOnItemStateChange({\r\n\titems,\r\n\tvirtualScroller\r\n}) {\r\n\t// Only compute the initial cache value once.\r\n\tconst initialCacheValue = useMemo(() => {\r\n\t\treturn new Array(items.length)\r\n\t}, [])\r\n\r\n\t// Handler functions cache.\r\n\tconst cache = useRef(initialCacheValue)\r\n\r\n\t// Caches per-item `onItemStateChange` functions' \"references\"\r\n\t// so that item components don't get re-rendered needlessly.\r\n\tconst getOnItemStateChange = useCallback((i) => {\r\n\t\tif (!cache.current[i]) {\r\n\t\t\tcache.current[i] = (itemState) => virtualScroller.onItemStateChange(i, itemState)\r\n\t\t}\r\n\t\treturn cache.current[i]\r\n\t}, [\r\n\t\tvirtualScroller,\r\n\t\tcache\r\n\t])\r\n\r\n\treturn getOnItemStateChange\r\n}"],"mappings":";;;;;;;AAAA;;AAEe,SAASA,oBAAT,OAGZ;EAAA,IAFFC,KAEE,QAFFA,KAEE;EAAA,IADFC,eACE,QADFA,eACE;EACF;EACA,IAAMC,iBAAiB,GAAG,IAAAC,cAAA,EAAQ,YAAM;IACvC,OAAO,IAAIC,KAAJ,CAAUJ,KAAK,CAACK,MAAhB,CAAP;EACA,CAFyB,EAEvB,EAFuB,CAA1B,CAFE,CAMF;;EACA,IAAMC,KAAK,GAAG,IAAAC,aAAA,EAAOL,iBAAP,CAAd,CAPE,CASF;EACA;;EACA,IAAMM,oBAAoB,GAAG,IAAAC,kBAAA,EAAY,UAACC,CAAD,EAAO;IAC/C,IAAI,CAACJ,KAAK,CAACK,OAAN,CAAcD,CAAd,CAAL,EAAuB;MACtBJ,KAAK,CAACK,OAAN,CAAcD,CAAd,IAAmB,UAACE,SAAD;QAAA,OAAeX,eAAe,CAACY,iBAAhB,CAAkCH,CAAlC,EAAqCE,SAArC,CAAf;MAAA,CAAnB;IACA;;IACD,OAAON,KAAK,CAACK,OAAN,CAAcD,CAAd,CAAP;EACA,CAL4B,EAK1B,CACFT,eADE,EAEFK,KAFE,CAL0B,CAA7B;EAUA,OAAOE,oBAAP;AACA"}

package/modules/react/useOnItemStateChange.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useOnItemStateChange.js","names":["useMemo","useRef","useCallback","useOnItemStateChange","items","virtualScroller","initialCacheValue","Array","length","cache","getOnItemStateChange","i","current","itemState","onItemStateChange"],"sources":["../../source/react/useOnItemStateChange.js"],"sourcesContent":["import { useMemo, useRef, useCallback } from 'react'\r\n\r\nexport default function useOnItemStateChange({\r\n\titems,\r\n\tvirtualScroller\r\n}) {\r\n\t// Only compute the initial cache value once.\r\n\tconst initialCacheValue = useMemo(() => {\r\n\t\treturn new Array(items.length)\r\n\t}, [])\r\n\r\n\t// Handler functions cache.\r\n\tconst cache = useRef(initialCacheValue)\r\n\r\n\t// Caches per-item `onItemStateChange` functions' \"references\"\r\n\t// so that item components don't get re-rendered needlessly.\r\n\tconst getOnItemStateChange = useCallback((i) => {\r\n\t\tif (!cache.current[i]) {\r\n\t\t\tcache.current[i] = (itemState) => virtualScroller.onItemStateChange(i, itemState)\r\n\t\t}\r\n\t\treturn cache.current[i]\r\n\t}, [\r\n\t\tvirtualScroller,\r\n\t\tcache\r\n\t])\r\n\r\n\treturn getOnItemStateChange\r\n}"],"mappings":"AAAA,SAASA,OAAT,EAAkBC,MAAlB,EAA0BC,WAA1B,QAA6C,OAA7C;AAEA,eAAe,SAASC,oBAAT,OAGZ;EAAA,IAFFC,KAEE,QAFFA,KAEE;EAAA,IADFC,eACE,QADFA,eACE;EACF;EACA,IAAMC,iBAAiB,GAAGN,OAAO,CAAC,YAAM;IACvC,OAAO,IAAIO,KAAJ,CAAUH,KAAK,CAACI,MAAhB,CAAP;EACA,CAFgC,EAE9B,EAF8B,CAAjC,CAFE,CAMF;;EACA,IAAMC,KAAK,GAAGR,MAAM,CAACK,iBAAD,CAApB,CAPE,CASF;EACA;;EACA,IAAMI,oBAAoB,GAAGR,WAAW,CAAC,UAACS,CAAD,EAAO;IAC/C,IAAI,CAACF,KAAK,CAACG,OAAN,CAAcD,CAAd,CAAL,EAAuB;MACtBF,KAAK,CAACG,OAAN,CAAcD,CAAd,IAAmB,UAACE,SAAD;QAAA,OAAeR,eAAe,CAACS,iBAAhB,CAAkCH,CAAlC,EAAqCE,SAArC,CAAf;MAAA,CAAnB;IACA;;IACD,OAAOJ,KAAK,CAACG,OAAN,CAAcD,CAAd,CAAP;EACA,CALuC,EAKrC,CACFN,eADE,EAEFI,KAFE,CALqC,CAAxC;EAUA,OAAOC,oBAAP;AACA"}