Added InfiniteLoader demo and refactored other demos to share data

Author: bvaughn

source/AutoSizer/AutoSizer.example.css

@@ -3,14 +3,17 @@
   min-height: 200px;
 }
 
-.Empty {
-  width: 100%;
-  height: 100%;
+.VirtualScroll {
+  border: 1px solid #e0e0e0;
+}
+
+.row {
   display: flex;
-  justify-content: center;
+  flex-direction: row;
   align-items: center;
-  background-color: #fafafa;
-  border: 1px solid #e0e0e0;
+  padding: 0 25px;
+  background-color: #fff;
+  border-bottom: 1px solid #e0e0e0;
 }
 
 .checkboxLabel {

source/AutoSizer/AutoSizer.example.js

@@ -1,25 +1,33 @@
 /** @flow */
-import React, { Component } from 'react'
+import Immutable from 'immutable'
+import React, { Component, PropTypes } from 'react'
 import { ContentBox, ContentBoxHeader, ContentBoxParagraph } from '../demo/ContentBox'
 import AutoSizer from './AutoSizer'
 import VirtualScroll from '../VirtualScroll'
 import styles from './AutoSizer.example.css'
 
 export default class AutoSizerExample extends Component {
+  static propTypes = {
+    list: PropTypes.instanceOf(Immutable.List).isRequired
+  }
+
   constructor (props) {
     super(props)
 
     this.state = {
       hideDescription: false
     }
+
+    this._rowRenderer = this._rowRenderer.bind(this)
   }
 
   render () {
     const { hideDescription } = this.state
+    const { list } = this.props
 
     return (
       <ContentBox
-         {...this.props}
+        {...this.props}
         style={{
           maxHeight: 600
         }}
@@ -53,19 +61,30 @@ export default class AutoSizerExample extends Component {
         <div className={styles.AutoSizerWrapper}>
           <AutoSizer className={styles.AutoSizer}>
             <VirtualScroll
+              className={styles.VirtualScroll}
               height={0}
-              noRowsRenderer={() => (
-                <div className={styles.Empty}>
-                  Empty &nbsp; <code>VirtualScroll</code>
-                </div>
-              )}
-              rowsCount={0}
-              rowHeight={1}
-              rowRenderer={() => {}}
+              rowsCount={list.size}
+              rowHeight={30}
+              rowRenderer={this._rowRenderer}
             />
           </AutoSizer>
         </div>
       </ContentBox>
     )
   }
+
+  _rowRenderer (index) {
+    const { list } = this.props
+    const row = list.get(index)
+
+    return (
+      <div
+        key={index}
+        className={styles.row}
+        style={{ height: 30 }}
+      >
+        {row.name}
+      </div>
+    )
+  }
 }

source/FlexTable/FlexTable.example.js

@@ -1,12 +1,17 @@
 /** @flow */
-import React, { Component } from 'react'
+import Immutable from 'immutable'
+import React, { Component, PropTypes } from 'react'
 import { ContentBox, ContentBoxHeader, ContentBoxParagraph } from '../demo/ContentBox'
 import { LabeledInput, InputRow } from '../demo/LabeledInput'
 import FlexColumn from './FlexColumn'
 import FlexTable, { SortDirection } from './FlexTable'
 import styles from './FlexTable.example.css'
 
 export default class TableExample extends Component {
+  static propTypes = {
+    list: PropTypes.instanceOf(Immutable.List).isRequired
+  }
+
   constructor (props, context) {
     super(props, context)
 

source/InfiniteLoader/InfiniteLoader.example.css

@@ -1,7 +1,6 @@
 .VirtualScroll {
   width: 100%;
   border: 1px solid #DDD;
-  margin-top: 15px;
 }
 
 .row {
@@ -18,3 +17,13 @@
   height: 1em;
   background-color: #DDD;
 }
+
+.button {
+  background-color: #4db6ac;
+  color: #fff;
+  appearance: none;
+  border: none;
+  padding: .5em 1em;
+  border-radius: .35em;
+  font-size: 1em;
+}

source/InfiniteLoader/InfiniteLoader.example.js

@@ -1,6 +1,7 @@
 /** @flow */
-import React, { Component } from 'react'
+import React, { Component, PropTypes } from 'react'
 import { ContentBox, ContentBoxHeader, ContentBoxParagraph } from '../demo/ContentBox'
+import Immutable from 'immutable'
 import InfiniteLoader from './InfiniteLoader'
 import VirtualScroll from '../VirtualScroll'
 import styles from './InfiniteLoader.example.css'
@@ -9,6 +10,10 @@ const STATUS_LOADING = 1
 const STATUS_LOADED = 2
 
 export default class InfiniteLoaderExample extends Component {
+  static propTypes = {
+    list: PropTypes.instanceOf(Immutable.List).isRequired
+  }
+
   constructor (props) {
     super(props)
 
@@ -17,6 +22,7 @@ export default class InfiniteLoaderExample extends Component {
       randomScrollToIndex: null
     }
 
+    this._clearData = this._clearData.bind(this)
     this._isRowLoaded = this._isRowLoaded.bind(this)
     this._loadMoreRows = this._loadMoreRows.bind(this)
     this._rowRenderer = this._rowRenderer.bind(this)
@@ -37,17 +43,28 @@ export default class InfiniteLoaderExample extends Component {
         />
 
         <ContentBoxParagraph>
-          Coming soon...
+          This component manages just-in-time data fetching to ensure that the all visible rows have been loaded.
+          It also uses a threshold to determine how early to pre-fetch rows (before a user scrolls to them).
+        </ContentBoxParagraph>
+
+        <ContentBoxParagraph>
+          <button
+            className={styles.button}
+            onClick={this._clearData}
+          >
+            Flush Cached Data
+          </button>
         </ContentBoxParagraph>
 
         <InfiniteLoader
+          ref='InfiniteLoader'
           isRowLoaded={this._isRowLoaded}
           loadMoreRows={this._loadMoreRows}
           rowsCount={list.size}
         >
           <VirtualScroll
             className={styles.VirtualScroll}
-            height={300}
+            height={200}
             rowsCount={list.size}
             rowHeight={30}
             rowRenderer={this._rowRenderer}
@@ -58,6 +75,12 @@ export default class InfiniteLoaderExample extends Component {
     )
   }
 
+  _clearData () {
+    this.setState({
+      loadedRowsMap: {}
+    })
+  }
+
   _isRowLoaded (index) {
     const { loadedRowsMap } = this.state
     return !!loadedRowsMap[index]
@@ -74,23 +97,29 @@ export default class InfiniteLoaderExample extends Component {
       for (var i = startIndex; i <= stopIndex; i++) {
         loadedRowsMap[i] = STATUS_LOADED
       }
+
+      promiseResolver()
     }, 1000) // TODO Randomize time?
+
+    let promiseResolver
+
+    return new Promise(resolve => promiseResolver = resolve)
   }
 
   _rowRenderer (index) {
     const { list } = this.props
     const { loadedRowsMap } = this.state
 
+    const row = list.get(index)
     let content
 
     if (loadedRowsMap[index] === STATUS_LOADED) {
-      const row = list.get(index)
       content = row.name
     } else {
       content = (
         <div
           className={styles.placeholder}
-          style={{ width: 100 + Math.round(Math.random() * 100) }}
+          style={{ width: row.size }}
         />
       )
     }

source/InfiniteLoader/InfiniteLoader.js

@@ -30,11 +30,15 @@ export default class InfiniteLoader extends Component {
     isRowLoaded: PropTypes.func,
     /**
      * Callback to be invoked when more rows must be loaded.
-     * It should implement the following signature: ({ startIndex, stopIndex }): void
+     * It should implement the following signature: ({ startIndex, stopIndex }): Promise
+     * The returned Promise should be resolved once row data has finished loading.
+     * It will be used to determine when to refresh the list with the newly-loaded data.
      * This callback may be called multiple times in reaction to a single scroll event.
      */
     loadMoreRows: PropTypes.func.isRequired,
-    /** Number of rows in list; can be arbitrary high number if actual number is unknown. */
+    /**
+     * Number of rows in list; can be arbitrary high number if actual number is unknown.
+     */
     rowsCount: PropTypes.number,
     /**
      * Threshold at which to pre-fetch data.
@@ -45,7 +49,7 @@ export default class InfiniteLoader extends Component {
   }
 
   static defaultProps = {
-    threshold: 10
+    threshold: 15
   }
 
   constructor (props) {
@@ -61,7 +65,8 @@ export default class InfiniteLoader extends Component {
     child = React.cloneElement(
       child,
       {
-        onRowsRendered: this._onRowsRendered
+        onRowsRendered: this._onRowsRendered,
+        ref: 'VirtualScroll'
       }
     )
 
@@ -71,13 +76,29 @@ export default class InfiniteLoader extends Component {
   _onRowsRendered ({ startIndex, stopIndex }) {
     const { isRowLoaded, loadMoreRows, rowsCount, threshold } = this.props
 
+    this._lastRenderedStartIndex = startIndex
+    this._lastRenderedStopIndex = stopIndex
+
     const unloadedRanges = scanForUnloadedRanges({
       isRowLoaded,
       startIndex: Math.max(0, startIndex - threshold),
       stopIndex: Math.min(rowsCount, stopIndex + threshold)
     })
 
-    unloadedRanges.forEach(unloadedRange => loadMoreRows(unloadedRange))
+    unloadedRanges.forEach(unloadedRange => {
+      let promise = loadMoreRows(unloadedRange)
+      if (promise) {
+        promise.then(() => {
+          // Refresh the visible rows if any of them have just been loaded
+          if (!(
+            unloadedRange.startIndex > this._lastRenderedStopIndex ||
+            unloadedRange.stopIndex < this._lastRenderedStartIndex
+          )) {
+            this.refs.VirtualScroll.forceUpdate()
+          }
+        })
+      }
+    })
   }
 }
 

source/InfiniteLoader/InfiniteLoader.test.js

@@ -69,6 +69,8 @@ describe('InfiniteLoader', () => {
     renderOrUpdateComponent()
     expect(loadMoreRowsCalls).toEqual([{ startIndex: 0, stopIndex: 14 }])
   })
+
+  // TODO Check to ensure that forceUpdate is called if and only if rows are visible
 })
 
 describe('scanForUnloadedRanges', () => {

source/VirtualScroll/VirtualScroll.example.js

@@ -1,13 +1,18 @@
 /**
  * @flow
  */
-import React, { Component } from 'react'
+import Immutable from 'immutable'
+import React, { Component, PropTypes } from 'react'
+import styles from './VirtualScroll.example.css'
+import VirtualScroll from './VirtualScroll'
 import { ContentBox, ContentBoxHeader, ContentBoxParagraph } from '../demo/ContentBox'
 import { LabeledInput, InputRow } from '../demo/LabeledInput'
-import VirtualScroll from './VirtualScroll'
-import styles from './VirtualScroll.example.css'
 
 export default class VirtualScrollExample extends Component {
+  static propTypes = {
+    list: PropTypes.instanceOf(Immutable.List).isRequired
+  }
+
   constructor (props) {
     super(props)
 
@@ -143,13 +148,13 @@ export default class VirtualScrollExample extends Component {
 
     const datum = list.get(index)
     const height = useDynamicRowHeight
-      ? datum.height
+      ? datum.size
       : virtualScrollRowHeight
 
     let additionalContent
 
     if (useDynamicRowHeight) {
-      switch (datum.height) {
+      switch (datum.size) {
         case 75:
           additionalContent = <div>It is medium-sized.</div>
           break
@@ -184,7 +189,7 @@ export default class VirtualScrollExample extends Component {
         </div>
         {useDynamicRowHeight &&
           <span className={styles.height}>
-            {datum.height}px
+            {datum.size}px
           </span>
         }
       </div>

source/demo/Application.js

@@ -57,7 +57,10 @@ render((
           className={styles.column}
           list={list}
         />
-        <AutoSizerExample className={styles.column}/>
+        <AutoSizerExample
+          className={styles.column}
+          list={list}
+        />
         <InfiniteLoaderExample
           className={styles.column}
           list={list}

source/demo/utils.js

@@ -7,10 +7,10 @@ export function generateRandomList () {
   for (var i = 0; i < 1000; i++) {
     list.push({
       color: BADGE_COLORS[i % BADGE_COLORS.length],
-      height: ROW_HEIGHTS[Math.floor(Math.random() * ROW_HEIGHTS.length)],
       index: i,
       name: NAMES[i % NAMES.length],
-      random: loremIpsum[i % loremIpsum.length]
+      random: loremIpsum[i % loremIpsum.length],
+      size: ROW_HEIGHTS[Math.floor(Math.random() * ROW_HEIGHTS.length)]
     })
   }