@carto/kepler.gl 0.0.77 → 0.0.78-0

package/src/utils/layer-utils.ts

@@ -0,0 +1,249 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import {FindDefaultLayerPropsReturnValue, OVERLAY_TYPE} from 'layers/base-layer';
+import {GEOCODER_LAYER_ID, MASK_LAYER_ID} from 'constants/default-settings';
+import {Layer, LayerClassesType} from 'layers';
+import {VisState, TooltipField, CompareType, SplitMapLayers} from 'reducers/vis-state-updaters';
+import KeplerTable, {Field} from './table-utils/kepler-table';
+import {MaskExtension} from '@deck.gl/extensions';
+
+export type LayersToRender = {
+  [layerId: string]: boolean;
+};
+
+export type LayerHoverProp = {
+  data: any[];
+  fields: Field[];
+  fieldsToShow: TooltipField[];
+  layer: Layer;
+  primaryData?: any[];
+  compareType?: CompareType;
+};
+
+/**
+ * Find default layers from fields
+ */
+export function findDefaultLayer(dataset: KeplerTable, layerClasses: LayerClassesType): Layer[] {
+  if (!dataset) {
+    return [];
+  }
+  const layerProps = (Object.keys(layerClasses) as Array<keyof LayerClassesType>).reduce(
+    (previous, lc) => {
+      const result: FindDefaultLayerPropsReturnValue =
+        typeof layerClasses[lc].findDefaultLayerProps === 'function'
+          ? layerClasses[lc].findDefaultLayerProps(dataset, previous)
+          : {props: []};
+
+      const props = Array.isArray(result) ? result : result.props || [];
+      const foundLayers = result.foundLayers || previous;
+
+      return foundLayers.concat(
+        props.map(p => ({
+          ...p,
+          type: lc,
+          dataId: dataset.id
+        }))
+      );
+    },
+    [] as LayerClassesType[keyof LayerClassesType][]
+  );
+
+  // go through all layerProps to create layer
+  return layerProps.map(props => {
+    // @ts-expect-error TODO: checking props.type !== null
+    const layer = new layerClasses[props.type](props);
+    return typeof layer.setInitialLayerConfig === 'function' && dataset.dataContainer
+      ? layer.setInitialLayerConfig(dataset)
+      : layer;
+  });
+}
+
+/**
+ * calculate layer data based on layer type, col Config,
+ * return updated layer if colorDomain, dataMap has changed
+ */
+export function calculateLayerData(
+  layer: Layer,
+  state: VisState,
+  oldLayerData?: any
+): {
+  layerData: any;
+  layer: Layer;
+} {
+  const {type} = layer;
+
+  if (!type || !layer.hasAllColumns() || !layer.config.dataId) {
+    return {layer, layerData: {}};
+  }
+
+  const layerData = layer.formatLayerData(state.datasets, oldLayerData);
+  layer.calculateHexColumnLegend(state.datasets);
+  return {layerData, layer};
+}
+
+/**
+ * Calculate props passed to LayerHoverInfo
+ * @type {typeof import('./layer-utils').getLayerHoverProp}
+ */
+export function getLayerHoverProp({
+  interactionConfig,
+  hoverInfo,
+  layers,
+  layersToRender,
+  datasets
+}: {
+  interactionConfig: VisState['interactionConfig'];
+  hoverInfo: VisState['hoverInfo'];
+  layers: VisState['layers'];
+  layersToRender: LayersToRender;
+  datasets: VisState['datasets'];
+}): LayerHoverProp | null {
+  if (interactionConfig.tooltip.enabled && hoverInfo && hoverInfo.picked) {
+    // if anything hovered
+    const {object, layer: overlay} = hoverInfo;
+
+    // deckgl layer to kepler-gl layer
+    const layer = layers[overlay.props.idx];
+
+    if (object && layer && layer.getHoverData && layersToRender[layer.id]) {
+      // if layer is visible and have hovered data
+      const {
+        config: {dataId}
+      } = layer;
+      if (!dataId) {
+        return null;
+      }
+      const {dataContainer, fields} = datasets[dataId];
+      const data = layer.getHoverData(object, dataContainer, fields);
+      const fieldsToShow = interactionConfig.tooltip.config.fieldsToShow[dataId];
+
+      return {
+        // @ts-expect-error
+        data,
+        fields,
+        fieldsToShow,
+        layer
+      };
+    }
+  }
+
+  return null;
+}
+
+export function renderDeckGlLayer(props: any, layerCallbacks: {[key: string]: any}, idx: number) {
+  const {
+    datasets,
+    layers,
+    layerData,
+    hoverInfo,
+    clicked,
+    mapState,
+    interactionConfig,
+    animationConfig,
+    mapLayers,
+    maskPolygon,
+    popupSettings
+  } = props;
+  const layer = layers[idx];
+  const data = layerData[idx];
+  const {gpuFilter} = datasets[layer.config.dataId] || {};
+  const objectHovered = clicked || hoverInfo;
+  const visible = !mapLayers || (mapLayers && mapLayers[layer.id]);
+
+  layer.interactivitySettings = popupSettings?.layers[layer.id];
+  // Layer is Layer class
+  return layer.renderLayer({
+    data,
+    gpuFilter,
+    idx,
+    interactionConfig,
+    layerCallbacks,
+    mapState,
+    animationConfig,
+    objectHovered,
+    visible,
+    maskPolygon,
+    popupSettings
+  });
+}
+
+export function isLayerRenderable(layer: Layer, layerData) {
+  return layer.id !== GEOCODER_LAYER_ID && layer.shouldRenderLayer(layerData);
+}
+
+export function isLayerVisible(layer, mapLayers) {
+  return (
+    layer.config.isVisible &&
+    // if layer.id is not in mapLayers, don't render it
+    (!mapLayers || (mapLayers && mapLayers[layer.id]))
+  );
+}
+
+// Prepare a dict of layers rendered by the deck.gl
+// Note, isVisible: false layer is passed to deck.gl here
+// return {[id]: true \ false}
+export function prepareLayersForDeck(
+  layers: Layer[],
+  layerData: VisState['layerData']
+): {
+  [key: string]: boolean;
+} {
+  return layers.reduce(
+    (accu, layer, idx) => ({
+      ...accu,
+      [layer.id]:
+        isLayerRenderable(layer, layerData[idx]) && layer.overlayType === OVERLAY_TYPE.deckgl
+    }),
+    {}
+  );
+}
+
+// Prepare a dict of rendered layers rendered in the map
+// This includes only the visibile layers for single map view and split map view
+// return {[id]: true \ false}
+export function prepareLayersToRender(
+  layers: Layer[],
+  layerData: VisState['layerData'],
+  mapLayers?: SplitMapLayers
+): {
+  [key: string]: boolean;
+} {
+  return layers.reduce(
+    (accu, layer, idx) => ({
+      ...accu,
+      [layer.id]: isLayerRenderable(layer, layerData[idx]) && isLayerVisible(layer, mapLayers)
+    }),
+    {}
+  );
+}
+
+const maskExtension = new MaskExtension();
+
+export function getMaskExtensionProps(maskPolygon) {
+  return {
+    maskId: Boolean(maskPolygon && maskPolygon.length) && MASK_LAYER_ID,
+    extensions: [maskExtension]
+  };
+}
+
+export function negateAccessor(accessor) {
+  return typeof accessor === 'function' ? (d, i) => -accessor(d, i) : -accessor;
+}

