Skip to content

Change componentWillReceiveProps to componentDidUpdate #950

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
itsmichaeldiego merged 1 commit into from
Sep 25, 2020
Merged

Change componentWillReceiveProps to componentDidUpdate #950

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
93 changes: 45 additions & 48 deletions src/google_map.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -301,81 +301,90 @@ class GoogleMap extends Component {
}
}

// eslint-disable-next-line camelcase
UNSAFE_componentWillReceiveProps(nextProps) {
shouldComponentUpdate(nextProps, nextState) {
// draggable does not affect inner components
return (
!shallowEqual(
omit(this.props, ['draggable']),
omit(nextProps, ['draggable'])
) || !shallowEqual(this.state, nextState)
);
}

componentDidUpdate(prevProps) {
if (process.env.NODE_ENV !== 'production') {
if (!shallowEqual(this.props.defaultCenter, nextProps.defaultCenter)) {
if (!shallowEqual(prevProps.defaultCenter, this.props.defaultCenter)) {
console.warn(
"GoogleMap: defaultCenter prop changed. You can't change default props."
);
}

if (!shallowEqual(this.props.defaultZoom, nextProps.defaultZoom)) {
if (!shallowEqual(prevProps.defaultZoom, this.props.defaultZoom)) {
console.warn(
"GoogleMap: defaultZoom prop changed. You can't change default props."
);
}
}

if (
!this._isCenterDefined(this.props.center) &&
this._isCenterDefined(nextProps.center)
!this._isCenterDefined(prevProps.center) &&
this._isCenterDefined(this.props.center)
) {
setTimeout(() => this._initMap(), 0);
}

if (this.map_) {
const centerLatLng = this.geoService_.getCenter();
if (this._isCenterDefined(nextProps.center)) {
const nextPropsCenter = latLng2Obj(nextProps.center);
const currCenter = this._isCenterDefined(this.props.center)
? latLng2Obj(this.props.center)
if (this._isCenterDefined(this.props.center)) {
const currentCenter = latLng2Obj(this.props.center);
const prevCenter = this._isCenterDefined(prevProps.center)
? latLng2Obj(prevProps.center)
: null;

if (
!currCenter ||
Math.abs(nextPropsCenter.lat - currCenter.lat) +
Math.abs(nextPropsCenter.lng - currCenter.lng) >
!prevCenter ||
Math.abs(currentCenter.lat - prevCenter.lat) +
Math.abs(currentCenter.lng - prevCenter.lng) >
kEPS
) {
if (
Math.abs(nextPropsCenter.lat - centerLatLng.lat) +
Math.abs(nextPropsCenter.lng - centerLatLng.lng) >
Math.abs(currentCenter.lat - centerLatLng.lat) +
Math.abs(currentCenter.lng - centerLatLng.lng) >
kEPS
) {
this.map_.panTo({
lat: nextPropsCenter.lat,
lng: nextPropsCenter.lng,
lat: currentCenter.lat,
lng: currentCenter.lng,
});
}
}
}

if (!isEmpty(nextProps.zoom)) {
if (!isEmpty(this.props.zoom)) {
// if zoom chaged by user
if (Math.abs(nextProps.zoom - this.props.zoom) > 0) {
this.map_.setZoom(nextProps.zoom);
if (Math.abs(this.props.zoom - prevProps.zoom) > 0) {
this.map_.setZoom(this.props.zoom);
}
}

if (!isEmpty(this.props.draggable) && isEmpty(nextProps.draggable)) {
if (!isEmpty(prevProps.draggable) && isEmpty(this.props.draggable)) {
// reset to default
this.map_.setOptions({ draggable: this.defaultDraggableOption_ });
} else if (!shallowEqual(this.props.draggable, nextProps.draggable)) {
} else if (!shallowEqual(prevProps.draggable, this.props.draggable)) {
// also prevent this on window 'mousedown' event to prevent map move
this.map_.setOptions({ draggable: nextProps.draggable });
this.map_.setOptions({ draggable: this.props.draggable });
}

// use shallowEqual to try avoid calling map._setOptions if only the ref changes
if (
!isEmpty(nextProps.options) &&
!shallowEqual(this.props.options, nextProps.options)
!isEmpty(this.props.options) &&
!shallowEqual(prevProps.options, this.props.options)
) {
const mapPlainObjects = pick(this.maps_, isPlainObject);
let options =
typeof nextProps.options === 'function'
? nextProps.options(mapPlainObjects)
: nextProps.options;
typeof this.props.options === 'function'
? this.props.options(mapPlainObjects)
: this.props.options;
// remove zoom, center and draggable options as these are managed by google-maps-react
options = omit(options, ['zoom', 'center', 'draggable']);

Expand All @@ -387,47 +396,35 @@ class GoogleMap extends Component {
this.map_.setOptions(options);
}

if (!shallowEqual(nextProps.layerTypes, this.props.layerTypes)) {
if (!shallowEqual(this.props.layerTypes, prevProps.layerTypes)) {
Object.keys(this.layers_).forEach((layerKey) => {
this.layers_[layerKey].setMap(null);
delete this.layers_[layerKey];
});
this._setLayers(nextProps.layerTypes);
this._setLayers(this.props.layerTypes);
}

if (
this.heatmap &&
!shallowEqual(nextProps.heatmap.positions, this.props.heatmap.positions)
!shallowEqual(this.props.heatmap.positions, prevProps.heatmap.positions)
) {
this.heatmap.setData(
nextProps.heatmap.positions.map((p) => ({
this.props.heatmap.positions.map((p) => ({
location: new this.maps_.LatLng(p.lat, p.lng),
weight: p.weight,
}))
);
}
if (
this.heatmap &&
!shallowEqual(nextProps.heatmap.options, this.props.heatmap.options)
!shallowEqual(this.props.heatmap.options, prevProps.heatmap.options)
) {
Object.keys(nextProps.heatmap.options).forEach((option) => {
this.heatmap.set(option, nextProps.heatmap.options[option]);
Object.keys(this.props.heatmap.options).forEach((option) => {
this.heatmap.set(option, this.props.heatmap.options[option]);
});
}
}
}

shouldComponentUpdate(nextProps, nextState) {
// draggable does not affect inner components
return (
!shallowEqual(
omit(this.props, ['draggable']),
omit(nextProps, ['draggable'])
) || !shallowEqual(this.state, nextState)
);
}

componentDidUpdate(prevProps) {
// emit actions
this.markersDispatcher_.emit('kON_CHANGE');

if (!shallowEqual(this.props.hoverDistance, prevProps.hoverDistance)) {
Expand Down