virtual-scroller 1.15.0 → 1.15.2

package/source/test/VirtualScroller.js

@@ -10,8 +10,17 @@ export default class TestVirtualScroller {
 		columnsCount,
 		verticalSpacing,
 		items,
-		state: initialState
+		getItemId,
+		state: initialState,
+		...rest
 	}) {
+		// Validate that no unknown properties are passed.
+		// This prevents the cases when a developer confuses
+		// `TestVirtualScroller` options for `VirtualScroller` options.
+		if (Object.keys(rest).length > 0) {
+			throw new Error(`Unknown options: ${Object.keys(rest).join(', ')}`)
+		}
+
 		this.expectedStateUpdates = []
 
 		const scrollableContainerElement = {
@@ -81,6 +90,7 @@ export default class TestVirtualScroller {
 			scrollableContainer: scrollableContainerElement,
 			engine: Engine,
 			_waitForScrollingToStop: false,
+			getItemId,
 			getColumnsCount,
 			state: initialState,
 			onStateChange(state) {

package/website/index-dom-bypass.html

@@ -72,6 +72,7 @@
 				const { toIndex } = getState()
 				fromIndex = Math.max(fromIndex - BATCH_SIZE, 0)
 				setState({
+					...getState(),
 					fromIndex,
 					items: items.slice(fromIndex, toIndex + 1)
 				})
@@ -82,6 +83,7 @@
 				let { toIndex } = getState()
 				toIndex = Math.min(toIndex + BATCH_SIZE, items.length - 1)
 				setState({
+					...getState(),
 					toIndex,
 					items: items.slice(fromIndex, toIndex + 1)
 				})
@@ -159,10 +161,7 @@
 
 				setState = (newState) => {
 					const prevState = this.state
-					this.state = {
-						...this.state,
-						...newState
-					}
+					this.state = newState
 					this.onStateChange(this.state, prevState)
 				}
 

package/website/index-dom-grid.html

@@ -78,6 +78,7 @@
 				const { toIndex } = getState()
 				fromIndex = Math.max(fromIndex - BATCH_SIZE, 0)
 				setState({
+					...getState(),
 					fromIndex,
 					items: items.slice(fromIndex, toIndex + 1)
 				})
@@ -88,6 +89,7 @@
 				let { toIndex } = getState()
 				toIndex = Math.min(toIndex + BATCH_SIZE, items.length - 1)
 				setState({
+					...getState(),
 					toIndex,
 					items: items.slice(fromIndex, toIndex + 1)
 				})
@@ -165,10 +167,7 @@
 
 				setState = (newState) => {
 					const prevState = this.state
-					this.state = {
-						...this.state,
-						...newState
-					}
+					this.state = newState
 					this.onStateChange(this.state, prevState)
 				}
 

package/website/index-dom-scrollableContainer.html

@@ -85,6 +85,7 @@
 				const { toIndex } = getState()
 				fromIndex = Math.max(fromIndex - BATCH_SIZE, 0)
 				setState({
+					...getState(),
 					fromIndex,
 					items: items.slice(fromIndex, toIndex + 1)
 				})
@@ -95,6 +96,7 @@
 				let { toIndex } = getState()
 				toIndex = Math.min(toIndex + BATCH_SIZE, items.length - 1)
 				setState({
+					...getState(),
 					toIndex,
 					items: items.slice(fromIndex, toIndex + 1)
 				})
@@ -176,10 +178,7 @@
 
 				setState = (newState) => {
 					const prevState = this.state
-					this.state = {
-						...this.state,
-						...newState
-					}
+					this.state = newState
 					this.onStateChange(this.state, prevState)
 				}
 

package/website/index-dom.html

@@ -72,6 +72,7 @@
 				const { toIndex } = getState()
 				fromIndex = Math.max(fromIndex - BATCH_SIZE, 0)
 				setState({
+					...getState(),
 					fromIndex,
 					items: items.slice(fromIndex, toIndex + 1)
 				})
@@ -82,6 +83,7 @@
 				let { toIndex } = getState()
 				toIndex = Math.min(toIndex + BATCH_SIZE, items.length - 1)
 				setState({
+					...getState(),
 					toIndex,
 					items: items.slice(fromIndex, toIndex + 1)
 				})
@@ -159,10 +161,7 @@
 
 				setState = (newState) => {
 					const prevState = this.state
-					this.state = {
-						...this.state,
-						...newState
-					}
+					this.state = newState
 					this.onStateChange(this.state, prevState)
 				}
 

package/website/index-react-bypass.html

@@ -64,6 +64,7 @@
 				const { toIndex } = getState()
 				fromIndex = Math.max(fromIndex - BATCH_SIZE, 0)
 				setState({
+					...getState(),
 					fromIndex,
 					items: items.slice(fromIndex, toIndex + 1)
 				})
@@ -74,64 +75,59 @@
 				let { toIndex } = getState()
 				toIndex = Math.min(toIndex + BATCH_SIZE, items.length - 1)
 				setState({
+					...getState(),
 					toIndex,
 					items: items.slice(fromIndex, toIndex + 1)
 				})
 			}
 
-			class VirtualScrollerDemo extends React.Component {
-				constructor(props) {
-					super(props)
+			function VirtualScrollerDemo() {
+				const [state, setState] = React.useState(getInitialState(ITEMS))
 
-					this.state = getInitialState(ITEMS)
-				}
-
-				getState = () => this.state
+				const getState = () => state
 
-				onShowPrevious = () => {
-					onShowPrevious(ITEMS, this.getState, this.setState.bind(this))
+				const onShowPrevious_ = () => {
+					onShowPrevious(ITEMS, getState, setState)
 				}
 
-				onShowNext = () => {
-					onShowNext(ITEMS, this.getState, this.setState.bind(this))
+				const onShowNext_ = () => {
+					onShowNext(ITEMS, getState, setState)
 				}
 
-				render() {
-					const {
-						fromIndex,
-						toIndex,
-						items
-					} = this.state
-
-					return (
-						<React.Fragment>
-							{window.PAGINATION && fromIndex > 0 &&
-								<button
-									type="button"
-									onClick={this.onShowPrevious}
-									className="load-items-button">
-									Show previous
-								</button>
-							}
-							<VirtualScroller
-								bypass
-								id="list"
-								items={items}
-								itemComponent={Item}
-								preserveScrollPositionOnPrependItems
-								getColumnsCount={getColumnsCount}
-							/>
-							{window.PAGINATION && toIndex < ITEMS.length - 1 &&
-								<button
-									type="button"
-									onClick={this.onShowNext}
-									className="load-items-button">
-									Show next
-								</button>
-							}
-						</React.Fragment>
-					)
-				}
+				const {
+					fromIndex,
+					toIndex,
+					items
+				} = state
+
+				return (
+					<React.Fragment>
+						{window.PAGINATION && fromIndex > 0 &&
+							<button
+								type="button"
+								onClick={onShowPrevious_}
+								className="load-items-button">
+								Show previous
+							</button>
+						}
+						<VirtualScroller
+							bypass
+							id="list"
+							items={items}
+							itemComponent={Item}
+							preserveScrollPositionOnPrependItems
+							getColumnsCount={getColumnsCount}
+						/>
+						{window.PAGINATION && toIndex < ITEMS.length - 1 &&
+							<button
+								type="button"
+								onClick={onShowNext_}
+								className="load-items-button">
+								Show next
+							</button>
+						}
+					</React.Fragment>
+				)
 			}
 
 			const item = PropTypes.shape({
@@ -168,21 +164,19 @@
 				children: item.isRequired
 			}
 
-			class Demo extends React.Component {
-				render() {
-					return (
-						<section className="container">
-							<h1>
-								<TwitterLogo/>
-								Latest Tweets on #politics
-							</h1>
-							<VirtualScrollerDemo/>
-							<footer>
-								© Twitter Inc., 2019
-							</footer>
-						</section>
-					)
-				}
+			function Demo() {
+				return (
+					<section className="container">
+						<h1>
+							<TwitterLogo/>
+							Latest Tweets on #politics
+						</h1>
+						<VirtualScrollerDemo/>
+						<footer>
+							© Twitter Inc., 2019
+						</footer>
+					</section>
+				)
 			}
 
 			function TwitterLogo() {

package/website/index-react-grid.html

@@ -68,6 +68,7 @@
 				const { toIndex } = getState()
 				fromIndex = Math.max(fromIndex - BATCH_SIZE, 0)
 				setState({
+					...getState(),
 					fromIndex,
 					items: items.slice(fromIndex, toIndex + 1)
 				})
@@ -78,63 +79,58 @@
 				let { toIndex } = getState()
 				toIndex = Math.min(toIndex + BATCH_SIZE, items.length - 1)
 				setState({
+					...getState(),
 					toIndex,
 					items: items.slice(fromIndex, toIndex + 1)
 				})
 			}
 
-			class VirtualScrollerDemo extends React.Component {
-				constructor(props) {
-					super(props)
+			function VirtualScrollerDemo() {
+				const [state, setState] = React.useState(getInitialState(ITEMS))
 
-					this.state = getInitialState(ITEMS)
-				}
-
-				getState = () => this.state
+				const getState = () => state
 
-				onShowPrevious = () => {
-					onShowPrevious(ITEMS, this.getState, this.setState.bind(this))
+				const onShowPrevious_ = () => {
+					onShowPrevious(ITEMS, getState, setState)
 				}
 
-				onShowNext = () => {
-					onShowNext(ITEMS, this.getState, this.setState.bind(this))
+				const onShowNext_ = () => {
+					onShowNext(ITEMS, getState, setState)
 				}
 
-				render() {
-					const {
-						fromIndex,
-						toIndex,
-						items
-					} = this.state
-
-					return (
-						<React.Fragment>
-							{window.PAGINATION && fromIndex > 0 &&
-								<button
-									type="button"
-									onClick={this.onShowPrevious}
-									className="load-items-button">
-									Show previous
-								</button>
-							}
-							<VirtualScroller
-								id="list"
-								items={items}
-								itemComponent={Item}
-								preserveScrollPositionOnPrependItems
-								getColumnsCount={getColumnsCount}
-							/>
-							{window.PAGINATION && toIndex < ITEMS.length - 1 &&
-								<button
-									type="button"
-									onClick={this.onShowNext}
-									className="load-items-button">
-									Show next
-								</button>
-							}
-						</React.Fragment>
-					)
-				}
+				const {
+					fromIndex,
+					toIndex,
+					items
+				} = state
+
+				return (
+					<React.Fragment>
+						{window.PAGINATION && fromIndex > 0 &&
+							<button
+								type="button"
+								onClick={onShowPrevious_}
+								className="load-items-button">
+								Show previous
+							</button>
+						}
+						<VirtualScroller
+							id="list"
+							items={items}
+							itemComponent={Item}
+							preserveScrollPositionOnPrependItems
+							getColumnsCount={getColumnsCount}
+						/>
+						{window.PAGINATION && toIndex < ITEMS.length - 1 &&
+							<button
+								type="button"
+								onClick={onShowNext_}
+								className="load-items-button">
+								Show next
+							</button>
+						}
+					</React.Fragment>
+				)
 			}
 
 			const item = PropTypes.shape({
@@ -171,21 +167,19 @@
 				children: item.isRequired
 			}
 
-			class Demo extends React.Component {
-				render() {
-					return (
-						<section className="container">
-							<h1>
-								<TwitterLogo/>
-								Latest Tweets on #politics
-							</h1>
-							<VirtualScrollerDemo/>
-							<footer>
-								© Twitter Inc., 2019
-							</footer>
-						</section>
-					)
-				}
+			function Demo() {
+				return (
+					<section className="container">
+						<h1>
+							<TwitterLogo/>
+							Latest Tweets on #politics
+						</h1>
+						<VirtualScrollerDemo/>
+						<footer>
+							© Twitter Inc., 2019
+						</footer>
+					</section>
+				)
 			}
 
 			function TwitterLogo() {

package/website/index-react-hook.html

@@ -0,0 +1,209 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<!-- Fix encoding. -->
+		<meta charset="utf-8">
+		<!-- Fix document width for mobile devices. -->
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+		<title>VirtualScroller (React) (hook)</title>
+
+		<script src="./lib/react.development.js"></script>
+		<script src="./lib/react-dom.development.js"></script>
+		<script src="./lib/prop-types.min.js"></script>
+		<script src="./lib/babel.min.js"></script>
+
+		<script src="./virtual-scroller-react.js"></script>
+		<script src="./items.js"></script>
+
+		<link rel="stylesheet" href="./style.base.css"/>
+		<link rel="stylesheet" href="./style.list.css"/>
+	</head>
+
+	<body>
+		<!-- http://tholman.com/github-corners/ -->
+		<a title="Go to GitHub repo" href="https://gitlab.com/catamphetamine/virtual-scroller" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
+
+		<div id="root"></div>
+
+		<script>
+			// Enable debug output to console.
+			window.VirtualScrollerDebug = true
+			// Pass `?pagination=✓` URL query parameter to enable pagination.
+			window.PAGINATION = Boolean(new URL(window.location).searchParams.get('pagination'))
+		</script>
+
+		<script type="text/babel">
+    	const BATCH_SIZE = 6
+			const COLUMNS_COUNT = 1
+
+			function getColumnsCount(container) {
+				return 1
+			}
+
+			function getInitialState(items) {
+				if (window.PAGINATION) {
+					const fromIndex = Math.floor((items.length - BATCH_SIZE) / 2 / COLUMNS_COUNT) * COLUMNS_COUNT
+					const toIndex = fromIndex + BATCH_SIZE - 1
+					return {
+						fromIndex,
+						toIndex,
+						items: items.slice(fromIndex, toIndex + 1)
+					}
+				} else {
+					return {
+						fromIndex: 0,
+						toIndex: items.length,
+						items: items
+					}
+				}
+			}
+
+			function onShowPrevious(items, getState, setState) {
+				let { fromIndex } = getState()
+				const { toIndex } = getState()
+				fromIndex = Math.max(fromIndex - BATCH_SIZE, 0)
+				setState({
+					...getState(),
+					fromIndex,
+					items: items.slice(fromIndex, toIndex + 1)
+				})
+			}
+
+			function onShowNext(items, getState, setState) {
+				const { fromIndex } = getState()
+				let { toIndex } = getState()
+				toIndex = Math.min(toIndex + BATCH_SIZE, items.length - 1)
+				setState({
+					...getState(),
+					toIndex,
+					items: items.slice(fromIndex, toIndex + 1)
+				})
+			}
+
+			function VirtualScrollerDemo() {
+				const [state, setState] = React.useState(getInitialState(ITEMS))
+
+				const getState = () => state
+
+				const onShowPrevious_ = () => {
+					onShowPrevious(ITEMS, getState, setState)
+				}
+
+				const onShowNext_ = () => {
+					onShowNext(ITEMS, getState, setState)
+				}
+
+				const {
+					fromIndex,
+					toIndex,
+					items
+				} = state
+
+				const {
+					state: {
+						items: itemsToRender,
+						firstShownItemIndex,
+						lastShownItemIndex
+					},
+					style,
+					className,
+					itemsContainerRef
+				} = VirtualScroller.useVirtualScroller({
+					items,
+					preserveScrollPositionOnPrependItems: true,
+					getColumnsCount
+				})
+
+				return (
+					<React.Fragment>
+						{window.PAGINATION && fromIndex > 0 &&
+							<button
+								type="button"
+								onClick={onShowPrevious_}
+								className="load-items-button">
+								Show previous
+							</button>
+						}
+						<div id="list" ref={itemsContainerRef} style={style} className={className}>
+							{itemsToRender.map((item, i) => {
+								if (i >= firstShownItemIndex && i <= lastShownItemIndex) {
+									return (
+										<Item key={i} item={item}/>
+									)
+								}
+								return null
+							})}
+						</div>
+						{window.PAGINATION && toIndex < ITEMS.length - 1 &&
+							<button
+								type="button"
+								onClick={onShowNext_}
+								className="load-items-button">
+								Show next
+							</button>
+						}
+					</React.Fragment>
+				)
+			}
+
+			const item = PropTypes.shape({
+				username: PropTypes.string.isRequired,
+				date: PropTypes.instanceOf(Date).isRequired,
+				text: PropTypes.string.isRequired
+			})
+
+			function Item({ item }) {
+				const {
+					username,
+					date,
+					text
+				} = item
+
+				return (
+					<article className="list-item">
+						<a target="_blank" href={`https://twitter.com/${username}`}>
+							@{username}
+						</a>
+						<time dateTime={date.toISOString()}>
+							{date.getMonth() + 1}/{date.getDate()}/{date.getFullYear()}
+						</time>
+						<p>
+							{text}
+						</p>
+					</article>
+				)
+			}
+
+			Item.propTypes = {
+				children: item.isRequired
+			}
+
+			function Demo() {
+				return (
+					<section className="container">
+						<h1>
+							<TwitterLogo/>
+							Latest Tweets on #politics
+						</h1>
+						<VirtualScrollerDemo/>
+						<footer>
+							© Twitter Inc., 2019
+						</footer>
+					</section>
+				)
+			}
+
+			function TwitterLogo() {
+				return (
+					<svg className="twitter-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128">
+						<path fill="#00AAEC" fillRule="evenodd" d="M128 23.294a51.28 51.28 0 0 1-15.079 4.237c5.424-3.328 9.587-8.606 11.548-14.892a51.718 51.718 0 0 1-16.687 6.526c-4.778-5.231-11.608-8.498-19.166-8.498-14.493 0-26.251 12.057-26.251 26.927 0 2.111.225 4.16.676 6.133-21.824-1.126-41.17-11.835-54.131-28.145a27.422 27.422 0 0 0-3.554 13.552c0 9.338 4.636 17.581 11.683 22.412-4.297-.131-8.355-1.356-11.901-3.359v.331c0 13.051 9.053 23.937 21.074 26.403-2.201.632-4.523.948-6.92.948-1.69 0-3.343-.162-4.944-.478 3.343 10.694 13.035 18.483 24.53 18.691-8.986 7.227-20.315 11.533-32.614 11.533-2.119 0-4.215-.123-6.266-.37 11.623 7.627 25.432 12.088 40.255 12.088 48.309 0 74.717-41.026 74.717-76.612a89.39 89.39 0 0 0-.068-3.49A53.862 53.862 0 0 0 128 23.294" clipRule="evenodd"/>
+					</svg>
+				)
+			}
+
+			const root = ReactDOM.createRoot(document.getElementById('root'))
+			root.render(<Demo/>)
+		</script>
+	</body>
+</html>