Use non-deprecated lifecycle hooks

alex3165 · Mar 24, 2020 · 4926e49 · 4926e49
1 parent 025cca3
commit 4926e49
Show file tree

Hide file tree

Showing 10 changed files with 113 additions and 105 deletions.
diff --git a/src/cluster.tsx b/src/cluster.tsx
@@ -65,7 +65,7 @@ export class Cluster extends React.Component<Props, State> {
     React.ReactElement<MarkerProps>
   >();
 
-  public UNSAFE_componentWillMount() {
+  public componentDidMount() {
     const { children, map } = this.props;
 
     if (children) {
@@ -84,11 +84,11 @@ export class Cluster extends React.Component<Props, State> {
     map.off('zoom', this.mapChange);
   }
 
-  public UNSAFE_componentWillReceiveProps(nextProps: Props) {
-    const { children } = this.props;
+  public componentDidUpdate(prevProps: Props) {
+    const { children } = prevProps;
 
-    if (children !== nextProps.children && nextProps.children) {
-      this.childrenChange(nextProps.children);
+    if (children !== this.props.children && this.props.children) {
+      this.childrenChange(this.props.children);
       this.mapChange(true);
     }
   }

diff --git a/src/geojson-layer.ts b/src/geojson-layer.ts
@@ -235,7 +235,7 @@ export class GeoJSONLayer extends React.Component<Props> {
     });
   }
 
-  public UNSAFE_componentWillMount() {
+  public componentDidMount() {
     const { map } = this.props;
     this.initialize();
     map.on('styledata', this.onStyleDataChange);
@@ -259,40 +259,40 @@ export class GeoJSONLayer extends React.Component<Props> {
     !!source &&
     typeof (source as MapboxGL.GeoJSONSource).setData === 'function';
 
-  public UNSAFE_componentWillReceiveProps(props: Props) {
-    const { data, before, layerOptions, map } = this.props;
+  public componentDidUpdate(prevProps: Props) {
+    const { data, before, layerOptions, map } = prevProps;
     const source = map.getSource(this.id);
     if (!this.isGeoJSONSource(source)) {
       return;
     }
 
-    if (props.data !== data) {
-      source.setData(props.data);
+    if (prevProps.data !== data) {
+      source.setData(this.props.data);
 
       this.source = {
         type: 'geojson',
-        ...props.sourceOptions,
-        data: props.data
+        ...this.props.sourceOptions,
+        data: this.props.data
         // tslint:disable-next-line:no-any
       } as any;
     }
 
     const layerFilterChanged =
-      props.layerOptions &&
+      this.props.layerOptions &&
       layerOptions &&
-      !isEqual(props.layerOptions.filter, layerOptions.filter);
+      !isEqual(this.props.layerOptions.filter, layerOptions.filter);
 
     types.forEach(type => {
       const layerId = this.buildLayerId(type);
 
-      if (props.layerOptions && layerFilterChanged) {
-        map.setFilter(layerId, props.layerOptions.filter || []);
+      if (this.props.layerOptions && layerFilterChanged) {
+        map.setFilter(layerId, this.props.layerOptions.filter || []);
       }
 
       const paintProp = toCamelCase(type) + 'Paint';
 
-      if (!isEqual(props[paintProp], this.props[paintProp])) {
-        const paintDiff = diff(this.props[paintProp], props[paintProp]);
+      if (!isEqual(prevProps[paintProp], this.props[paintProp])) {
+        const paintDiff = diff(prevProps[paintProp], this.props[paintProp]);
 
         Object.keys(paintDiff).forEach(key => {
           map.setPaintProperty(layerId, key, paintDiff[key]);
@@ -301,8 +301,8 @@ export class GeoJSONLayer extends React.Component<Props> {
 
       const layoutProp = toCamelCase(type) + 'Layout';
 
-      if (!isEqual(props[layoutProp], this.props[layoutProp])) {
-        const layoutDiff = diff(this.props[layoutProp], props[layoutProp]);
+      if (!isEqual(prevProps[layoutProp], this.props[layoutProp])) {
+        const layoutDiff = diff(prevProps[layoutProp], this.props[layoutProp]);
 
         Object.keys(layoutDiff).forEach(key => {
           map.setLayoutProperty(layerId, key, layoutDiff[key]);
@@ -314,19 +314,19 @@ export class GeoJSONLayer extends React.Component<Props> {
       events.forEach(event => {
         const prop = toCamelCase(type) + eventToHandler[event];
 
-        if (props[prop] !== this.props[prop]) {
-          if (this.props[prop]) {
-            map.off(event, layerId, this.props[prop]);
+        if (prevProps[prop] !== this.props[prop]) {
+          if (prevProps[prop]) {
+            map.off(event, layerId, prevProps[prop]);
           }
 
-          if (props[prop]) {
-            map.on(event, layerId, props[prop]);
+          if (this.props[prop]) {
+            map.on(event, layerId, this.props[prop]);
           }
         }
       });
 
-      if (before !== props.before) {
-        map.moveLayer(layerId, props.before);
+      if (before !== this.props.before) {
+        map.moveLayer(layerId, this.props.before);
       }
     });
   }

diff --git a/src/image.tsx b/src/image.tsx
@@ -24,25 +24,25 @@ export interface Props {
 }
 
 class Image extends React.Component<Props> {
-  public UNSAFE_componentWillMount() {
+  public componentDidMount() {
     this.loadImage(this.props);
   }
 
   public componentWillUnmount() {
     Image.removeImage(this.props);
   }
 
-  public UNSAFE_componentWillReceiveProps(nextProps: Props) {
-    const { id } = this.props;
+  public componentDidUpdate(prevProps: Props) {
+    const { id } = prevProps;
 
-    if (nextProps.map !== this.props.map) {
+    if (prevProps.map !== this.props.map) {
       // Remove image from old map
       Image.removeImage(this.props);
     }
 
-    if (nextProps.map && !nextProps.map.hasImage(id)) {
+    if (this.props.map && !this.props.map.hasImage(id)) {
       // Add missing image to map
-      this.loadImage(nextProps);
+      this.loadImage(this.props);
     }
   }
 

diff --git a/src/layer-events-hoc.tsx b/src/layer-events-hoc.tsx
@@ -215,7 +215,7 @@ export function layerMouseTouchEvents(
       this.draggedChildren = undefined;
     };
 
-    public UNSAFE_componentWillMount() {
+    public componentDidMount() {
       const { map } = this.props;
 
       map.on('click', this.id, this.onClick);

diff --git a/src/layer.ts b/src/layer.ts
@@ -238,7 +238,7 @@ export default class Layer extends React.Component<Props> {
     }
   };
 
-  public UNSAFE_componentWillMount() {
+  public componentDidMount() {
     const { map } = this.props;
 
     this.initialize();
@@ -282,44 +282,52 @@ export default class Layer extends React.Component<Props> {
     }
   }
 
-  public UNSAFE_componentWillReceiveProps(props: Props) {
-    const { paint, layout, before, filter, id, minZoom, maxZoom } = this.props;
-    const { map } = this.props;
+  public componentDidUpdate(prevProps: Props) {
+    const {
+      paint,
+      layout,
+      before,
+      filter,
+      id,
+      minZoom,
+      maxZoom,
+      map,
+    } = prevProps;
 
-    if (!isEqual(props.paint, paint)) {
-      const paintDiff = diff(paint, props.paint);
+    if (!isEqual(this.props.paint, paint)) {
+      const paintDiff = diff(paint, this.props.paint);
 
       Object.keys(paintDiff).forEach(key => {
         map.setPaintProperty(id, key, paintDiff[key]);
       });
     }
 
-    if (!isEqual(props.layout, layout)) {
-      const layoutDiff = diff(layout, props.layout);
+    if (!isEqual(this.props.layout, layout)) {
+      const layoutDiff = diff(layout, this.props.layout);
 
       Object.keys(layoutDiff).forEach(key => {
         map.setLayoutProperty(id, key, layoutDiff[key]);
       });
     }
 
-    if (!isEqual(props.filter, filter)) {
-      map.setFilter(id, props.filter);
+    if (!isEqual(this.props.filter, filter)) {
+      map.setFilter(id, this.props.filter);
     }
 
-    if (before !== props.before) {
-      map.moveLayer(id, props.before);
+    if (before !== this.props.before) {
+      map.moveLayer(id, this.props.before);
     }
 
-    if (minZoom !== props.minZoom || maxZoom !== props.maxZoom) {
+    if (minZoom !== this.props.minZoom || maxZoom !== this.props.maxZoom) {
       // TODO: Fix when PR https://github.com/DefinitelyTyped/DefinitelyTyped/pull/22036 is merged
-      map.setLayerZoomRange(id, props.minZoom!, props.maxZoom!);
+      map.setLayerZoomRange(id, this.props.minZoom!, this.props.maxZoom!);
     }
 
     (Object.entries(eventToHandler) as Array<
       [keyof EventToHandlersType, keyof LayerEvents]
     >).forEach(([event, propName]) => {
-      const oldHandler = this.props[propName];
-      const newHandler = props[propName];
+      const oldHandler = prevProps[propName];
+      const newHandler = this.props[propName];
 
       if (oldHandler !== newHandler) {
         if (oldHandler) {

diff --git a/src/map-events.tsx b/src/map-events.tsx
@@ -131,11 +131,11 @@ export const listenEvents = (
 
 export const updateEvents = (
   listeners: Listeners,
-  nextProps: Partial<Events>,
+  currentProps: Partial<Events>,
   map: MapboxGl.Map
 ) => {
   const toListenOff = Object.keys(events).filter(
-    eventKey => listeners[eventKey] && typeof nextProps[eventKey] !== 'function'
+    eventKey => listeners[eventKey] && typeof currentProps[eventKey] !== 'function'
   );
 
   toListenOff.forEach(key => {
@@ -144,10 +144,10 @@ export const updateEvents = (
   });
 
   const toListenOn = Object.keys(events)
-    .filter(key => !listeners[key] && typeof nextProps[key] === 'function')
+    .filter(key => !listeners[key] && typeof currentProps[key] === 'function')
     .reduce((acc, next) => ((acc[next] = events[next]), acc), {});
 
-  const newListeners = listenEvents(toListenOn, nextProps, map);
+  const newListeners = listenEvents(toListenOn, currentProps, map);
 
   return { ...listeners, ...newListeners };
 };
diff --git a/src/map.tsx b/src/map.tsx
@@ -291,62 +291,62 @@ const ReactMapboxFactory = ({
       }
     }
 
-    public UNSAFE_componentWillReceiveProps(nextProps: Props & Events) {
+    public componentDidUpdate(prevProps: Props & Events) {
       const { map } = this.state;
       if (!map) {
         return null;
       }
 
       // Update event listeners
-      this.listeners = updateEvents(this.listeners, nextProps, map);
+      this.listeners = updateEvents(this.listeners, this.props, map);
 
       const center = map.getCenter();
       const zoom = map.getZoom();
       const bearing = map.getBearing();
       const pitch = map.getPitch();
 
       const didZoomUpdate =
-        this.props.zoom !== nextProps.zoom &&
-        (nextProps.zoom && nextProps.zoom[0]) !== zoom;
+        prevProps.zoom !== this.props.zoom &&
+        (this.props.zoom && this.props.zoom[0]) !== zoom;
 
       const didCenterUpdate =
-        this.props.center !== nextProps.center &&
-        ((nextProps.center && nextProps.center[0]) !== center.lng ||
-          (nextProps.center && nextProps.center[1]) !== center.lat);
+        prevProps.center !== this.props.center &&
+        ((this.props.center && this.props.center[0]) !== center.lng ||
+          (this.props.center && this.props.center[1]) !== center.lat);
 
       const didBearingUpdate =
-        this.props.bearing !== nextProps.bearing &&
-        (nextProps.bearing && nextProps.bearing[0]) !== bearing;
+        prevProps.bearing !== this.props.bearing &&
+        (this.props.bearing && this.props.bearing[0]) !== bearing;
 
       const didPitchUpdate =
-        this.props.pitch !== nextProps.pitch &&
-        (nextProps.pitch && nextProps.pitch[0]) !== pitch;
+        prevProps.pitch !== this.props.pitch &&
+        (this.props.pitch && this.props.pitch[0]) !== pitch;
 
-      if (nextProps.maxBounds) {
-        const didMaxBoundsUpdate = this.props.maxBounds !== nextProps.maxBounds;
+      if (this.props.maxBounds) {
+        const didMaxBoundsUpdate = prevProps.maxBounds !== this.props.maxBounds;
 
         if (didMaxBoundsUpdate) {
-          map.setMaxBounds(nextProps.maxBounds);
+          map.setMaxBounds(this.props.maxBounds);
         }
       }
 
-      if (nextProps.fitBounds) {
-        const { fitBounds } = this.props;
+      if (this.props.fitBounds) {
+        const { fitBounds } = prevProps;
 
         const didFitBoundsUpdate =
-          fitBounds !== nextProps.fitBounds || // Check for reference equality
-          nextProps.fitBounds.length !== (fitBounds && fitBounds.length) || // Added element
+          fitBounds !== this.props.fitBounds || // Check for reference equality
+          this.props.fitBounds.length !== (fitBounds && fitBounds.length) || // Added element
           !!fitBounds.filter((c, i) => {
             // Check for equality
-            const nc = nextProps.fitBounds && nextProps.fitBounds[i];
+            const nc = this.props.fitBounds && this.props.fitBounds[i];
             return c[0] !== (nc && nc[0]) || c[1] !== (nc && nc[1]);
           })[0];
 
         if (
           didFitBoundsUpdate ||
-          !isEqual(this.props.fitBoundsOptions, nextProps.fitBoundsOptions)
+          !isEqual(prevProps.fitBoundsOptions, this.props.fitBoundsOptions)
         ) {
-          map.fitBounds(nextProps.fitBounds, nextProps.fitBoundsOptions, {
+          map.fitBounds(this.props.fitBounds, this.props.fitBoundsOptions, {
             fitboundUpdate: true
           });
         }
@@ -358,21 +358,21 @@ const ReactMapboxFactory = ({
         didBearingUpdate ||
         didPitchUpdate
       ) {
-        const mm: string = nextProps.movingMethod || defaultMovingMethod;
-        const { flyToOptions, animationOptions } = nextProps;
+        const mm: string = this.props.movingMethod || defaultMovingMethod;
+        const { flyToOptions, animationOptions } = this.props;
 
         map[mm]({
           ...animationOptions,
           ...flyToOptions,
-          zoom: didZoomUpdate && nextProps.zoom ? nextProps.zoom[0] : zoom,
-          center: didCenterUpdate ? nextProps.center : center,
-          bearing: didBearingUpdate ? nextProps.bearing : bearing,
-          pitch: didPitchUpdate ? nextProps.pitch : pitch
+          zoom: didZoomUpdate && this.props.zoom ? this.props.zoom[0] : zoom,
+          center: didCenterUpdate ? this.props.center : center,
+          bearing: didBearingUpdate ? this.props.bearing : bearing,
+          pitch: didPitchUpdate ? this.props.pitch : pitch
         });
       }
 
-      if (!isEqual(this.props.style, nextProps.style)) {
-        map.setStyle(nextProps.style);
+      if (!isEqual(prevProps.style, this.props.style)) {
+        map.setStyle(this.props.style);
       }
 
       return null;