package/src/utils/map-style-utils/mapbox-gl-style-editor.ts

@@ -0,0 +1,227 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import memoize from 'lodash.memoize';
+import cloneDeep from 'lodash.clonedeep';
+import {DEFAULT_LAYER_GROUPS, DEFAULT_MAPBOX_API_URL} from 'constants/default-settings';
+import {BaseMapStyle, LayerGroup, MapState} from 'reducers';
+
+const mapUrlRg = /^mapbox:\/\/styles\/[-a-z0-9]{2,256}\/[-a-z0-9]{2,256}/;
+const httpRg = /^(?=(http:|https:))/;
+
+export function getDefaultLayerGroupVisibility({layerGroups = []}: {layerGroups: LayerGroup[]}) {
+  return layerGroups.reduce(
+    (accu, layer) => ({
+      ...accu,
+      [layer.slug]: layer.defaultVisibility
+    }),
+    {}
+  );
+}
+
+const resolver = ({
+  id,
+  mapStyle,
+  visibleLayerGroups = {}
+}: {
+  id?: string;
+  mapStyle: BaseMapStyle;
+  visibleLayerGroups: {[id: string]: LayerGroup | boolean} | false;
+}) =>
+  `${id}:${Object.keys(visibleLayerGroups)
+    .filter(d => visibleLayerGroups[d])
+    .sort()
+    .join('-')}`;
+
+/**
+ * Edit preset map style to keep only visible layers
+ *
+ * @param mapStyle - preset map style
+ * @param visibleLayerGroups - visible layers of top map
+ * @returns top map style
+ */
+export const editTopMapStyle = memoize(
+  ({
+    mapStyle,
+    visibleLayerGroups
+  }: {
+    mapStyle: BaseMapStyle;
+    visibleLayerGroups: {[id: string]: LayerGroup | boolean} | false;
+  }) => {
+    const visibleFilters = (mapStyle.layerGroups || [])
+      .filter(lg => visibleLayerGroups[lg.slug])
+      .map(lg => lg.filter);
+
+    // if top map
+    // keep only visible layers
+    // @ts-expect-error
+    const filteredLayers = mapStyle.style.layers.filter(layer =>
+      visibleFilters.some(match => match(layer))
+    );
+
+    return {
+      ...mapStyle.style,
+      layers: filteredLayers
+    };
+  },
+  resolver
+);
+
+/**
+ * Edit preset map style to filter out invisible layers
+ *
+ * @param {Object} mapStyle - preset map style
+ * @param {Object} visibleLayerGroups - visible layers of bottom map
+ * @returns {Object} bottom map style
+ */
+export const editBottomMapStyle = memoize(({id, mapStyle, visibleLayerGroups}) => {
+  const invisibleFilters = (mapStyle.layerGroups || [])
+    .filter(lg => !visibleLayerGroups[lg.slug])
+    .map(lg => lg.filter);
+
+  // if bottom map
+  // filter out invisible layers
+  const filteredLayers = mapStyle.style.layers.filter(layer =>
+    invisibleFilters.every(match => !match(layer))
+  );
+
+  return {
+    ...mapStyle.style,
+    layers: filteredLayers
+  };
+}, resolver);
+
+// valid style url
+// mapbox://styles/uberdata/cjfyl03kp1tul2smf5v2tbdd4
+// lowercase letters, numbers and dashes only.
+export function isValidStyleUrl(url) {
+  return typeof url === 'string' && Boolean(url.match(mapUrlRg) || url.match(httpRg));
+}
+
+export function getStyleDownloadUrl(styleUrl, accessToken, mapboxApiUrl) {
+  if (styleUrl.startsWith('http')) {
+    return styleUrl;
+  }
+
+  // mapbox://styles/jckr/cjhcl0lxv13di2rpfoytdbdyj
+  if (styleUrl.startsWith('mapbox://styles')) {
+    const styleId = styleUrl.replace('mapbox://styles/', '');
+
+    // https://api.mapbox.com/styles/v1/heshan0131/cjg1bfumo1cwm2rlrjxkinfgw?pluginName=Keplergl&access_token=<token>
+    return `${mapboxApiUrl ||
+      DEFAULT_MAPBOX_API_URL}/styles/v1/${styleId}?pluginName=Keplergl&access_token=${accessToken}`;
+  }
+
+  // style url not recognized
+  return null;
+}
+
+/**
+ * Generate static map image from style Url to be used as icon
+ * @param param
+ * @param param.styleUrl
+ * @param param.mapboxApiAccessToken
+ * @param param.mapboxApiUrl
+ * @param param.mapState
+ * @param param.mapW
+ * @param param.mapH
+ */
+export function getStyleImageIcon({
+  styleUrl,
+  mapboxApiAccessToken,
+  mapboxApiUrl = DEFAULT_MAPBOX_API_URL,
+  mapState = {
+    longitude: -122.3391,
+    latitude: 37.7922,
+    zoom: 9
+  },
+  mapW = 400,
+  mapH = 300
+}: {
+  styleUrl: string;
+  mapboxApiAccessToken: string;
+  mapboxApiUrl?: string;
+  mapState?: Partial<MapState>;
+  mapW?: number;
+  mapH?: number;
+}) {
+  const styleId = styleUrl.replace('mapbox://styles/', '');
+
+  return (
+    `${mapboxApiUrl}/styles/v1/${styleId}/static/` +
+    `${mapState.longitude},${mapState.latitude},${mapState.zoom},0,0/` +
+    `${mapW}x${mapH}` +
+    `?access_token=${mapboxApiAccessToken}&logo=false&attribution=false`
+  );
+}
+
+export function scaleMapStyleByResolution(mapboxStyle, scale) {
+  if (scale !== 1 && mapboxStyle) {
+    const labelLayerGroup = DEFAULT_LAYER_GROUPS.find(lg => lg.slug === 'label');
+    // @ts-ignore
+    const {filter: labelLayerFilter} = labelLayerGroup;
+    const zoomOffset = Math.log2(scale);
+
+    const copyStyle = cloneDeep(mapboxStyle);
+    (copyStyle.layers || []).forEach(d => {
+      // edit minzoom and maxzoom
+      if (d.maxzoom) {
+        d.maxzoom = Math.max(d.maxzoom + zoomOffset, 1);
+      }
+
+      if (d.minzoom) {
+        d.minzoom = Math.max(d.minzoom + zoomOffset, 1);
+      }
+
+      // edit text size
+      if (labelLayerFilter(d)) {
+        if (d.layout && d.layout['text-size'] && Array.isArray(d.layout['text-size'].stops)) {
+          d.layout['text-size'].stops.forEach(stop => {
+            // zoom
+            stop[0] = Math.max(stop[0] + zoomOffset, 1);
+            // size
+            stop[1] *= scale;
+          });
+        }
+      }
+    });
+
+    return copyStyle;
+  }
+
+  return mapboxStyle;
+}
+
+/**
+ * When switch to a new style, try to keep current layer group visibility
+ * by merging default and current
+ * @param {Object} defaultLayerGroup
+ * @param {Object} currentLayerGroup
+ * @return {Object} mergedLayerGroups
+ */
+export function mergeLayerGroupVisibility(defaultLayerGroup, currentLayerGroup) {
+  return Object.keys(defaultLayerGroup).reduce(
+    (accu, key) => ({
+      ...accu,
+      ...(currentLayerGroup.hasOwnProperty(key) ? {[key]: currentLayerGroup[key]} : {})
+    }),
+    defaultLayerGroup
+  );
+}

