Skip to content

Commit d95e4cc

Browse files
nadbmnadbm
committed
Remove componentWillReceiveProps method
1 parent c288f85 commit d95e4cc

File tree

6 files changed

+108
-87
lines changed

6 files changed

+108
-87
lines changed

‎lib/DataCell.js‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -84,29 +84,31 @@ var DataCell = function (_PureComponent) {
8484
_this.handleContextMenu = _this.handleContextMenu.bind(_this);
8585
_this.handleDoubleClick = _this.handleDoubleClick.bind(_this);
8686

87-
_this.state = { updated: false, reverting: false, value: '', committing: false };
87+
_this.state = {
88+
updated: false,
89+
reverting: false,
90+
value: '',
91+
committing: false
92+
};
8893
return _this;
8994
}
9095

9196
_createClass(DataCell, [{
92-
key: 'componentWillReceiveProps',
93-
value: function componentWillReceiveProps(nextProps) {
97+
key: 'componentDidUpdate',
98+
value: function componentDidUpdate(prevProps) {
9499
var _this2 = this;
95100

96-
if (initialValue(nextProps) !== initialValue(this.props)) {
101+
if (initialValue(prevProps) !== initialValue(this.props)) {
97102
this.setState({ updated: true });
98103
this.timeout = setTimeout(function () {
99104
return _this2.setState({ updated: false });
100105
}, 700);
101106
}
102-
if (nextProps.editing === true && this.props.editing === false) {
103-
var value = nextProps.clearing ? '' : initialData(nextProps);
107+
if (this.props.editing === true && prevProps.editing === false) {
108+
var value = this.props.clearing ? '' : initialData(this.props);
104109
this.setState({ value: value, reverting: false });
105110
}
106-
}
107-
}, {
108-
key: 'componentDidUpdate',
109-
value: function componentDidUpdate(prevProps) {
111+
110112
if (prevProps.editing === true && this.props.editing === false && !this.state.reverting && !this.state.committing && this.state.value !== initialData(this.props)) {
111113
this.props.onChange(this.props.row, this.props.col, this.state.value);
112114
}

‎lib/helpers.js‎

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎package-lock.json‎

Lines changed: 11 additions & 11 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-datasheet",
3-
"version": "1.3.14",
3+
"version": "1.4.0",
44
"description": "Excel-like data grid for React",
55
"repository": {
66
"type": "git",
@@ -61,9 +61,9 @@
6161
"watch": "^1.0.2"
6262
},
6363
"peerDependencies": {
64-
"react": ">=15.3.0",
65-
"react-dom": ">=15.3.0",
66-
"prop-types": "^15.5.9"
64+
"react": ">=16",
65+
"react-dom": ">=16",
66+
"prop-types": ">=16"
6767
},
6868
"dependencies": {},
6969
"files": [

‎src/DataCell.js‎

Lines changed: 68 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,27 @@
11
import React, { PureComponent } from 'react'
22
import PropTypes from 'prop-types'
33

4-
import {ENTER_KEY, ESCAPE_KEY, TAB_KEY, RIGHT_KEY, LEFT_KEY, UP_KEY, DOWN_KEY} from './keys'
4+
import {
5+
ENTER_KEY,
6+
ESCAPE_KEY,
7+
TAB_KEY,
8+
RIGHT_KEY,
9+
LEFT_KEY,
10+
UP_KEY,
11+
DOWN_KEY
12+
} from './keys'
513

614
import Cell from './Cell'
715
import CellShape from './CellShape'
816
import DataEditor from './DataEditor'
917
import ValueViewer from './ValueViewer'
1018
import { renderValue, renderData } from './renderHelpers'
1119

12-
function initialData ({cell, row, col, valueRenderer, dataRenderer}) {
20+
function initialData ({ cell, row, col, valueRenderer, dataRenderer }) {
1321
return renderData(cell, row, col, valueRenderer, dataRenderer)
1422
}
1523

16-
function initialValue ({cell, row, col, valueRenderer}) {
24+
function initialValue ({ cell, row, col, valueRenderer }) {
1725
return renderValue(cell, row, col, valueRenderer)
1826
}
1927

@@ -35,26 +43,31 @@ export default class DataCell extends PureComponent {
3543
this.handleContextMenu = this.handleContextMenu.bind(this)
3644
this.handleDoubleClick = this.handleDoubleClick.bind(this)
3745

38-
this.state = {updated: false, reverting: false, value: '', committing: false}
46+
this.state = {
47+
updated: false,
48+
reverting: false,
49+
value: '',
50+
committing: false
51+
}
3952
}
4053

41-
componentWillReceiveProps (nextProps) {
42-
if (initialValue(nextProps) !== initialValue(this.props)) {
43-
this.setState({updated: true})
44-
this.timeout = setTimeout(() => this.setState({updated: false}), 700)
54+
componentDidUpdate (prevProps) {
55+
if (initialValue(prevProps) !== initialValue(this.props)) {
56+
this.setState({ updated: true })
57+
this.timeout = setTimeout(() => this.setState({ updated: false }), 700)
4558
}
46-
if (nextProps.editing === true && this.props.editing === false) {
47-
const value = nextProps.clearing ? '' : initialData(nextProps)
59+
if (this.props.editing === true && prevProps.editing === false) {
60+
const value = this.props.clearing ? '' : initialData(this.props)
4861
this.setState({ value, reverting: false })
4962
}
50-
}
5163

52-
componentDidUpdate (prevProps) {
53-
if (prevProps.editing === true &&
54-
this.props.editing === false &&
55-
!this.state.reverting &&
56-
!this.state.committing &&
57-
this.state.value !== initialData(this.props)) {
64+
if (
65+
prevProps.editing === true &&
66+
this.props.editing === false &&
67+
!this.state.reverting &&
68+
!this.state.committing &&
69+
this.state.value !== initialData(this.props)
70+
) {
5871
this.props.onChange(this.props.row, this.props.col, this.state.value)
5972
}
6073
}
@@ -68,7 +81,7 @@ export default class DataCell extends PureComponent {
6881
}
6982

7083
handleCommit (value, e) {
71-
const {onChange, onNavigate} = this.props
84+
const { onChange, onNavigate } = this.props
7285
if (value !== initialData(this.props)) {
7386
this.setState({ value, committing: true })
7487
onChange(this.props.row, this.props.col, value)
@@ -82,33 +95,33 @@ export default class DataCell extends PureComponent {
8295
}
8396

8497
handleRevert () {
85-
this.setState({reverting: true})
98+
this.setState({ reverting: true })
8699
this.props.onRevert()
87100
}
88101

89102
handleMouseDown (e) {
90-
const {row, col, onMouseDown, cell} = this.props
103+
const { row, col, onMouseDown, cell } = this.props
91104
if (!cell.disableEvents) {
92105
onMouseDown(row, col, e)
93106
}
94107
}
95108

96109
handleMouseOver (e) {
97-
const {row, col, onMouseOver, cell} = this.props
110+
const { row, col, onMouseOver, cell } = this.props
98111
if (!cell.disableEvents) {
99112
onMouseOver(row, col)
100113
}
101114
}
102115

103116
handleDoubleClick (e) {
104-
const {row, col, onDoubleClick, cell} = this.props
117+
const { row, col, onDoubleClick, cell } = this.props
105118
if (!cell.disableEvents) {
106119
onDoubleClick(row, col)
107120
}
108121
}
109122

110123
handleContextMenu (e) {
111-
const {row, col, onContextMenu, cell} = this.props
124+
const { row, col, onContextMenu, cell } = this.props
112125
if (!cell.disableEvents) {
113126
onContextMenu(e, row, col)
114127
}
@@ -119,9 +132,14 @@ export default class DataCell extends PureComponent {
119132
if (keyCode === ESCAPE_KEY) {
120133
return this.handleRevert()
121134
}
122-
const {cell: {component}, forceEdit} = this.props
135+
const {
136+
cell: { component },
137+
forceEdit
138+
} = this.props
123139
const eatKeys = forceEdit || !!component
124-
const commit = keyCode === ENTER_KEY || keyCode === TAB_KEY ||
140+
const commit =
141+
keyCode === ENTER_KEY ||
142+
keyCode === TAB_KEY ||
125143
(!eatKeys && [LEFT_KEY, RIGHT_KEY, UP_KEY, DOWN_KEY].includes(keyCode))
126144

127145
if (commit) {
@@ -130,7 +148,7 @@ export default class DataCell extends PureComponent {
130148
}
131149

132150
renderComponent (editing, cell) {
133-
const {component, readOnly, forceComponent} = cell
151+
const { component, readOnly, forceComponent } = cell
134152
if ((editing && !readOnly) || forceComponent) {
135153
return component
136154
}
@@ -161,23 +179,37 @@ export default class DataCell extends PureComponent {
161179
}
162180

163181
render () {
164-
const {row, col, cell, cellRenderer: CellRenderer,
165-
valueRenderer, dataEditor, valueViewer, attributesRenderer,
166-
selected, editing, onKeyUp} = this.props
167-
const {updated} = this.state
182+
const {
183+
row,
184+
col,
185+
cell,
186+
cellRenderer: CellRenderer,
187+
valueRenderer,
188+
dataEditor,
189+
valueViewer,
190+
attributesRenderer,
191+
selected,
192+
editing,
193+
onKeyUp
194+
} = this.props
195+
const { updated } = this.state
168196

169-
const content = this.renderComponent(editing, cell) ||
170-
this.renderEditor(editing, cell, row, col, dataEditor) ||
171-
this.renderViewer(cell, row, col, valueRenderer, valueViewer)
197+
const content =
198+
this.renderComponent(editing, cell) ||
199+
this.renderEditor(editing, cell, row, col, dataEditor) ||
200+
this.renderViewer(cell, row, col, valueRenderer, valueViewer)
172201

173202
const className = [
174203
cell.className,
175-
'cell', cell.overflow,
204+
'cell',
205+
cell.overflow,
176206
selected && 'selected',
177207
editing && 'editing',
178208
cell.readOnly && 'read-only',
179209
updated && 'updated'
180-
].filter(a => a).join(' ')
210+
]
211+
.filter(a => a)
212+
.join(' ')
181213

182214
return (
183215
<CellRenderer
@@ -195,7 +227,7 @@ export default class DataCell extends PureComponent {
195227
onDoubleClick={this.handleDoubleClick}
196228
onContextMenu={this.handleContextMenu}
197229
onKeyUp={onKeyUp}
198-
>
230+
>
199231
{content}
200232
</CellRenderer>
201233
)

‎test/Datasheet.js‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -113,12 +113,12 @@ describe('Component', () => {
113113
<span className='value-viewer'>5</span>
114114
</td>).html())
115115

116-
wrapper.setProps({ editing: true, selected: true })
117-
118-
expect(wrapper.html()).toEqual(
119-
shallow(<td className='cell selected editing'>
120-
<input className='data-editor' value='5' />
121-
</td>).html())
116+
wrapper.setProps({ editing: true, selected: true }, () => {
117+
expect(wrapper.html()).toEqual(
118+
shallow(<td className='cell selected editing'>
119+
<input className='data-editor' value='5' />
120+
</td>).html())
121+
})
122122
})
123123

124124
it('should properly render a flash when value changes', () => {
@@ -142,11 +142,13 @@ describe('Component', () => {
142142
{...props}
143143
/>
144144
)
145-
wrapper.setProps({ cell: { value: 6, data: 6 }})
146-
expect(wrapper.html()).toEqual(
147-
shallow(<td className='cell updated'>
148-
<span className='value-viewer'>6</span>
149-
</td>).html())
145+
wrapper.setProps({ cell: { value: 6, data: 6 }}, () => {
146+
expect(wrapper.html()).toEqual(
147+
shallow(<td className='cell updated'>
148+
<span className='value-viewer'>6</span>
149+
</td>).html())
150+
})
151+
150152
})
151153
})
152154

0 commit comments

Comments
 (0)