Skip to content

Commit be0ff35

Browse files
bvaughnbvaughn
committed
Refactored demo application to use react-router.
1 parent b6b95e6 commit be0ff35

19 files changed

+199
-214
lines changed

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,8 @@
138138
"babel-runtime": "^6.11.6",
139139
"classnames": "^2.2.3",
140140
"dom-helpers": "^2.4.0",
141-
"raf": "^3.1.0"
141+
"raf": "^3.1.0",
142+
"react-router": "^4.0.0-2"
142143
},
143144
"peerDependencies": {
144145
"react": "^0.14.0 || ^15.0.0",

‎source/ArrowKeyStepper/ArrowKeyStepper.example.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export default class ArrowKeyStepperExample extends Component {
1919

2020
render () {
2121
return (
22-
<ContentBox {...this.props}>
22+
<ContentBox>
2323
<ContentBoxHeader
2424
text='ArrowKeyStepper'
2525
sourceLink='https://github.com/bvaughn/react-virtualized/blob/master/source/ArrowKeyStepper/ArrowKeyStepper.example.js'

‎source/AutoSizer/AutoSizer.example.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import shallowCompare from 'react-addons-shallow-compare'
88
import styles from './AutoSizer.example.css'
99

1010
export default class AutoSizerExample extends Component {
11-
static propTypes = {
11+
static contextTypes = {
1212
list: PropTypes.instanceOf(Immutable.List).isRequired
1313
}
1414

@@ -23,12 +23,12 @@ export default class AutoSizerExample extends Component {
2323
}
2424

2525
render () {
26+
const { list } = this.context
2627
const { hideDescription } = this.state
27-
const { list, ...props } = this.props
2828

2929
return (
3030
<ContentBox
31-
{...props}
31+
{...this.props}
3232
style={{
3333
height: 400
3434
}}
@@ -83,7 +83,7 @@ export default class AutoSizerExample extends Component {
8383
}
8484

8585
_rowRenderer ({ index, key, style }) {
86-
const { list } = this.props
86+
const { list } = this.context
8787
const row = list.get(index)
8888

8989
return (

‎source/CellMeasurer/CellMeasurer.example.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const ROW_COUNT = 50
1616
const ROW_HEIGHT = 35
1717

1818
export default class CellMeasurerExample extends Component {
19-
static propTypes = {
19+
static contextTypes = {
2020
list: PropTypes.instanceOf(Immutable.List).isRequired
2121
}
2222

@@ -34,7 +34,7 @@ export default class CellMeasurerExample extends Component {
3434

3535
render () {
3636
return (
37-
<ContentBox {...this.props}>
37+
<ContentBox>
3838
<ContentBoxHeader
3939
text='CellMeasurer'
4040
sourceLink='https://github.com/bvaughn/react-virtualized/blob/master/source/CellMeasurer/CellMeasurer.example.js'
@@ -164,7 +164,7 @@ export default class CellMeasurerExample extends Component {
164164
}
165165

166166
_getDatum (index) {
167-
const { list } = this.props
167+
const { list } = this.context
168168

169169
return list.get(index % list.size)
170170
}

‎source/Collection/Collection.example.js

+7-7
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,16 @@ const GUTTER_SIZE = 3
1414
const CELL_WIDTH = 75
1515

1616
export default class CollectionExample extends Component {
17-
static propTypes = {
17+
static contextTypes = {
1818
list: PropTypes.instanceOf(Immutable.List).isRequired
19-
}
19+
};
2020

2121
constructor (props, context) {
2222
super(props, context)
2323

2424
this.state = {
25-
cellCount: props.list.size,
26-
columnCount: this._getColumnCount(props.list.size),
25+
cellCount: context.list.size,
26+
columnCount: this._getColumnCount(context.list.size),
2727
height: 300,
2828
horizontalOverscanSize: 0,
2929
scrollToCell: undefined,
@@ -47,7 +47,7 @@ export default class CollectionExample extends Component {
4747
const { cellCount, height, horizontalOverscanSize, scrollToCell, showScrollingPlaceholder, verticalOverscanSize } = this.state
4848

4949
return (
50-
<ContentBox {...this.props}>
50+
<ContentBox>
5151
<ContentBoxHeader
5252
text='Collection'
5353
sourceLink='https://github.com/bvaughn/react-virtualized/blob/master/source/Collection/Collection.example.js'
@@ -131,7 +131,7 @@ export default class CollectionExample extends Component {
131131
}
132132

133133
_cellRenderer ({ index, isScrolling, key, style }) {
134-
const { list } = this.props
134+
const { list } = this.context
135135
const { showScrollingPlaceholder } = this.state
136136

137137
const datum = list.get(index % list.size)
@@ -151,7 +151,7 @@ export default class CollectionExample extends Component {
151151
}
152152

153153
_cellSizeAndPositionGetter ({ index }) {
154-
const { list } = this.props
154+
const { list } = this.context
155155
const { columnCount } = this.state
156156

157157
const columnPosition = index % (columnCount || 1)

‎source/ColumnSizer/ColumnSizer.example.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export default class ColumnSizerExample extends Component {
3535
} = this.state
3636

3737
return (
38-
<ContentBox {...this.props}>
38+
<ContentBox>
3939
<ContentBoxHeader
4040
text='ColumnSizer'
4141
sourceLink='https://github.com/bvaughn/react-virtualized/blob/master/source/ColumnSizer/ColumnSizer.example.js'

‎source/Grid/Grid.example.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@ import cn from 'classnames'
1010
import styles from './Grid.example.css'
1111

1212
export default class GridExample extends Component {
13-
static propTypes = {
13+
static contextTypes = {
1414
list: PropTypes.instanceOf(Immutable.List).isRequired
15-
}
15+
};
1616

1717
constructor (props, context) {
1818
super(props, context)
@@ -57,7 +57,7 @@ export default class GridExample extends Component {
5757
} = this.state
5858

5959
return (
60-
<ContentBox {...this.props}>
60+
<ContentBox>
6161
<ContentBoxHeader
6262
text='Grid'
6363
sourceLink='https://github.com/bvaughn/react-virtualized/blob/master/source/Grid/Grid.example.js'
@@ -185,7 +185,7 @@ export default class GridExample extends Component {
185185
}
186186

187187
_getDatum (index) {
188-
const { list } = this.props
188+
const { list } = this.context
189189

190190
return list.get(index % list.size)
191191
}

‎source/InfiniteLoader/InfiniteLoader.example.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const STATUS_LOADING = 1
1212
const STATUS_LOADED = 2
1313

1414
export default class InfiniteLoaderExample extends Component {
15-
static propTypes = {
15+
static contextTypes = {
1616
list: PropTypes.instanceOf(Immutable.List).isRequired
1717
}
1818

@@ -41,11 +41,11 @@ export default class InfiniteLoaderExample extends Component {
4141
}
4242

4343
render () {
44-
const { list, ...props } = this.props
44+
const { list } = this.context
4545
const { loadedRowCount, loadingRowCount, randomScrollToIndex } = this.state
4646

4747
return (
48-
<ContentBox {...props}>
48+
<ContentBox>
4949
<ContentBoxHeader
5050
text='InfiniteLoader'
5151
sourceLink='https://github.com/bvaughn/react-virtualized/blob/master/source/InfiniteLoader/InfiniteLoader.example.js'
@@ -155,7 +155,7 @@ export default class InfiniteLoaderExample extends Component {
155155
}
156156

157157
_rowRenderer ({ index, key, style }) {
158-
const { list } = this.props
158+
const { list } = this.context
159159
const { loadedRowsMap } = this.state
160160

161161
const row = list.get(index)

‎source/List/List.example.js

+7-7
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,16 @@ import { LabeledInput, InputRow } from '../demo/LabeledInput'
1212
import shallowCompare from 'react-addons-shallow-compare'
1313

1414
export default class ListExample extends Component {
15-
static propTypes = {
15+
static contextTypes = {
1616
list: PropTypes.instanceOf(Immutable.List).isRequired
17-
}
17+
};
1818

19-
constructor (props) {
20-
super(props)
19+
constructor (props, context) {
20+
super(props, context)
2121

2222
this.state = {
2323
overscanRowCount: 10,
24-
rowCount: props.list.size,
24+
rowCount: context.list.size,
2525
scrollToIndex: undefined,
2626
showScrollingPlaceholder: false,
2727
useDynamicRowHeight: false,
@@ -48,7 +48,7 @@ export default class ListExample extends Component {
4848
} = this.state
4949

5050
return (
51-
<ContentBox {...this.props}>
51+
<ContentBox>
5252
<ContentBoxHeader
5353
text='List'
5454
sourceLink='https://github.com/bvaughn/react-virtualized/blob/master/source/List/List.example.js'
@@ -146,7 +146,7 @@ export default class ListExample extends Component {
146146
}
147147

148148
_getDatum (index) {
149-
const { list } = this.props
149+
const { list } = this.context
150150

151151
return list.get(index % list.size)
152152
}

‎source/ScrollSync/ScrollSync.example.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export default class GridExample extends Component {
4545
} = this.state
4646

4747
return (
48-
<ContentBox {...this.props}>
48+
<ContentBox>
4949
<ContentBoxHeader
5050
text='ScrollSync'
5151
sourceLink='https://github.com/bvaughn/react-virtualized/blob/master/source/ScrollSync/ScrollSync.example.js'

‎source/Table/Table.example.js

+6-6
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@ import shallowCompare from 'react-addons-shallow-compare'
1212
import styles from './Table.example.css'
1313

1414
export default class TableExample extends Component {
15-
static propTypes = {
15+
static contextTypes = {
1616
list: PropTypes.instanceOf(Immutable.List).isRequired
17-
}
17+
};
1818

1919
constructor (props, context) {
2020
super(props, context)
@@ -57,7 +57,7 @@ export default class TableExample extends Component {
5757
useDynamicRowHeight
5858
} = this.state
5959

60-
const { list, ...props } = this.props
60+
const { list } = this.context
6161
const sortedList = this._isSortEnabled()
6262
? list
6363
.sortBy(item => item[sortBy])
@@ -71,7 +71,7 @@ export default class TableExample extends Component {
7171
const rowGetter = ({ index }) => this._getDatum(sortedList, index)
7272

7373
return (
74-
<ContentBox {...props}>
74+
<ContentBox>
7575
<ContentBoxHeader
7676
text='Table'
7777
sourceLink='https://github.com/bvaughn/react-virtualized/blob/master/source/Table/Table.example.js'
@@ -227,7 +227,7 @@ export default class TableExample extends Component {
227227
}
228228

229229
_getRowHeight ({ index }) {
230-
const { list } = this.props
230+
const { list } = this.context
231231

232232
return this._getDatum(list, index).size
233233
}
@@ -251,7 +251,7 @@ export default class TableExample extends Component {
251251
}
252252

253253
_isSortEnabled () {
254-
const { list } = this.props
254+
const { list } = this.context
255255
const { rowCount } = this.state
256256

257257
return rowCount <= list.size

‎source/WindowScroller/WindowScroller.example.js

+4-6
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import shallowCompare from 'react-addons-shallow-compare'
1010
import styles from './WindowScroller.example.css'
1111

1212
export default class AutoSizerExample extends Component {
13-
static propTypes = {
13+
static contextTypes = {
1414
list: PropTypes.instanceOf(Immutable.List).isRequired
1515
}
1616

@@ -21,12 +21,10 @@ export default class AutoSizerExample extends Component {
2121
}
2222

2323
render () {
24-
const { list, ...props } = this.props
24+
const { list } = this.context
2525

2626
return (
27-
<ContentBox
28-
{...props}
29-
>
27+
<ContentBox>
3028
<ContentBoxHeader
3129
text='WindowScroller'
3230
sourceLink='https://github.com/bvaughn/react-virtualized/blob/master/source/WindowScroller/WindowScroller.example.js'
@@ -67,7 +65,7 @@ export default class AutoSizerExample extends Component {
6765
}
6866

6967
_rowRenderer ({ index, isScrolling, key, style }) {
70-
const { list } = this.props
68+
const { list } = this.context
7169
const row = list.get(index)
7270
const className = cn(styles.row, {
7371
[styles.rowScrolling]: isScrolling

0 commit comments

Comments
 (0)