Refactored demo application to use react-router.

Author: bvaughn

package.json

@@ -138,7 +138,8 @@
     "babel-runtime": "^6.11.6",
     "classnames": "^2.2.3",
     "dom-helpers": "^2.4.0",
-    "raf": "^3.1.0"
+    "raf": "^3.1.0",
+    "react-router": "^4.0.0-2"
   },
   "peerDependencies": {
     "react": "^0.14.0 || ^15.0.0",

source/ArrowKeyStepper/ArrowKeyStepper.example.js

@@ -19,7 +19,7 @@ export default class ArrowKeyStepperExample extends Component {
 
   render () {
     return (
-      <ContentBox {...this.props}>
+      <ContentBox>
         <ContentBoxHeader
           text='ArrowKeyStepper'
           sourceLink='https://github.com/bvaughn/react-virtualized/blob/master/source/ArrowKeyStepper/ArrowKeyStepper.example.js'

source/AutoSizer/AutoSizer.example.js

@@ -8,7 +8,7 @@ import shallowCompare from 'react-addons-shallow-compare'
 import styles from './AutoSizer.example.css'
 
 export default class AutoSizerExample extends Component {
-  static propTypes = {
+  static contextTypes = {
     list: PropTypes.instanceOf(Immutable.List).isRequired
   }
 
@@ -23,12 +23,12 @@ export default class AutoSizerExample extends Component {
   }
 
   render () {
+    const { list } = this.context
     const { hideDescription } = this.state
-    const { list, ...props } = this.props
 
     return (
       <ContentBox
-        {...props}
+        {...this.props}
         style={{
           height: 400
         }}
@@ -83,7 +83,7 @@ export default class AutoSizerExample extends Component {
   }
 
   _rowRenderer ({ index, key, style }) {
-    const { list } = this.props
+    const { list } = this.context
     const row = list.get(index)
 
     return (

source/CellMeasurer/CellMeasurer.example.js

@@ -16,7 +16,7 @@ const ROW_COUNT = 50
 const ROW_HEIGHT = 35
 
 export default class CellMeasurerExample extends Component {
-  static propTypes = {
+  static contextTypes = {
     list: PropTypes.instanceOf(Immutable.List).isRequired
   }
 
@@ -34,7 +34,7 @@ export default class CellMeasurerExample extends Component {
 
   render () {
     return (
-      <ContentBox {...this.props}>
+      <ContentBox>
         <ContentBoxHeader
           text='CellMeasurer'
           sourceLink='https://github.com/bvaughn/react-virtualized/blob/master/source/CellMeasurer/CellMeasurer.example.js'
@@ -164,7 +164,7 @@ export default class CellMeasurerExample extends Component {
   }
 
   _getDatum (index) {
-    const { list } = this.props
+    const { list } = this.context
 
     return list.get(index % list.size)
   }

source/Collection/Collection.example.js

@@ -14,16 +14,16 @@ const GUTTER_SIZE = 3
 const CELL_WIDTH = 75
 
 export default class CollectionExample extends Component {
-  static propTypes = {
+  static contextTypes = {
     list: PropTypes.instanceOf(Immutable.List).isRequired
-  }
+  };
 
   constructor (props, context) {
     super(props, context)
 
     this.state = {
-      cellCount: props.list.size,
-      columnCount: this._getColumnCount(props.list.size),
+      cellCount: context.list.size,
+      columnCount: this._getColumnCount(context.list.size),
       height: 300,
       horizontalOverscanSize: 0,
       scrollToCell: undefined,
@@ -47,7 +47,7 @@ export default class CollectionExample extends Component {
     const { cellCount, height, horizontalOverscanSize, scrollToCell, showScrollingPlaceholder, verticalOverscanSize } = this.state
 
     return (
-      <ContentBox {...this.props}>
+      <ContentBox>
         <ContentBoxHeader
           text='Collection'
           sourceLink='https://github.com/bvaughn/react-virtualized/blob/master/source/Collection/Collection.example.js'
@@ -131,7 +131,7 @@ export default class CollectionExample extends Component {
   }
 
   _cellRenderer ({ index, isScrolling, key, style }) {
-    const { list } = this.props
+    const { list } = this.context
     const { showScrollingPlaceholder } = this.state
 
     const datum = list.get(index % list.size)
@@ -151,7 +151,7 @@ export default class CollectionExample extends Component {
   }
 
   _cellSizeAndPositionGetter ({ index }) {
-    const { list } = this.props
+    const { list } = this.context
     const { columnCount } = this.state
 
     const columnPosition = index % (columnCount || 1)

source/ColumnSizer/ColumnSizer.example.js

@@ -35,7 +35,7 @@ export default class ColumnSizerExample extends Component {
     } = this.state
 
     return (
-      <ContentBox {...this.props}>
+      <ContentBox>
         <ContentBoxHeader
           text='ColumnSizer'
           sourceLink='https://github.com/bvaughn/react-virtualized/blob/master/source/ColumnSizer/ColumnSizer.example.js'

source/Grid/Grid.example.js

@@ -10,9 +10,9 @@ import cn from 'classnames'
 import styles from './Grid.example.css'
 
 export default class GridExample extends Component {
-  static propTypes = {
+  static contextTypes = {
     list: PropTypes.instanceOf(Immutable.List).isRequired
-  }
+  };
 
   constructor (props, context) {
     super(props, context)
@@ -57,7 +57,7 @@ export default class GridExample extends Component {
     } = this.state
 
     return (
-      <ContentBox {...this.props}>
+      <ContentBox>
         <ContentBoxHeader
           text='Grid'
           sourceLink='https://github.com/bvaughn/react-virtualized/blob/master/source/Grid/Grid.example.js'
@@ -185,7 +185,7 @@ export default class GridExample extends Component {
   }
 
   _getDatum (index) {
-    const { list } = this.props
+    const { list } = this.context
 
     return list.get(index % list.size)
   }

source/InfiniteLoader/InfiniteLoader.example.js

@@ -12,7 +12,7 @@ const STATUS_LOADING = 1
 const STATUS_LOADED = 2
 
 export default class InfiniteLoaderExample extends Component {
-  static propTypes = {
+  static contextTypes = {
     list: PropTypes.instanceOf(Immutable.List).isRequired
   }
 
@@ -41,11 +41,11 @@ export default class InfiniteLoaderExample extends Component {
   }
 
   render () {
-    const { list, ...props } = this.props
+    const { list } = this.context
     const { loadedRowCount, loadingRowCount, randomScrollToIndex } = this.state
 
     return (
-      <ContentBox {...props}>
+      <ContentBox>
         <ContentBoxHeader
           text='InfiniteLoader'
           sourceLink='https://github.com/bvaughn/react-virtualized/blob/master/source/InfiniteLoader/InfiniteLoader.example.js'
@@ -155,7 +155,7 @@ export default class InfiniteLoaderExample extends Component {
   }
 
   _rowRenderer ({ index, key, style }) {
-    const { list } = this.props
+    const { list } = this.context
     const { loadedRowsMap } = this.state
 
     const row = list.get(index)

source/List/List.example.js

@@ -12,16 +12,16 @@ import { LabeledInput, InputRow } from '../demo/LabeledInput'
 import shallowCompare from 'react-addons-shallow-compare'
 
 export default class ListExample extends Component {
-  static propTypes = {
+  static contextTypes = {
     list: PropTypes.instanceOf(Immutable.List).isRequired
-  }
+  };
 
-  constructor (props) {
-    super(props)
+  constructor (props, context) {
+    super(props, context)
 
     this.state = {
       overscanRowCount: 10,
-      rowCount: props.list.size,
+      rowCount: context.list.size,
       scrollToIndex: undefined,
       showScrollingPlaceholder: false,
       useDynamicRowHeight: false,
@@ -48,7 +48,7 @@ export default class ListExample extends Component {
     } = this.state
 
     return (
-      <ContentBox {...this.props}>
+      <ContentBox>
         <ContentBoxHeader
           text='List'
           sourceLink='https://github.com/bvaughn/react-virtualized/blob/master/source/List/List.example.js'
@@ -146,7 +146,7 @@ export default class ListExample extends Component {
   }
 
   _getDatum (index) {
-    const { list } = this.props
+    const { list } = this.context
 
     return list.get(index % list.size)
   }

source/ScrollSync/ScrollSync.example.js

@@ -45,7 +45,7 @@ export default class GridExample extends Component {
     } = this.state
 
     return (
-      <ContentBox {...this.props}>
+      <ContentBox>
         <ContentBoxHeader
           text='ScrollSync'
           sourceLink='https://github.com/bvaughn/react-virtualized/blob/master/source/ScrollSync/ScrollSync.example.js'

source/Table/Table.example.js

@@ -12,9 +12,9 @@ import shallowCompare from 'react-addons-shallow-compare'
 import styles from './Table.example.css'
 
 export default class TableExample extends Component {
-  static propTypes = {
+  static contextTypes = {
     list: PropTypes.instanceOf(Immutable.List).isRequired
-  }
+  };
 
   constructor (props, context) {
     super(props, context)
@@ -57,7 +57,7 @@ export default class TableExample extends Component {
       useDynamicRowHeight
     } = this.state
 
-    const { list, ...props } = this.props
+    const { list } = this.context
     const sortedList = this._isSortEnabled()
       ? list
         .sortBy(item => item[sortBy])
@@ -71,7 +71,7 @@ export default class TableExample extends Component {
     const rowGetter = ({ index }) => this._getDatum(sortedList, index)
 
     return (
-      <ContentBox {...props}>
+      <ContentBox>
         <ContentBoxHeader
           text='Table'
           sourceLink='https://github.com/bvaughn/react-virtualized/blob/master/source/Table/Table.example.js'
@@ -227,7 +227,7 @@ export default class TableExample extends Component {
   }
 
   _getRowHeight ({ index }) {
-    const { list } = this.props
+    const { list } = this.context
 
     return this._getDatum(list, index).size
   }
@@ -251,7 +251,7 @@ export default class TableExample extends Component {
   }
 
   _isSortEnabled () {
-    const { list } = this.props
+    const { list } = this.context
     const { rowCount } = this.state
 
     return rowCount <= list.size

source/WindowScroller/WindowScroller.example.js

@@ -10,7 +10,7 @@ import shallowCompare from 'react-addons-shallow-compare'
 import styles from './WindowScroller.example.css'
 
 export default class AutoSizerExample extends Component {
-  static propTypes = {
+  static contextTypes = {
     list: PropTypes.instanceOf(Immutable.List).isRequired
   }
 
@@ -21,12 +21,10 @@ export default class AutoSizerExample extends Component {
   }
 
   render () {
-    const { list, ...props } = this.props
+    const { list } = this.context
 
     return (
-      <ContentBox
-        {...props}
-      >
+      <ContentBox>
         <ContentBoxHeader
           text='WindowScroller'
           sourceLink='https://github.com/bvaughn/react-virtualized/blob/master/source/WindowScroller/WindowScroller.example.js'
@@ -67,7 +65,7 @@ export default class AutoSizerExample extends Component {
   }
 
   _rowRenderer ({ index, isScrolling, key, style }) {
-    const { list } = this.props
+    const { list } = this.context
     const row = list.get(index)
     const className = cn(styles.row, {
       [styles.rowScrolling]: isScrolling