Skip to content

Commit 42b5f5b

Browse files
tannerlinsleytannerlinsley
committed
Convert to use es6 classes for react 15.5.x compat
1 parent 5ec616c commit 42b5f5b

File tree

4 files changed

+105
-73
lines changed

4 files changed

+105
-73
lines changed

‎src/index.js

Lines changed: 43 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,46 @@
1-
import React from 'react'
1+
import React, { Component } from 'react'
22
import classnames from 'classnames'
33
//
44
import _ from './utils'
5-
import lifecycle from './lifecycle'
6-
import methods from './methods'
7-
import defaults from './defaultProps'
8-
9-
export const ReactTableDefaults = defaults
10-
11-
export default React.createClass({
12-
...lifecycle,
13-
...methods,
14-
5+
import Lifecycle from './lifecycle'
6+
import Methods from './methods'
7+
import defaultProps from './defaultProps'
8+
9+
export const ReactTableDefaults = defaultProps
10+
11+
export default class ReactTable extends Methods(Lifecycle(Component)) {
12+
static defaultProps = defaultProps
13+
constructor (props) {
14+
super()
15+
16+
this.getResolvedState = this.getResolvedState.bind(this)
17+
this.getDataModel = this.getDataModel.bind(this)
18+
this.getSortedData = this.getSortedData.bind(this)
19+
this.fireOnChange = this.fireOnChange.bind(this)
20+
this.getPropOrState = this.getPropOrState.bind(this)
21+
this.getStateOrProp = this.getStateOrProp.bind(this)
22+
this.filterData = this.filterData.bind(this)
23+
this.sortData = this.sortData.bind(this)
24+
this.getMinRows = this.getMinRows.bind(this)
25+
this.onPageChange = this.onPageChange.bind(this)
26+
this.onPageSizeChange = this.onPageSizeChange.bind(this)
27+
this.sortColumn = this.sortColumn.bind(this)
28+
this.filterColumn = this.filterColumn.bind(this)
29+
this.resizeColumnStart = this.resizeColumnStart.bind(this)
30+
this.resizeColumnEnd = this.resizeColumnEnd.bind(this)
31+
this.resizeColumnMoving = this.resizeColumnMoving.bind(this)
32+
33+
this.state = {
34+
page: 0,
35+
pageSize: props.defaultPageSize || 10,
36+
sorting: props.defaultSorting,
37+
expandedRows: {},
38+
filtering: props.defaultFiltering,
39+
resizing: props.defaultResizing,
40+
currentlyResizing: undefined,
41+
skipNextSort: false
42+
}
43+
}
1544
render () {
1645
const resolvedState = this.getResolvedState()
1746
const {
@@ -465,7 +494,7 @@ export default React.createClass({
465494
filter,
466495
onFilterChange: (value) => (this.filterColumn(column, value, col))
467496
},
468-
defaults.column.filterRender
497+
defaultProps.column.filterRender
469498
)
470499
) : null}
471500
</span>
@@ -535,7 +564,7 @@ export default React.createClass({
535564
filter,
536565
onFilterChange: (value) => (this.filterColumn(column, value))
537566
},
538-
defaults.column.filterRender
567+
defaultProps.column.filterRender
539568
)
540569
) : null}
541570
</ThComponent>
@@ -951,4 +980,4 @@ export default React.createClass({
951980
// childProps are optionally passed to a function-as-a-child
952981
return children ? children(finalState, makeTable, this) : makeTable()
953982
}
954-
})
983+
}

‎src/lifecycle.js

Lines changed: 4 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,12 @@
1-
import _ from './utils'
2-
import defaultProps from './defaultProps'
3-
4-
export default {
5-
getDefaultProps () {
6-
return defaultProps
7-
},
8-
9-
getInitialState () {
10-
return {
11-
page: 0,
12-
pageSize: this.props.defaultPageSize || 10,
13-
sorting: this.props.defaultSorting,
14-
expandedRows: {},
15-
filtering: this.props.defaultFiltering,
16-
resizing: this.props.defaultResizing,
17-
currentlyResizing: undefined,
18-
skipNextSort: false
19-
}
20-
},
21-
22-
getResolvedState (props, state) {
23-
const resolvedState = {
24-
..._.compactObject(this.state),
25-
..._.compactObject(this.props),
26-
..._.compactObject(state),
27-
..._.compactObject(props)
28-
}
29-
return resolvedState
30-
},
1+
export default Base => class extends Base {
312

323
componentWillMount () {
334
this.setStateWithData(this.getDataModel(this.getResolvedState()))
34-
},
5+
}
356

367
componentDidMount () {
378
this.fireOnChange()
38-
},
9+
}
3910

4011
componentWillReceiveProps (nextProps, nextState) {
4112
const oldState = this.getResolvedState()
@@ -61,7 +32,7 @@ export default {
6132
) {
6233
this.setStateWithData(this.getDataModel(newState))
6334
}
64-
},
35+
}
6536