package/src/utils/notifications-utils.ts

@@ -0,0 +1,89 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import {generateHashId} from './utils';
+
+import {
+  DEFAULT_NOTIFICATION_MESSAGE,
+  DEFAULT_NOTIFICATION_TOPICS,
+  DEFAULT_NOTIFICATION_TYPES,
+  DEFAULT_UUID_COUNT
+} from 'constants/default-settings';
+
+import {BUG_REPORT_LINK} from 'constants/user-guides';
+
+/**
+ * Creates a notification
+ * @param opt
+ * @param opt.message - Message to display during the notification
+ * @param opt.type - The type of message. One of DEFAULT_NOTIFICATION_TYPES
+ * @param opt.topic - The topic the notification belongs to. One of DEFAULT_NOTIFICATION_TOPICS
+ * @param opt.id optional id for notification. If not provided it will be generated by the method
+ * @param opt.options - Extra parameters to store as part of hte notification
+ * @returns
+ */
+export function createNotification({
+  message = DEFAULT_NOTIFICATION_MESSAGE,
+  type = DEFAULT_NOTIFICATION_TYPES.info,
+  topic = DEFAULT_NOTIFICATION_TOPICS.global,
+  id = generateHashId(DEFAULT_UUID_COUNT),
+  ...options
+}: {
+  message?: string;
+  type?: string;
+  topic?: string;
+  id?: string;
+  options?: any;
+}) {
+  return {
+    ...options,
+    id,
+    message,
+    type,
+    topic
+  };
+}
+
+/**
+ * Creates an error notification
+ * @param options
+ * @returns {{topic, id, message, type: (null|number)}}
+ */
+export const errorNotification = options => ({
+  ...createNotification(options),
+  type: DEFAULT_NOTIFICATION_TYPES.error
+});
+
+/**
+ * Creates a success notification
+ * @param options
+ * @returns {{topic, id, message, type: null}}
+ */
+export const successNotification = options => ({
+  ...createNotification(options),
+  type: DEFAULT_NOTIFICATION_TYPES.success
+});
+
+export const exportImageError = options =>
+  errorNotification({
+    ...options,
+    topic: DEFAULT_NOTIFICATION_TOPICS.global,
+    message: `Failed to export image, please take a screenshot of the javascript console, report the with [this link](${BUG_REPORT_LINK}) `
+  });

