From 88dc96eab159fdfbd2243b2375d32504fa3c6d00 Mon Sep 17 00:00:00 2001 From: Benj Kamm Date: Wed, 19 Feb 2020 13:55:12 -0600 Subject: [PATCH] Remove unsafe react lifecycle hooks --- examples/helpers/ExampleImage.js | 10 ++++---- examples/helpers/HOC.js | 6 ++--- package.json | 6 ++--- src/ColumnResizerLine.js | 10 ++++---- src/FixedDataTable.js | 31 +++++++++-------------- src/FixedDataTableBufferedRows.js | 3 ++- src/FixedDataTableCell.js | 13 +++++++--- src/FixedDataTableCellGroup.js | 5 ++-- src/FixedDataTableColumnReorderHandle.js | 3 --- src/FixedDataTableContainer.js | 32 +++++++++++++----------- src/FixedDataTableRow.js | 3 ++- src/FixedDataTableStore.js | 4 +-- src/Scrollbar.js | 24 ++++++++---------- 13 files changed, 74 insertions(+), 76 deletions(-) diff --git a/examples/helpers/ExampleImage.js b/examples/helpers/ExampleImage.js index c2c42978..1d64e538 100644 --- a/examples/helpers/ExampleImage.js +++ b/examples/helpers/ExampleImage.js @@ -19,15 +19,15 @@ class ExampleImage extends React.Component { ready: false, } - componentWillMount() { + componentDidMount() { this.componentId = imageIdCounter++; this._load(this.props.src); } - componentWillReceiveProps(nextProps) { - if (nextProps.src !== this.props.src) { - this.setState({src: null}); - this._load(nextProps.src); + componentDidUpdate(prevProps) { + if (prevProps.src !== this.props.src) { + this.setState({ src: null }); + this._load(this.props.src); } } diff --git a/examples/helpers/HOC.js b/examples/helpers/HOC.js index 7ffc8762..08a76f23 100644 --- a/examples/helpers/HOC.js +++ b/examples/helpers/HOC.js @@ -27,10 +27,10 @@ function DataCtxt(Wrapped) { }; } - componentWillReceiveProps(nextProps) { - if (JSON.stringify(nextProps.data) !== JSON.stringify(this.state.data)) { + componentDidUpdate() { + if (JSON.stringify(this.props.data) !== JSON.stringify(this.state.data)) { this.setState({ - data: nextProps.data, + data: this.props.data, }); } } diff --git a/package.json b/package.json index 25a5b472..1e8e898a 100644 --- a/package.json +++ b/package.json @@ -4,8 +4,8 @@ "description": "A React table component designed to allow presenting thousands of rows of data.", "main": "main.js", "peerDependencies": { - "react": ">=0.13.0 || ^0.14.0-beta3", - "react-dom": ">=0.14.0 || ^0.14.0-beta3" + "react": ">=15.3.0", + "react-dom": ">=15.3.0" }, "dependencies": { "lodash": "^4.17.4", @@ -94,4 +94,4 @@ "data-table", "fixed-table" ] -} +} \ No newline at end of file diff --git a/src/ColumnResizerLine.js b/src/ColumnResizerLine.js index f3dc28c5..fb733c2f 100644 --- a/src/ColumnResizerLine.js +++ b/src/ColumnResizerLine.js @@ -93,12 +93,12 @@ class ColumnResizerLine extends React.PureComponent { cursorDelta: 0, } - componentWillReceiveProps(/*object*/ newProps) { - if (newProps.initialEvent && !this._mouseMoveTracker.isDragging()) { - this._mouseMoveTracker.captureMouseMoves(newProps.initialEvent); + componentDidUpdate() { + if (this.props.initialEvent && !this._mouseMoveTracker.isDragging()) { + this._mouseMoveTracker.captureMouseMoves(this.props.initialEvent); this.setState({ - width: newProps.initialWidth, - cursorDelta: newProps.initialWidth + width: this.props.initialWidth, + cursorDelta: this.props.initialWidth, }); } } diff --git a/src/FixedDataTable.js b/src/FixedDataTable.js index 5fb79276..d78ea3ce 100644 --- a/src/FixedDataTable.js +++ b/src/FixedDataTable.js @@ -469,7 +469,9 @@ class FixedDataTable extends React.Component { stopScrollPropagation: false, } - componentWillMount() { + constructor(props) { + super(props); + this._didScrollStop = debounceCore(this._didScrollStopSync, 200, this); this._onKeyDown = this._onKeyDown.bind(this); @@ -629,11 +631,10 @@ class FixedDataTable extends React.Component { this._reportContentHeight(); } - componentWillReceiveProps(/*object*/ nextProps) { - this._didScroll(nextProps); - } - - componentDidUpdate() { + componentDidUpdate(/*object*/ prevProps) { + if (prevProps !== this.props) { + this._didScroll(prevProps); + } this._reportContentHeight(); } @@ -836,7 +837,7 @@ class FixedDataTable extends React.Component { cx('fixedDataTableLayout/topShadow'), cx('public/fixedDataTable/topShadow'), )} - style={{top: bodyOffsetTop}} + style={{ top: bodyOffsetTop }} />; } @@ -852,7 +853,7 @@ class FixedDataTable extends React.Component { cx('fixedDataTableLayout/bottomShadow'), cx('public/fixedDataTable/bottomShadow'), )} - style={{top: footOffsetTop}} + style={{ top: footOffsetTop }} />; } var tabIndex = null; @@ -1112,7 +1113,7 @@ class FixedDataTable extends React.Component { /** * Calls the user specified scroll callbacks -- onScrollStart, onScrollEnd, onHorizontalScroll, and onVerticalScroll. */ - _didScroll = (/* !object */ nextProps) => { + _didScroll = (/* !object */ prevProps) => { const { onScrollStart, scrollX, @@ -1120,7 +1121,7 @@ class FixedDataTable extends React.Component { onHorizontalScroll, onVerticalScroll, tableSize: { ownerHeight }, - } = nextProps; + } = this.props; const { endRowIndex: oldEndRowIndex, @@ -1128,7 +1129,7 @@ class FixedDataTable extends React.Component { scrollX: oldScrollX, scrollY: oldScrollY, tableSize: { ownerHeight: oldOwnerHeight }, - } = this.props; + } = prevProps; // check if scroll values have changed - we have an extra check on NaN because (NaN !== NaN) const ownerHeightChanged = ownerHeight !== oldOwnerHeight && !(isNaN(ownerHeight) && isNaN(oldOwnerHeight)); @@ -1193,14 +1194,6 @@ class HorizontalScrollbar extends React.PureComponent { isRTL: PropTypes.bool, } - componentWillMount() { - this._initialRender = true; - } - - componentDidMount() { - this._initialRender = false; - } - render() /*object*/ { const { offset, diff --git a/src/FixedDataTableBufferedRows.js b/src/FixedDataTableBufferedRows.js index c50fc004..514ffd46 100644 --- a/src/FixedDataTableBufferedRows.js +++ b/src/FixedDataTableBufferedRows.js @@ -61,7 +61,8 @@ class FixedDataTableBufferedRows extends React.Component { isRTL: PropTypes.bool, } - componentWillMount() { + constructor(props) { + super(props); this._staticRowArray = []; this._initialRender = true; } diff --git a/src/FixedDataTableCell.js b/src/FixedDataTableCell.js index 905efddf..92a9f5f3 100644 --- a/src/FixedDataTableCell.js +++ b/src/FixedDataTableCell.js @@ -125,7 +125,12 @@ class FixedDataTableCell extends React.Component { return false; } - componentWillReceiveProps(props) { + componentDidUpdate(prevProps) { + if (prevProps === this.props) { + return; + } + + const props = this.props; var left = props.left + this.state.displacement; var newState = { @@ -203,18 +208,18 @@ class FixedDataTableCell extends React.Component { render() /*object*/ { var { height, width, columnKey, isHeaderOrFooter, ...props } = this.props; - + var style = { height, width, }; - + if (this.props.isRTL) { style.right = props.left; } else { style.left = props.left; } - + if (this.state.isReorderingThisColumn) { const DIR_SIGN = this.props.isRTL ? -1 : 1; style.transform = `translateX(${this.state.displacement * DIR_SIGN}px) translateZ(0)`; diff --git a/src/FixedDataTableCellGroup.js b/src/FixedDataTableCellGroup.js index 13245d48..31af891c 100644 --- a/src/FixedDataTableCellGroup.js +++ b/src/FixedDataTableCellGroup.js @@ -64,7 +64,8 @@ class FixedDataTableCellGroupImpl extends React.Component { isRTL: PropTypes.bool, } - componentWillMount() { + constructor(props) { + super(props); this._initialRender = true; } @@ -209,7 +210,7 @@ class FixedDataTableCellGroup extends React.Component { } render() /*object*/ { - var {offsetLeft, ...props} = this.props; + var { offsetLeft, ...props } = this.props; var style = { height: props.cellGroupWrapperHeight || props.height, diff --git a/src/FixedDataTableColumnReorderHandle.js b/src/FixedDataTableColumnReorderHandle.js index 53b6b11a..f95456ba 100644 --- a/src/FixedDataTableColumnReorderHandle.js +++ b/src/FixedDataTableColumnReorderHandle.js @@ -50,9 +50,6 @@ class FixedDataTableColumnReorderHandle extends React.PureComponent { dragDistance: 0 } - componentWillReceiveProps(/*object*/ newProps) { - } - componentWillUnmount() { if (this._mouseMoveTracker) { cancelAnimationFrame(this.frameId); diff --git a/src/FixedDataTableContainer.js b/src/FixedDataTableContainer.js index 3c931cab..a3c2145a 100644 --- a/src/FixedDataTableContainer.js +++ b/src/FixedDataTableContainer.js @@ -28,33 +28,34 @@ class FixedDataTableContainer extends React.Component { this.update = this.update.bind(this); this.reduxStore = FixedDataTableStore.get(); - this.unsubscribe = this.reduxStore.subscribe(this.update); this.scrollActions = bindActionCreators(scrollActions, this.reduxStore.dispatch); this.columnActions = bindActionCreators(columnActions, this.reduxStore.dispatch); - } - - componentWillMount() { - const props = this.props; this.reduxStore.dispatch({ type: ActionTypes.INITIALIZE, - props: props + props, }); - this.update(); + this.unsubscribe = this.reduxStore.subscribe(this.update); + this.state = this.getBoundState(); } - componentWillReceiveProps(nextProps) { + componentDidUpdate(prevProps) { + // Only react to prop changes - ignore updates due to internal state + if (this.props === prevProps) { + return; + } + invariant( - nextProps.height !== undefined || nextProps.maxHeight !== undefined, + this.props.height !== undefined || this.props.maxHeight !== undefined, 'You must set either a height or a maxHeight' ); this.reduxStore.dispatch({ type: ActionTypes.PROP_CHANGE, - newProps: nextProps, - oldProps: this.props, + newProps: this.props, + oldProps: prevProps, }); } @@ -69,15 +70,15 @@ class FixedDataTableContainer extends React.Component { render() { return ( ); } - update() { + getBoundState() { const state = this.reduxStore.getState(); const boundState = pick(state, [ 'columnGroupProps', @@ -104,8 +105,11 @@ class FixedDataTableContainer extends React.Component { 'scrollJumpedY', 'tableSize', ]); + return boundState; + } - this.setState(boundState); + update() { + this.setState(this.getBoundState()); } } diff --git a/src/FixedDataTableRow.js b/src/FixedDataTableRow.js index 6db44a2c..9eb88d29 100644 --- a/src/FixedDataTableRow.js +++ b/src/FixedDataTableRow.js @@ -483,7 +483,8 @@ class FixedDataTableRow extends React.Component { width: PropTypes.number.isRequired, }; - componentWillMount() { + constructor(props) { + super(props); this._initialRender = true; } diff --git a/src/FixedDataTableStore.js b/src/FixedDataTableStore.js index d9222629..156a2be3 100644 --- a/src/FixedDataTableStore.js +++ b/src/FixedDataTableStore.js @@ -15,7 +15,5 @@ import reducers from 'reducers' import { createStore } from 'redux' export default { - get: () => { - return createStore(reducers) - }, + get: () => createStore(reducers) }; diff --git a/src/Scrollbar.js b/src/Scrollbar.js index e77e0ed2..b8af7dca 100644 --- a/src/Scrollbar.js +++ b/src/Scrollbar.js @@ -58,28 +58,29 @@ class Scrollbar extends React.PureComponent { props.contentSize, props.orientation ); + this._initialRender = true; } - componentWillReceiveProps(/*object*/ nextProps) { - var controlledPosition = nextProps.position; + componentDidUpdate() { + var controlledPosition = this.props.position; if (controlledPosition === undefined) { this._setNextState( this._calculateState( this.state.position, - nextProps.size, - nextProps.contentSize, - nextProps.orientation + this.props.size, + this.props.contentSize, + this.props.orientation ) ); } else { this._setNextState( this._calculateState( controlledPosition, - nextProps.size, - nextProps.contentSize, - nextProps.orientation + this.props.size, + this.props.contentSize, + this.props.orientation ), - nextProps + this.props ); } } @@ -186,7 +187,7 @@ class Scrollbar extends React.PureComponent { ); } - componentWillMount() { + componentDidMount() { var isHorizontal = this.props.orientation === 'horizontal'; var onWheel = isHorizontal ? this._onWheelX : this._onWheelY; @@ -196,10 +197,7 @@ class Scrollbar extends React.PureComponent { this._shouldHandleY, // Should handle vertical scroll this.props.isRTL ); - this._initialRender = true; - } - componentDidMount() { this._rootRef && this._rootRef.addEventListener( 'wheel', this._wheelHandler.onWheel,