Skip to content

Commit 4926e49

Browse files
tstirrat15tstirrat15
committed
Use non-deprecated lifecycle hooks
1 parent 025cca3 commit 4926e49

File tree

10 files changed

+113
-105
lines changed

10 files changed

+113
-105
lines changed

‎src/cluster.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export class Cluster extends React.Component<Props, State> {
6565
React.ReactElement<MarkerProps>
6666
>();
6767

68-
public UNSAFE_componentWillMount() {
68+
public componentDidMount() {
6969
const { children, map } = this.props;
7070

7171
if (children) {
@@ -84,11 +84,11 @@ export class Cluster extends React.Component<Props, State> {
8484
map.off('zoom', this.mapChange);
8585
}
8686

87-
public UNSAFE_componentWillReceiveProps(nextProps: Props) {
88-
const { children } = this.props;
87+
public componentDidUpdate(prevProps: Props) {
88+
const { children } = prevProps;
8989

90-
if (children !== nextProps.children && nextProps.children) {
91-
this.childrenChange(nextProps.children);
90+
if (children !== this.props.children && this.props.children) {
91+
this.childrenChange(this.props.children);
9292
this.mapChange(true);
9393
}
9494
}

‎src/geojson-layer.ts‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -235,7 +235,7 @@ export class GeoJSONLayer extends React.Component<Props> {
235235
});
236236
}
237237

238-
public UNSAFE_componentWillMount() {
238+
public componentDidMount() {
239239
const { map } = this.props;
240240
this.initialize();
241241
map.on('styledata', this.onStyleDataChange);
@@ -259,40 +259,40 @@ export class GeoJSONLayer extends React.Component<Props> {
259259
!!source &&
260260
typeof (source as MapboxGL.GeoJSONSource).setData === 'function';
261261

262-
public UNSAFE_componentWillReceiveProps(props: Props) {
263-
const { data, before, layerOptions, map } = this.props;
262+
public componentDidUpdate(prevProps: Props) {
263+
const { data, before, layerOptions, map } = prevProps;
264264
const source = map.getSource(this.id);
265265
if (!this.isGeoJSONSource(source)) {
266266
return;
267267
}
268268

269-
if (props.data !== data) {
270-
source.setData(props.data);
269+
if (prevProps.data !== data) {
270+
source.setData(this.props.data);
271271

272272
this.source = {
273273
type: 'geojson',
274-
...props.sourceOptions,
275-
data: props.data
274+
...this.props.sourceOptions,
275+
data: this.props.data
276276
// tslint:disable-next-line:no-any
277277
} as any;
278278
}
279279

280280
const layerFilterChanged =
281-
props.layerOptions &&
281+
this.props.layerOptions &&
282282
layerOptions &&
283-
!isEqual(props.layerOptions.filter, layerOptions.filter);
283+
!isEqual(this.props.layerOptions.filter, layerOptions.filter);
284284

285285
types.forEach(type => {
286286
const layerId = this.buildLayerId(type);
287287

288-
if (props.layerOptions && layerFilterChanged) {
289-
map.setFilter(layerId, props.layerOptions.filter || []);
288+
if (this.props.layerOptions && layerFilterChanged) {
289+
map.setFilter(layerId, this.props.layerOptions.filter || []);
290290
}
291291

292292
const paintProp = toCamelCase(type) + 'Paint';
293293

294-
if (!isEqual(props[paintProp], this.props[paintProp])) {
295-
const paintDiff = diff(this.props[paintProp], props[paintProp]);
294+
if (!isEqual(prevProps[paintProp], this.props[paintProp])) {
295+
const paintDiff = diff(prevProps[paintProp], this.props[paintProp]);
296296

297297
Object.keys(paintDiff).forEach(key => {
298298
map.setPaintProperty(layerId, key, paintDiff[key]);
@@ -301,8 +301,8 @@ export class GeoJSONLayer extends React.Component<Props> {
301301

302302
const layoutProp = toCamelCase(type) + 'Layout';
303303

304-
if (!isEqual(props[layoutProp], this.props[layoutProp])) {
305-
const layoutDiff = diff(this.props[layoutProp], props[layoutProp]);
304+
if (!isEqual(prevProps[layoutProp], this.props[layoutProp])) {
305+
const layoutDiff = diff(prevProps[layoutProp], this.props[layoutProp]);
306306

307307
Object.keys(layoutDiff).forEach(key => {
308308
map.setLayoutProperty(layerId, key, layoutDiff[key]);
@@ -314,19 +314,19 @@ export class GeoJSONLayer extends React.Component<Props> {
314314
events.forEach(event => {
315315
const prop = toCamelCase(type) + eventToHandler[event];
316316

317-
if (props[prop] !== this.props[prop]) {
318-
if (this.props[prop]) {
319-
map.off(event, layerId, this.props[prop]);
317+
if (prevProps[prop] !== this.props[prop]) {
318+
if (prevProps[prop]) {
319+
map.off(event, layerId, prevProps[prop]);
320320
}
321321

322-
if (props[prop]) {
323-
map.on(event, layerId, props[prop]);
322+
if (this.props[prop]) {
323+
map.on(event, layerId, this.props[prop]);
324324
}
325325
}
326326
});
327327

328-
if (before !== props.before) {
329-
map.moveLayer(layerId, props.before);
328+
if (before !== this.props.before) {
329+
map.moveLayer(layerId, this.props.before);
330330
}
331331
});
332332
}

‎src/image.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,25 +24,25 @@ export interface Props {
2424
}
2525

2626
class Image extends React.Component<Props> {
27-
public UNSAFE_componentWillMount() {
27+
public componentDidMount() {
2828
this.loadImage(this.props);
2929
}
3030

3131
public componentWillUnmount() {
3232
Image.removeImage(this.props);
3333
}
3434

35-
public UNSAFE_componentWillReceiveProps(nextProps: Props) {
36-
const { id } = this.props;
35+
public componentDidUpdate(prevProps: Props) {
36+
const { id } = prevProps;
3737

38-
if (nextProps.map !== this.props.map) {
38+
if (prevProps.map !== this.props.map) {
3939
// Remove image from old map
4040
Image.removeImage(this.props);
4141
}
4242

43-
if (nextProps.map && !nextProps.map.hasImage(id)) {
43+
if (this.props.map && !this.props.map.hasImage(id)) {
4444
// Add missing image to map
45-
this.loadImage(nextProps);
45+
this.loadImage(this.props);
4646
}
4747
}
4848

‎src/layer-events-hoc.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -215,7 +215,7 @@ export function layerMouseTouchEvents(
215215
this.draggedChildren = undefined;
216216
};
217217

218-
public UNSAFE_componentWillMount() {
218+
public componentDidMount() {
219219
const { map } = this.props;
220220

221221
map.on('click', this.id, this.onClick);

‎src/layer.ts‎

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -238,7 +238,7 @@ export default class Layer extends React.Component<Props> {
238238
}
239239
};
240240

241-
public UNSAFE_componentWillMount() {
241+
public componentDidMount() {
242242
const { map } = this.props;
243243

244244
this.initialize();
@@ -282,44 +282,52 @@ export default class Layer extends React.Component<Props> {
282282
}
283283
}
284284

285-
public UNSAFE_componentWillReceiveProps(props: Props) {
286-
const { paint, layout, before, filter, id, minZoom, maxZoom } = this.props;
287-
const { map } = this.props;
285+
public componentDidUpdate(prevProps: Props) {
286+
const {
287+
paint,
288+
layout,
289+
before,
290+
filter,
291+
id,
292+
minZoom,
293+
maxZoom,
294+
map,
295+
} = prevProps;
288296

289-
if (!isEqual(props.paint, paint)) {
290-
const paintDiff = diff(paint, props.paint);
297+
if (!isEqual(this.props.paint, paint)) {
298+
const paintDiff = diff(paint, this.props.paint);
291299

292300
Object.keys(paintDiff).forEach(key => {
293301
map.setPaintProperty(id, key, paintDiff[key]);
294302
});
295303
}
296304

297-
if (!isEqual(props.layout, layout)) {
298-
const layoutDiff = diff(layout, props.layout);
305+
if (!isEqual(this.props.layout, layout)) {
306+
const layoutDiff = diff(layout, this.props.layout);
299307

300308
Object.keys(layoutDiff).forEach(key => {
301309
map.setLayoutProperty(id, key, layoutDiff[key]);
302310
});
303311
}
304312

305-
if (!isEqual(props.filter, filter)) {
306-
map.setFilter(id, props.filter);
313+
if (!isEqual(this.props.filter, filter)) {
314+
map.setFilter(id, this.props.filter);
307315
}
308316

309-
if (before !== props.before) {
310-
map.moveLayer(id, props.before);
317+
if (before !== this.props.before) {
318+
map.moveLayer(id, this.props.before);
311319
}
312320

313-
if (minZoom !== props.minZoom || maxZoom !== props.maxZoom) {
321+
if (minZoom !== this.props.minZoom || maxZoom !== this.props.maxZoom) {
314322
// TODO: Fix when PR https://github.com/DefinitelyTyped/DefinitelyTyped/pull/22036 is merged
315-
map.setLayerZoomRange(id, props.minZoom!, props.maxZoom!);
323+
map.setLayerZoomRange(id, this.props.minZoom!, this.props.maxZoom!);
316324
}
317325

318326
(Object.entries(eventToHandler) as Array<
319327
[keyof EventToHandlersType, keyof LayerEvents]
320328
>).forEach(([event, propName]) => {
321-
const oldHandler = this.props[propName];
322-
const newHandler = props[propName];
329+
const oldHandler = prevProps[propName];
330+
const newHandler = this.props[propName];
323331

324332
if (oldHandler !== newHandler) {
325333
if (oldHandler) {

‎src/map-events.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -131,11 +131,11 @@ export const listenEvents = (
131131

132132
export const updateEvents = (
133133
listeners: Listeners,
134-
nextProps: Partial<Events>,
134+
currentProps: Partial<Events>,
135135
map: MapboxGl.Map
136136
) => {
137137
const toListenOff = Object.keys(events).filter(
138-
eventKey => listeners[eventKey] && typeof nextProps[eventKey] !== 'function'
138+
eventKey => listeners[eventKey] && typeof currentProps[eventKey] !== 'function'
139139
);
140140

141141
toListenOff.forEach(key => {
@@ -144,10 +144,10 @@ export const updateEvents = (
144144
});
145145

146146
const toListenOn = Object.keys(events)
147-
.filter(key => !listeners[key] && typeof nextProps[key] === 'function')
147+
.filter(key => !listeners[key] && typeof currentProps[key] === 'function')
148148
.reduce((acc, next) => ((acc[next] = events[next]), acc), {});
149149

150-
const newListeners = listenEvents(toListenOn, nextProps, map);
150+
const newListeners = listenEvents(toListenOn, currentProps, map);
151151

152152
return { ...listeners, ...newListeners };
153153
};

‎src/map.tsx‎

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -291,62 +291,62 @@ const ReactMapboxFactory = ({
291291
}
292292
}
293293

294-
public UNSAFE_componentWillReceiveProps(nextProps: Props & Events) {
294+
public componentDidUpdate(prevProps: Props & Events) {
295295
const { map } = this.state;
296296
if (!map) {
297297
return null;
298298
}
299299

300300
// Update event listeners
301-
this.listeners = updateEvents(this.listeners, nextProps, map);
301+
this.listeners = updateEvents(this.listeners, this.props, map);
302302

303303
const center = map.getCenter();
304304
const zoom = map.getZoom();
305305
const bearing = map.getBearing();
306306
const pitch = map.getPitch();
307307

308308
const didZoomUpdate =
309-
this.props.zoom !== nextProps.zoom &&
310-
(nextProps.zoom && nextProps.zoom[0]) !== zoom;
309+
prevProps.zoom !== this.props.zoom &&
310+
(this.props.zoom && this.props.zoom[0]) !== zoom;
311311

312312
const didCenterUpdate =
313-
this.props.center !== nextProps.center &&
314-
((nextProps.center && nextProps.center[0]) !== center.lng ||
315-
(nextProps.center && nextProps.center[1]) !== center.lat);
313+
prevProps.center !== this.props.center &&
314+
((this.props.center && this.props.center[0]) !== center.lng ||
315+
(this.props.center && this.props.center[1]) !== center.lat);
316316

317317
const didBearingUpdate =
318-
this.props.bearing !== nextProps.bearing &&
319-
(nextProps.bearing && nextProps.bearing[0]) !== bearing;
318+
prevProps.bearing !== this.props.bearing &&
319+
(this.props.bearing && this.props.bearing[0]) !== bearing;
320320

321321
const didPitchUpdate =
322-
this.props.pitch !== nextProps.pitch &&
323-
(nextProps.pitch && nextProps.pitch[0]) !== pitch;
322+
prevProps.pitch !== this.props.pitch &&
323+
(this.props.pitch && this.props.pitch[0]) !== pitch;
324324

325-
if (nextProps.maxBounds) {
326-
const didMaxBoundsUpdate = this.props.maxBounds !== nextProps.maxBounds;
325+
if (this.props.maxBounds) {
326+
const didMaxBoundsUpdate = prevProps.maxBounds !== this.props.maxBounds;
327327

328328
if (didMaxBoundsUpdate) {
329-
map.setMaxBounds(nextProps.maxBounds);
329+
map.setMaxBounds(this.props.maxBounds);
330330
}
331331
}
332332

333-
if (nextProps.fitBounds) {
334-
const { fitBounds } = this.props;
333+
if (this.props.fitBounds) {
334+
const { fitBounds } = prevProps;
335335

336336
const didFitBoundsUpdate =
337-
fitBounds !== nextProps.fitBounds || // Check for reference equality
338-
nextProps.fitBounds.length !== (fitBounds && fitBounds.length) || // Added element
337+
fitBounds !== this.props.fitBounds || // Check for reference equality
338+
this.props.fitBounds.length !== (fitBounds && fitBounds.length) || // Added element
339339
!!fitBounds.filter((c, i) => {
340340
// Check for equality
341-
const nc = nextProps.fitBounds && nextProps.fitBounds[i];
341+
const nc = this.props.fitBounds && this.props.fitBounds[i];
342342
return c[0] !== (nc && nc[0]) || c[1] !== (nc && nc[1]);
343343
})[0];
344344

345345
if (
346346
didFitBoundsUpdate ||
347-
!isEqual(this.props.fitBoundsOptions, nextProps.fitBoundsOptions)
347+
!isEqual(prevProps.fitBoundsOptions, this.props.fitBoundsOptions)
348348
) {
349-
map.fitBounds(nextProps.fitBounds, nextProps.fitBoundsOptions, {
349+
map.fitBounds(this.props.fitBounds, this.props.fitBoundsOptions, {
350350
fitboundUpdate: true
351351
});
352352
}
@@ -358,21 +358,21 @@ const ReactMapboxFactory = ({
358358
didBearingUpdate ||
359359
didPitchUpdate
360360
) {
361-
const mm: string = nextProps.movingMethod || defaultMovingMethod;
362-
const { flyToOptions, animationOptions } = nextProps;
361+
const mm: string = this.props.movingMethod || defaultMovingMethod;
362+
const { flyToOptions, animationOptions } = this.props;
363363

364364
map[mm]({
365365
...animationOptions,
366366
...flyToOptions,
367-
zoom: didZoomUpdate && nextProps.zoom ? nextProps.zoom[0] : zoom,
368-
center: didCenterUpdate ? nextProps.center : center,
369-
bearing: didBearingUpdate ? nextProps.bearing : bearing,
370-
pitch: didPitchUpdate ? nextProps.pitch : pitch
367+
zoom: didZoomUpdate && this.props.zoom ? this.props.zoom[0] : zoom,
368+
center: didCenterUpdate ? this.props.center : center,
369+
bearing: didBearingUpdate ? this.props.bearing : bearing,
370+
pitch: didPitchUpdate ? this.props.pitch : pitch
371371
});
372372
}
373373

374-
if (!isEqual(this.props.style, nextProps.style)) {
375-
map.setStyle(nextProps.style);
374+
if (!isEqual(prevProps.style, this.props.style)) {
375+
map.setStyle(this.props.style);
376376
}
377377

378378
return null;

0 commit comments

Comments
 (0)