package/src/utils/observe-dimensions.ts

@@ -0,0 +1,127 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import throttle from 'lodash.throttle';
+import {useEffect, useRef, useState} from 'react';
+import ResizeObserver from 'resize-observer-polyfill';
+import {RefObject} from 'react';
+
+export interface Dimensions {
+  readonly height: number;
+  readonly width: number;
+}
+
+const DEFAULT_THROTTLE_DELAY = 100;
+
+// Using a single ResizeObserver for all elements can be 10x
+// more performant than using a separate ResizeObserver per element
+// https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/z6ienONUb5A/F5-VcUZtBAAJ
+let _observerRegistry;
+
+function getObserverRegistry() {
+  if (_observerRegistry === undefined) {
+    const callbacks = new Map();
+    const resizeObserver = new ResizeObserver((entries, observer) => {
+      for (const entry of entries) {
+        callbacks.get(entry.target)?.(entry, observer);
+      }
+    });
+    _observerRegistry = {
+      subscribe(target, callback) {
+        resizeObserver.observe(target);
+        callbacks.set(target, callback);
+      },
+      unsubscribe(target) {
+        resizeObserver.unobserve(target);
+        callbacks.delete(target);
+      }
+    };
+  }
+  return _observerRegistry;
+}
+
+export function observeDimensions(
+  target: Element,
+  handleResize: (size: Dimensions | null) => void,
+  throttleDelay = DEFAULT_THROTTLE_DELAY
+) {
+  const registry = getObserverRegistry();
+  const handler = throttleDelay > 0 ? throttle(handleResize, throttleDelay) : handleResize;
+  registry.subscribe(target, entry => handler(getSize(target, entry)));
+}
+
+export function unobserveDimensions(target: Element) {
+  const registry = getObserverRegistry();
+  registry.unsubscribe(target);
+}
+
+function getSize(node, entry): Dimensions | null {
+  if (entry.contentRect) {
+    const {width, height} = entry.contentRect;
+    return {width, height};
+  }
+  if (node.getBoundingClientRect) {
+    const {width, height} = node.getBoundingClientRect();
+    return {width, height};
+  }
+  return null;
+}
+
+/**
+ * Usage example:
+ * const [ref, dimensions] = useDimensions<HTMLDivElement>();
+ *
+ * @param throttleDelay
+ * @returns
+ */
+export default function useDimensions<T extends Element>(
+  throttleDelay = DEFAULT_THROTTLE_DELAY
+): [RefObject<T>, Dimensions | null] {
+  const ref = useRef<T>(null);
+  const [size, setSize] = useState(null);
+
+  useEffect(() => {
+    const {current} = ref;
+    if (!current) {
+      return;
+    }
+
+    let didUnobserve = false;
+    observeDimensions(
+      current,
+      entry => {
+        if (didUnobserve) return;
+        const newSize = getSize(current, entry);
+        if (newSize) {
+          // @ts-ignore
+          setSize(newSize);
+        }
+      },
+      throttleDelay
+    );
+    return () => {
+      didUnobserve = true;
+      unobserveDimensions(current);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [throttleDelay]);
+
+  return [ref, size];
+}