Remove componentWillReceiveProps method

nadbm · Nov 11, 2019 · d95e4cc · d95e4cc
1 parent c288f85
commit d95e4cc
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 87 deletions.
diff --git a/lib/DataCell.js b/lib/DataCell.js
@@ -84,29 +84,31 @@ var DataCell = function (_PureComponent) {
  _this.handleContextMenu = _this.handleContextMenu.bind(_this);
  _this.handleDoubleClick = _this.handleDoubleClick.bind(_this);
 
- _this.state = { updated: false, reverting: false, value: '', committing: false };
+ _this.state = {
+ updated: false,
+ reverting: false,
+ value: '',
+ committing: false
+ };
  return _this;
  }
 
  _createClass(DataCell, [{
- key: 'componentWillReceiveProps',
- value: function componentWillReceiveProps(nextProps) {
+ key: 'componentDidUpdate',
+ value: function componentDidUpdate(prevProps) {
  var _this2 = this;
 
- if (initialValue(nextProps) !== initialValue(this.props)) {
+ if (initialValue(prevProps) !== initialValue(this.props)) {
  this.setState({ updated: true });
  this.timeout = setTimeout(function () {
  return _this2.setState({ updated: false });
  }, 700);
  }
- if (nextProps.editing === true && this.props.editing === false) {
- var value = nextProps.clearing ? '' : initialData(nextProps);
+ if (this.props.editing === true && prevProps.editing === false) {
+ var value = this.props.clearing ? '' : initialData(this.props);
  this.setState({ value: value, reverting: false });
  }
- }
- }, {
- key: 'componentDidUpdate',
- value: function componentDidUpdate(prevProps) {
+
  if (prevProps.editing === true && this.props.editing === false && !this.state.reverting && !this.state.committing && this.state.value !== initialData(this.props)) {
  this.props.onChange(this.props.row, this.props.col, this.state.value);
  }

diff --git a/lib/helpers.js b/lib/helpers.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "react-datasheet",
- "version": "1.3.14",
+ "version": "1.4.0",
  "description": "Excel-like data grid for React",
  "repository": {
  "type": "git",
@@ -61,9 +61,9 @@
  "watch": "^1.0.2"
  },
  "peerDependencies": {
- "react": ">=15.3.0",
- "react-dom": ">=15.3.0",
- "prop-types": "^15.5.9"
+ "react": ">=16",
+ "react-dom": ">=16",
+ "prop-types": ">=16"
  },
  "dependencies": {},
  "files": [

diff --git a/src/DataCell.js b/src/DataCell.js
@@ -1,19 +1,27 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 
-import {ENTER_KEY, ESCAPE_KEY, TAB_KEY, RIGHT_KEY, LEFT_KEY, UP_KEY, DOWN_KEY} from './keys'
+import {
+ ENTER_KEY,
+ ESCAPE_KEY,
+ TAB_KEY,
+ RIGHT_KEY,
+ LEFT_KEY,
+ UP_KEY,
+ DOWN_KEY
+} from './keys'
 
 import Cell from './Cell'
 import CellShape from './CellShape'
 import DataEditor from './DataEditor'
 import ValueViewer from './ValueViewer'
 import { renderValue, renderData } from './renderHelpers'
 
-function initialData ({cell, row, col, valueRenderer, dataRenderer}) {
+function initialData ({ cell, row, col, valueRenderer, dataRenderer }) {
  return renderData(cell, row, col, valueRenderer, dataRenderer)
 }
 
-function initialValue ({cell, row, col, valueRenderer}) {
+function initialValue ({ cell, row, col, valueRenderer }) {
  return renderValue(cell, row, col, valueRenderer)
 }
 
@@ -35,26 +43,31 @@ export default class DataCell extends PureComponent {
  this.handleContextMenu = this.handleContextMenu.bind(this)
  this.handleDoubleClick = this.handleDoubleClick.bind(this)
 
- this.state = {updated: false, reverting: false, value: '', committing: false}
+ this.state = {
+ updated: false,
+ reverting: false,
+ value: '',
+ committing: false
+ }
  }
 
- componentWillReceiveProps (nextProps) {
- if (initialValue(nextProps) !== initialValue(this.props)) {
- this.setState({updated: true})
- this.timeout = setTimeout(() => this.setState({updated: false}), 700)
+ componentDidUpdate (prevProps) {
+ if (initialValue(prevProps) !== initialValue(this.props)) {
+ this.setState({ updated: true })
+ this.timeout = setTimeout(() => this.setState({ updated: false }), 700)
  }
- if (nextProps.editing === true && this.props.editing === false) {
- const value = nextProps.clearing ? '' : initialData(nextProps)
+ if (this.props.editing === true && prevProps.editing === false) {
+ const value = this.props.clearing ? '' : initialData(this.props)
  this.setState({ value, reverting: false })
  }
- }
 
- componentDidUpdate (prevProps) {
- if (prevProps.editing === true &&
- this.props.editing === false &&
- !this.state.reverting &&
- !this.state.committing &&
- this.state.value !== initialData(this.props)) {
+ if (
+ prevProps.editing === true &&
+ this.props.editing === false &&
+ !this.state.reverting &&
+ !this.state.committing &&
+ this.state.value !== initialData(this.props)
+ ) {
  this.props.onChange(this.props.row, this.props.col, this.state.value)
  }
  }
@@ -68,7 +81,7 @@ export default class DataCell extends PureComponent {
  }
 
  handleCommit (value, e) {
- const {onChange, onNavigate} = this.props
+ const { onChange, onNavigate } = this.props
  if (value !== initialData(this.props)) {
  this.setState({ value, committing: true })
  onChange(this.props.row, this.props.col, value)
@@ -82,33 +95,33 @@ export default class DataCell extends PureComponent {
  }
 
  handleRevert () {
- this.setState({reverting: true})
+ this.setState({ reverting: true })
  this.props.onRevert()
  }
 
  handleMouseDown (e) {
- const {row, col, onMouseDown, cell} = this.props
+ const { row, col, onMouseDown, cell } = this.props
  if (!cell.disableEvents) {
  onMouseDown(row, col, e)
  }
  }
 
  handleMouseOver (e) {
- const {row, col, onMouseOver, cell} = this.props
+ const { row, col, onMouseOver, cell } = this.props
  if (!cell.disableEvents) {
  onMouseOver(row, col)
  }
  }
 
  handleDoubleClick (e) {
- const {row, col, onDoubleClick, cell} = this.props
+ const { row, col, onDoubleClick, cell } = this.props
  if (!cell.disableEvents) {
  onDoubleClick(row, col)
  }
  }
 
  handleContextMenu (e) {
- const {row, col, onContextMenu, cell} = this.props
+ const { row, col, onContextMenu, cell } = this.props
  if (!cell.disableEvents) {
  onContextMenu(e, row, col)
  }
@@ -119,9 +132,14 @@ export default class DataCell extends PureComponent {
  if (keyCode === ESCAPE_KEY) {
  return this.handleRevert()
  }
- const {cell: {component}, forceEdit} = this.props
+ const {
+ cell: { component },
+ forceEdit
+ } = this.props
  const eatKeys = forceEdit || !!component
- const commit = keyCode === ENTER_KEY || keyCode === TAB_KEY ||
+ const commit =
+ keyCode === ENTER_KEY ||
+ keyCode === TAB_KEY ||
  (!eatKeys && [LEFT_KEY, RIGHT_KEY, UP_KEY, DOWN_KEY].includes(keyCode))
 
  if (commit) {
@@ -130,7 +148,7 @@ export default class DataCell extends PureComponent {
  }
 
  renderComponent (editing, cell) {
- const {component, readOnly, forceComponent} = cell
+ const { component, readOnly, forceComponent } = cell
  if ((editing && !readOnly) || forceComponent) {
  return component
  }
@@ -161,23 +179,37 @@ export default class DataCell extends PureComponent {
  }
 
  render () {
- const {row, col, cell, cellRenderer: CellRenderer,
- valueRenderer, dataEditor, valueViewer, attributesRenderer,
- selected, editing, onKeyUp} = this.props
- const {updated} = this.state
+ const {
+ row,
+ col,
+ cell,
+ cellRenderer: CellRenderer,
+ valueRenderer,
+ dataEditor,
+ valueViewer,
+ attributesRenderer,
+ selected,
+ editing,
+ onKeyUp
+ } = this.props
+ const { updated } = this.state
 
- const content = this.renderComponent(editing, cell) ||
- this.renderEditor(editing, cell, row, col, dataEditor) ||
- this.renderViewer(cell, row, col, valueRenderer, valueViewer)
+ const content =
+ this.renderComponent(editing, cell) ||
+ this.renderEditor(editing, cell, row, col, dataEditor) ||
+ this.renderViewer(cell, row, col, valueRenderer, valueViewer)
 
  const className = [
  cell.className,
- 'cell', cell.overflow,
+ 'cell',
+ cell.overflow,
  selected && 'selected',
  editing && 'editing',
  cell.readOnly && 'read-only',
  updated && 'updated'
- ].filter(a => a).join(' ')
+ ]
+ .filter(a => a)
+ .join(' ')
 
  return (
  <CellRenderer
@@ -195,7 +227,7 @@ export default class DataCell extends PureComponent {
  onDoubleClick={this.handleDoubleClick}
  onContextMenu={this.handleContextMenu}
  onKeyUp={onKeyUp}
-  >
+ >
  {content}
  </CellRenderer>
  )

diff --git a/test/Datasheet.js b/test/Datasheet.js
@@ -113,12 +113,12 @@ describe('Component', () => {
  <span className='value-viewer'>5</span>
  </td>).html())
 
- wrapper.setProps({ editing: true, selected: true })
-
- expect(wrapper.html()).toEqual(
- shallow(<td className='cell selected editing'>
- <input className='data-editor' value='5' />
-  </td>).html())
+ wrapper.setProps({ editing: true, selected: true }, () => {
+ expect(wrapper.html()).toEqual(
+  shallow(<td className='cell selected editing'>
+  <input className='data-editor' value='5' />
+ </td>).html())
+ })
  })
 
  it('should properly render a flash when value changes', () => {
@@ -142,11 +142,13 @@ describe('Component', () => {
  {...props}
  />
  )
- wrapper.setProps({ cell: { value: 6, data: 6 }})
- expect(wrapper.html()).toEqual(
- shallow(<td className='cell updated'>
- <span className='value-viewer'>6</span>
- </td>).html())
+ wrapper.setProps({ cell: { value: 6, data: 6 }}, () => {
+ expect(wrapper.html()).toEqual(
+ shallow(<td className='cell updated'>
+ <span className='value-viewer'>6</span>
+ </td>).html())
+ })
+
  })
  })