Merge pull request #152 from scootnetworks/jluxenberg/fix-feature-rem…

…oval-on-layer

call setData when children disappear

src/__tests__/layer.test.tsx

@@ -7,12 +7,18 @@ describe('Layer', () => {
   let LayerWithContext: any;
   let addLayerMock = jest.fn();
   let addSourceMock = jest.fn();
+  let setDataMock = jest.fn();
   let children: any[];
+  let childrenWithOneFeature: any[];
+  let feature: Object;
 
   beforeEach(() => {
     addLayerMock = jest.fn();
     addSourceMock = jest.fn();
+    setDataMock = jest.fn();
+    feature = { coordinates: [-123, 45] };
     children = [{ props: {}}];
+    childrenWithOneFeature = [{ props: feature }];
 
     LayerWithContext = withContext({
       map: React.PropTypes.object
@@ -21,7 +27,7 @@ describe('Layer', () => {
         addSource: addSourceMock,
         addLayer: addLayerMock,
         on: jest.fn(),
-        getSource: jest.fn().mockReturnValue({ setData: jest.fn() })
+        getSource: jest.fn().mockReturnValue({ setData: setDataMock })
       }
     }))(Layer);
   });
@@ -58,4 +64,35 @@ describe('Layer', () => {
     }]);
   });
 
+  it('Should set features based on children', () => {
+    const layer = mount(
+      <LayerWithContext
+        children={childrenWithOneFeature}
+      /> as React.ReactElement<any>
+    );
+
+    expect(setDataMock.mock.calls[0]).toEqual([{
+      'type': 'FeatureCollection',
+      'features': [{
+        'geometry': {...feature, 'type': 'Point'},
+        'properties': {id: 0},
+        'type': 'Feature'
+      }]
+    }])
+  });
+
+  it('Should set features to empty array when children disappear', () => {
+    const layer = mount(
+      <LayerWithContext
+        children={childrenWithOneFeature}
+      /> as React.ReactElement<any>
+    );
+
+    layer.setProps({ children: undefined });
+
+    expect(setDataMock.mock.calls[1]).toEqual([{
+      'type': 'FeatureCollection',
+      'features': []
+    }])
+  });
 });

src/layer.ts

@@ -208,20 +208,17 @@ export default class Layer extends React.PureComponent<Props, void> {
 
   public render() {
     const { map } = this.context;
+    const children = ([] as any).concat(this.props.children || []);
 
-    if (this.props.children) {
-      const children = ([] as any).concat(this.props.children);
+    const features = children
+      .map(({ props }: any, id: string) => this.makeFeature(props, id))
+      .filter(Boolean);
 
-      const features = children
-        .map(({ props }: any, id: string) => this.makeFeature(props, id))
-        .filter(Boolean);
-
-      const source = map.getSource(this.props.sourceId || this.id);
-      (source as MapboxGL.GeoJSONSource).setData({
-        type: 'FeatureCollection',
-        features
-      });
-    }
+    const source = map.getSource(this.props.sourceId || this.id);
+    (source as MapboxGL.GeoJSONSource).setData({
+      type: 'FeatureCollection',
+      features
+    });
 
     return null;
   }