Skip to content

Commit

Permalink
Remove unsafe react lifecycle hooks
Browse files Browse the repository at this point in the history
  • Loading branch information
boxfoot committed Feb 19, 2020
1 parent 7936a52 commit 4413526
Show file tree
Hide file tree
Showing 13 changed files with 68 additions and 74 deletions.
10 changes: 5 additions & 5 deletions examples/helpers/ExampleImage.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}

Expand Down
6 changes: 3 additions & 3 deletions examples/helpers/HOC.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
});
}
}
Expand Down
8 changes: 4 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -62,7 +62,7 @@
},
"scripts": {
"webpack": "webpack",
"site-dev-server": "./build_helpers/startSiteDevServer.sh",
"site-dev-server": "bash ./build_helpers/startSiteDevServer.sh",
"site-build": "./build_helpers/buildStaticSite.sh",
"build-dist": "./build_helpers/buildDist.sh",
"build-npm": "./build_helpers/buildNPMInternals.sh",
Expand Down Expand Up @@ -94,4 +94,4 @@
"data-table",
"fixed-table"
]
}
}
10 changes: 5 additions & 5 deletions src/ColumnResizerLine.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
});
}
}
Expand Down
31 changes: 12 additions & 19 deletions src/FixedDataTable.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down Expand Up @@ -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();
}

Expand Down Expand Up @@ -836,7 +837,7 @@ class FixedDataTable extends React.Component {
cx('fixedDataTableLayout/topShadow'),
cx('public/fixedDataTable/topShadow'),
)}
style={{top: bodyOffsetTop}}
style={{ top: bodyOffsetTop }}
/>;
}

Expand All @@ -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;
Expand Down Expand Up @@ -1112,23 +1113,23 @@ 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,
scrollY,
onHorizontalScroll,
onVerticalScroll,
tableSize: { ownerHeight },
} = nextProps;
} = this.props;

const {
endRowIndex: oldEndRowIndex,
firstRowIndex: oldFirstRowIndex,
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));
Expand Down Expand Up @@ -1193,14 +1194,6 @@ class HorizontalScrollbar extends React.PureComponent {
isRTL: PropTypes.bool,
}

componentWillMount() {
this._initialRender = true;
}

componentDidMount() {
this._initialRender = false;
}

render() /*object*/ {
const {
offset,
Expand Down
3 changes: 2 additions & 1 deletion src/FixedDataTableBufferedRows.js
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,8 @@ class FixedDataTableBufferedRows extends React.Component {
isRTL: PropTypes.bool,
}

componentWillMount() {
constructor(props) {
super(props);
this._staticRowArray = [];
this._initialRender = true;
}
Expand Down
5 changes: 4 additions & 1 deletion src/FixedDataTableCell.js
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,10 @@ 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 = {
Expand Down
5 changes: 3 additions & 2 deletions src/FixedDataTableCellGroup.js
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,8 @@ class FixedDataTableCellGroupImpl extends React.Component {
isRTL: PropTypes.bool,
}

componentWillMount() {
constructor(props) {
super(props);
this._initialRender = true;
}

Expand Down Expand Up @@ -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,
Expand Down
3 changes: 0 additions & 3 deletions src/FixedDataTableColumnReorderHandle.js
Original file line number Diff line number Diff line change
Expand Up @@ -50,9 +50,6 @@ class FixedDataTableColumnReorderHandle extends React.PureComponent {
dragDistance: 0
}

componentWillReceiveProps(/*object*/ newProps) {
}

componentWillUnmount() {
if (this._mouseMoveTracker) {
cancelAnimationFrame(this.frameId);
Expand Down
30 changes: 16 additions & 14 deletions src/FixedDataTableContainer.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,33 +28,32 @@ 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,
});
}

Expand All @@ -69,15 +68,15 @@ class FixedDataTableContainer extends React.Component {
render() {
return (
<FixedDataTable
{...this.props}
{...this.state}
{...this.props}
scrollActions={this.scrollActions}
columnActions={this.columnActions}
/>
);
}

update() {
getBoundState() {
const state = this.reduxStore.getState();
const boundState = pick(state, [
'columnGroupProps',
Expand All @@ -104,8 +103,11 @@ class FixedDataTableContainer extends React.Component {
'scrollJumpedY',
'tableSize',
]);
return boundState;
}

this.setState(boundState);
update() {
this.setState(this.getBoundState());
}
}

Expand Down
3 changes: 2 additions & 1 deletion src/FixedDataTableRow.js
Original file line number Diff line number Diff line change
Expand Up @@ -483,7 +483,8 @@ class FixedDataTableRow extends React.Component {
width: PropTypes.number.isRequired,
};

componentWillMount() {
constructor(props) {
super(props);
this._initialRender = true;
}

Expand Down
4 changes: 1 addition & 3 deletions src/FixedDataTableStore.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,5 @@ import reducers from 'reducers'
import { createStore } from 'redux'

export default {
get: () => {
return createStore(reducers)
},
get: () => createStore(reducers)
};
24 changes: 11 additions & 13 deletions src/Scrollbar.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
);
}
}
Expand Down Expand Up @@ -186,7 +187,7 @@ class Scrollbar extends React.PureComponent {
);
}

componentWillMount() {
componentDidMount() {
var isHorizontal = this.props.orientation === 'horizontal';
var onWheel = isHorizontal ? this._onWheelX : this._onWheelY;

Expand All @@ -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,
Expand Down

0 comments on commit 4413526

Please sign in to comment.