6637
setStateWithData (newState, cb) {
6738
const oldState = this.getResolvedState()

‎src/methods.js

Lines changed: 36 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,15 @@
11
import _ from './utils'
22

3-
export default {
3+
export default Base => class extends Base {
4+
getResolvedState (props, state) {
5+
const resolvedState = {
6+
..._.compactObject(this.state),
7+
..._.compactObject(this.props),
8+
..._.compactObject(state),
9+
..._.compactObject(props)
10+
}
11+
return resolvedState
12+
}
413
getDataModel (newState) {
514
const {
615
columns,
@@ -220,7 +229,8 @@ export default {
220229
allDecoratedColumns,
221230
hasHeaderGroups
222231
}
223-
},
232+
}
233+
224234
getSortedData (resolvedState) {
225235
const {
226236
manual,
@@ -236,16 +246,20 @@ export default {
236246
return {
237247
sortedData: manual ? resolvedData : this.sortData(this.filterData(resolvedData, showFilters, filtering, defaultFilterMethod, allVisibleColumns), sorting)
238248
}
239-
},
249+
}
250+
240251
fireOnChange () {
241252
this.props.onChange(this.getResolvedState(), this)
242-
},
253+
}
254+
243255
getPropOrState (key) {
244256
return _.getFirstDefined(this.props[key], this.state[key])
245-
},
257+
}
258+
246259
getStateOrProp (key) {
247260
return _.getFirstDefined(this.state[key], this.props[key])
248-
},
261+
}
262+
249263
filterData (data, showFilters, filtering, defaultFilterMethod, allVisibleColumns) {
250264
let filteredData = data
251265

@@ -290,7 +304,8 @@ export default {
290304
}
291305

292306
return filteredData
293-
},
307+
}
308+
294309
sortData (data, sorting) {
295310
if (!sorting.length) {
296311
return data
@@ -314,11 +329,11 @@ export default {
314329
[this.props.subRowsKey]: this.sortData(row[this.props.subRowsKey], sorting)
315330
}
316331
})
317-
},
332+
}
318333

319334
getMinRows () {
320335
return _.getFirstDefined(this.props.minRows, this.getStateOrProp('pageSize'))
321-
},
336+
}
322337

323338
// User actions
324339
onPageChange (page) {
@@ -335,7 +350,8 @@ export default {
335350
, () => {
336351
this.fireOnChange()
337352
})
338-
},
353+
}
354+
339355
onPageSizeChange (newPageSize) {
340356
const {onPageSizeChange} = this.props
341357
const {pageSize, page} = this.getResolvedState()
@@ -354,7 +370,8 @@ export default {
354370
}, () => {
355371
this.fireOnChange()
356372
})
357-
},
373+
}
374+
358375
sortColumn (column, additive) {
359376
const {sorting, skipNextSort} = this.getResolvedState()
360377

@@ -451,7 +468,8 @@ export default {
451468
}, () => {
452469
this.fireOnChange()
453470
})
454-
},
471+
}
472+
455473
filterColumn (column, value, pivotColumn) {
456474
const {filtering} = this.getResolvedState()
457475
const {onFilteringChange} = this.props
@@ -486,7 +504,8 @@ export default {
486504
}, () => {
487505
this.fireOnChange()
488506
})
489-
},
507+
}
508+
490509
resizeColumnStart (column, event, isTouch) {
491510
const {onResize} = this.props
492511

@@ -520,7 +539,8 @@ export default {
520539
document.addEventListener('mouseleave', this.resizeColumnEnd)
521540
}
522541
})
523-
},
542+
}
543+
524544
resizeColumnEnd (event) {
525545
let isTouch = event.type === 'touchend' || event.type === 'touchcancel'
526546

@@ -544,7 +564,8 @@ export default {
544564
skipNextSort: true
545565
})
546566
}
547-
},
567+
}
568+
548569
resizeColumnMoving (event) {
549570
const {resizing, currentlyResizing} = this.getResolvedState()
550571

‎src/pagination.js

Lines changed: 22 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react'
1+
import React, { Component } from 'react'
22
import classnames from 'classnames'
33
//
44
// import _ from './utils'
@@ -7,33 +7,44 @@ const defaultButton = (props) => (
77
<button type='button' {...props} className='-btn'>{props.children}</button>
88
)
99

10-
export default React.createClass({
11-
getInitialState () {
12-
return {
13-
page: this.props.page
10+
export default class ReactTablePagination extends Component {
11+
constructor (props) {
12+
super()
13+
14+
this.getSafePage = this.getSafePage.bind(this)
15+
this.changePage = this.changePage.bind(this)
16+
this.applyPage = this.applyPage.bind(this)
17+
18+
this.state = {
19+
page: props.page
1420
}
15-
},
21+
}
22+
1623
componentWillReceiveProps (nextProps) {
1724
this.setState({page: nextProps.page})
18-
},
25+
}
26+
1927
getSafePage (page) {
2028
if (isNaN(page)) {
2129
page = this.props.page
2230
}
2331
return Math.min(Math.max(page, 0), this.props.pages - 1)
24-
},
32+
}
33+
2534
changePage (page) {
2635
page = this.getSafePage(page)
2736
this.setState({page})
2837
if (this.props.page !== page) {
2938
this.props.onPageChange(page)
3039
}
31-
},
40+
}
41+
3242
applyPage (e) {
3343
e && e.preventDefault()
3444
const page = this.state.page
3545
this.changePage(page === '' ? this.props.page : page)
36-
},
46+
}
47+
3748
render () {
3849
const {
3950
// Computed
@@ -128,4 +139,4 @@ export default React.createClass({
128139
</div>
129140
)
130141
}
131-
})
142+
}

0 commit comments

Comments
 (0)