Allow to disable viewport features calculation (#164)

CartoDB · Aug 3, 2021 · 57aaf18 · 57aaf18
1 parent f44bc9a
commit 57aaf18
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 21 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## Not released
 
+- **Breaking change**: Allow to disable viewport features calculation. useCartoLayerProps uses now object destructuring. [#164](https://github.com/CartoDB/carto-react/pull/164)
 - Rename Credentials exported types [#159](https://github.com/CartoDB/carto-react/pull/159)
 - Improve types [#160](https://github.com/CartoDB/carto-react/pull/160)
 - Adapt Legend widget to work without children [#161](https://github.com/CartoDB/carto-react/pull/161)

diff --git a/packages/react-api/__tests__/hooks/useCartoLayerProps.test.js b/packages/react-api/__tests__/hooks/useCartoLayerProps.test.js
@@ -29,7 +29,7 @@ describe('useCartoLayerProps', () => {
           type: MAP_TYPES.TILESET
         };
 
-        const { result } = renderHook(() => useCartoLayerProps(source));
+        const { result } = renderHook(() => useCartoLayerProps({ source }));
 
         expect(Object.keys(result.current)).toEqual([
           'binary',
@@ -46,7 +46,7 @@ describe('useCartoLayerProps', () => {
           type: MAP_TYPES.QUERY
         };
 
-        const { result } = renderHook(() => useCartoLayerProps(source));
+        const { result } = renderHook(() => useCartoLayerProps({ source }));
 
         expect(Object.keys(result.current)).toEqual([
           'binary',
@@ -63,7 +63,7 @@ describe('useCartoLayerProps', () => {
           type: MAP_TYPES.TABLE
         };
 
-        const { result } = renderHook(() => useCartoLayerProps(source));
+        const { result } = renderHook(() => useCartoLayerProps({ source }));
 
         expect(Object.keys(result.current)).toEqual([
           'binary',
@@ -82,7 +82,7 @@ describe('useCartoLayerProps', () => {
           type: MAP_TYPES.TILESET
         };
 
-        const { result } = renderHook(() => useCartoLayerProps(source));
+        const { result } = renderHook(() => useCartoLayerProps({ source }));
 
         expect(Object.keys(result.current)).toEqual([
           'binary',
@@ -99,7 +99,7 @@ describe('useCartoLayerProps', () => {
           type: MAP_TYPES.QUERY
         };
 
-        const { result } = renderHook(() => useCartoLayerProps(source));
+        const { result } = renderHook(() => useCartoLayerProps({ source }));
 
         expect(Object.keys(result.current)).toEqual(['onDataLoad', ...COMMON_PROPS]);
       });
@@ -112,7 +112,7 @@ describe('useCartoLayerProps', () => {
           type: MAP_TYPES.TABLE
         };
 
-        const { result } = renderHook(() => useCartoLayerProps(source));
+        const { result } = renderHook(() => useCartoLayerProps({ source }));
 
         expect(Object.keys(result.current)).toEqual(['onDataLoad', ...COMMON_PROPS]);
       });
@@ -121,7 +121,7 @@ describe('useCartoLayerProps', () => {
 
   describe('should has correct filter configurations', () => {
     test('uniqueIdProperty should be undefined', () => {
-      const { result } = renderHook(() => useCartoLayerProps());
+      const { result } = renderHook(() => useCartoLayerProps({}));
 
       expect(result.current.uniqueIdProperty).toBeUndefined();
     });
@@ -134,7 +134,7 @@ describe('useCartoLayerProps', () => {
         type: MAP_TYPES.TILESET
       };
 
-      const { result } = renderHook(() => useCartoLayerProps(source));
+      const { result } = renderHook(() => useCartoLayerProps({ source }));
 
       expect(result.current.onViewportLoad).toBeInstanceOf(Function);
     });
@@ -147,7 +147,7 @@ describe('useCartoLayerProps', () => {
         type: MAP_TYPES.TILESET
       };
 
-      const { result } = renderHook(() => useCartoLayerProps(source));
+      const { result } = renderHook(() => useCartoLayerProps({ source }));
 
       expect(result.current.binary).toBe(true);
     });
@@ -160,38 +160,38 @@ describe('useCartoLayerProps', () => {
         type: MAP_TYPES.QUERY
       };
 
-      const { result } = renderHook(() => useCartoLayerProps(source));
+      const { result } = renderHook(() => useCartoLayerProps({ source }));
 
       expect(result.current.onDataLoad).toBeInstanceOf(Function);
     });
 
     test('getFilterValue should be a function', () => {
-      const { result } = renderHook(() => useCartoLayerProps());
+      const { result } = renderHook(() => useCartoLayerProps({}));
 
       expect(result.current.getFilterValue).toBeInstanceOf(Function);
     });
 
     test('filter range should be between 1 and 1', () => {
-      const { result } = renderHook(() => useCartoLayerProps());
+      const { result } = renderHook(() => useCartoLayerProps({}));
 
       expect(result.current.filterRange).toEqual([1, 1]);
     });
 
     test('extensions should have an unique instance of DataFilterExtension', () => {
-      const { result } = renderHook(() => useCartoLayerProps());
+      const { result } = renderHook(() => useCartoLayerProps({}));
 
       expect(result.current.extensions.length).toBe(1);
       expect(result.current.extensions[0]).toBeInstanceOf(DataFilterExtension);
     });
 
     test('filter size should be 1', () => {
-      const { result } = renderHook(() => useCartoLayerProps());
+      const { result } = renderHook(() => useCartoLayerProps({}));
 
       expect(result.current.extensions[0].opts.filterSize).toEqual(1);
     });
 
     test('getFilterValue trigger should be present', () => {
-      const { result } = renderHook(() => useCartoLayerProps());
+      const { result } = renderHook(() => useCartoLayerProps({}));
 
       expect(result.current.updateTriggers).toHaveProperty('getFilterValue');
     });

diff --git a/packages/react-api/src/hooks/useCartoLayerProps.d.ts b/packages/react-api/src/hooks/useCartoLayerProps.d.ts
@@ -1,6 +1,9 @@
 import { SourceProps, UseCartoLayerFilterProps } from '../types';
 
-export default function useCartoLayerProps(
+interface UseCartoLayerProps {
   source: SourceProps & { id: string },
   uniqueIdProperty?: string
-): UseCartoLayerFilterProps
+  viewportFeatures?: boolean
+}
+
+export default function useCartoLayerProps(props: UseCartoLayerProps): UseCartoLayerFilterProps
diff --git a/packages/react-api/src/hooks/useCartoLayerProps.js b/packages/react-api/src/hooks/useCartoLayerProps.js
@@ -3,7 +3,11 @@ import { _buildFeatureFilter } from '@carto/react-core';
 import useViewportFeatures from './useViewportFeatures';
 import { MAP_TYPES, API_VERSIONS } from '@deck.gl/carto';
 
-export default function useCartoLayerProps(source, uniqueIdProperty) {
+export default function useCartoLayerProps({
+  source,
+  uniqueIdProperty,
+  viewportFeatures = true
+}) {
   const [onViewportLoad, onDataLoad] = useViewportFeatures(source, uniqueIdProperty);
 
   let props = {};
@@ -14,17 +18,18 @@ export default function useCartoLayerProps(source, uniqueIdProperty) {
   ) {
     props = {
       binary: true,
-      onViewportLoad
+      onViewportLoad: viewportFeatures ? onViewportLoad : null
     };
   } else if (source?.type === MAP_TYPES.QUERY || source?.type === MAP_TYPES.TABLE) {
     props = {
-      onDataLoad
+      // empty function should be removed by null, but need a fix in CartoLayer
+      onDataLoad: viewportFeatures ? onDataLoad : () => null
     };
   }
 
   return {
     ...props,
-    uniqueIdProperty: uniqueIdProperty,
+    uniqueIdProperty,
     data: source && source.data,
     type: source && source.type,
     connection: source && source.connection,