@widergy/energy-ui 3.158.1 → 3.159.0

package/dist/esm/components/UTLoading/components/AnimatedCircles/styles.module.scss

@@ -0,0 +1,75 @@
+$circle-size: 12px;
+$circles-animation-duration: 280ms;
+$default-container-background-color: #FFFFFF;
+$fade-in-animation: fadeIn 0.7s ease-in-out forwards;
+$opacity_high: 1;
+$opacity_low: 0.33;
+$opacity_medium: 0.66;
+$translate-down-value: 0;
+$translate-up-value: -8.4px;
+
+.container {
+  align-items: center;
+  background-color: var(--light01, $default-container-background-color);
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  justify-content: center;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 999;
+}
+
+.imageStyle {
+  animation: $fade-in-animation;
+  height: 64px;
+  margin-bottom: 36px;
+  object-fit: contain;
+}
+
+.circlesContainer {
+  animation: $fade-in-animation;
+  display: flex;
+  flex-direction: row;
+  grid-gap: 6px;
+}
+
+.circle {
+  border-radius: 50%;
+  height: $circle-size;
+  opacity: $opacity_low;
+  transform: translateY($translate-down-value);
+  transition:
+    transform $circles-animation-duration ease-in-out,
+    opacity $circles-animation-duration ease-in-out;
+  width: $circle-size;
+  will-change: transform, opacity;
+}
+
+.translateUp {
+  transform: translateY($translate-up-value);
+}
+
+.translateDown {
+  transform: translateY($translate-down-value);
+}
+
+.opacityMedium {
+  opacity: $opacity_medium;
+}
+
+.opacityHigh {
+  opacity: $opacity_high;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}

package/dist/esm/components/UTLoading/components/AnimatedCircles/theme.js

@@ -0,0 +1,14 @@
+export const retrieveStyle = _ref => {
+  var _theme$Palette, _theme$Palette$action;
+  let {
+    theme
+  } = _ref;
+  return {
+    containerBackgroundColor: {
+      backgroundColor: (_theme$Palette = theme.Palette) === null || _theme$Palette === void 0 ? void 0 : _theme$Palette.light['01']
+    },
+    defaultCircleColor: {
+      backgroundColor: ((_theme$Palette$action = theme.Palette.actions) === null || _theme$Palette$action === void 0 ? void 0 : _theme$Palette$action.neutral['04']) || theme.Palette.neutral['04']
+    }
+  };
+};

package/dist/esm/components/UTLoading/components/Spinner/index.js

@@ -0,0 +1,42 @@
+import React, { Fragment } from 'react';
+import { bool, string, number } from 'prop-types';
+import Loading from '../../../Loading';
+const Spinner = _ref => {
+  let {
+    children,
+    className,
+    loading,
+    preventUnmount,
+    size,
+    text,
+    textClassName,
+    thickness,
+    wrapperClassName
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Fragment, null, loading && /*#__PURE__*/React.createElement(Loading, {
+    className: className,
+    size: size,
+    text: text,
+    textClassName: textClassName,
+    thickness: thickness
+  }), preventUnmount ? /*#__PURE__*/React.createElement("div", {
+    className: wrapperClassName,
+    style: loading ? {
+      display: 'none'
+    } : {}
+  }, children) : !loading && children);
+};
+Spinner.defaultProps = {
+  preventUnmount: false
+};
+Spinner.propTypes = {
+  className: string,
+  loading: bool,
+  preventUnmount: bool,
+  size: number,
+  text: string,
+  textClassName: string,
+  thickness: number,
+  wrapperClassName: string
+};
+export default Spinner;

package/dist/esm/components/UTLoading/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { bool, node, number, string } from 'prop-types';
+import AnimatedCircles from './components/AnimatedCircles';
+import Spinner from './components/Spinner';
+const UTLoading = props => {
+  const {
+    useUtilityLoading
+  } = props || {};
+  return useUtilityLoading ? /*#__PURE__*/React.createElement(AnimatedCircles, props) : /*#__PURE__*/React.createElement(Spinner, props);
+};
+UTLoading.propTypes = {
+  children: node,
+  className: string,
+  color: string,
+  loading: bool,
+  Logo: string,
+  preventUnmount: bool,
+  size: number,
+  text: string,
+  textClassName: string,
+  thickness: number,
+  useUtilityLoading: bool,
+  wrapperClassName: string
+};
+export default UTLoading;

package/dist/esm/components/UTMap/components/GoogleMaps/constants.js

@@ -0,0 +1,11 @@
+import Colors from '../../../../scss/variables/colors.module.scss';
+export const googleMapDefaultOptions = {
+  mapTypeControl: false
+};
+export const polygonDefaultOptions = (colorPolygon, colorBorderPolygon) => ({
+  strokeWeight: 2,
+  strokeOpacity: 0.8,
+  strokeColor: colorBorderPolygon || Colors.map,
+  fillColor: colorPolygon || Colors.map,
+  fillOpacity: 0.35
+});

package/dist/esm/components/UTMap/components/GoogleMaps/index.js

@@ -0,0 +1,83 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { PureComponent } from 'react';
+import { withGoogleMap, GoogleMap, Marker, Polygon } from 'react-google-maps';
+import SearchBox from 'react-google-maps/lib/components/places/SearchBox';
+import { GoogleMapsPropTypes } from '../../types';
+import styles from './styles';
+import { googleMapDefaultOptions, polygonDefaultOptions } from './constants';
+class GoogleMaps extends PureComponent {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "handleMarkerRightClick", marker => this.props.onMarkerRightClick(marker));
+    _defineProperty(this, "handleMarkerClick", (marker, optionData) => this.props.onMarkerClick(marker, optionData));
+  }
+  render() {
+    const {
+      center,
+      colorBorderPolygon,
+      colorPolygon,
+      disabled,
+      markers,
+      MultipleMarkersIcon,
+      onMapClick,
+      onMapMounted,
+      onPlacesChanged,
+      onSearchBoxMounted,
+      onSearchChange,
+      placeholder,
+      polygonPath,
+      searchEnabled,
+      searchValue,
+      selectedPosition,
+      singleMarker,
+      usePolygon,
+      zoom
+    } = this.props;
+    const polygonOptions = polygonDefaultOptions(colorPolygon, colorBorderPolygon);
+    const handleStopPropagation = e => {
+      if (e.key === 'Enter' && e.shiftKey === false) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    };
+    return /*#__PURE__*/React.createElement(GoogleMap, {
+      ref: onMapMounted,
+      defaultOptions: googleMapDefaultOptions,
+      onClick: onMapClick,
+      center: center,
+      zoom: zoom
+    }, usePolygon && /*#__PURE__*/React.createElement(Polygon, {
+      defaultOptions: polygonOptions,
+      onClick: onMapClick,
+      path: polygonPath
+    }), searchEnabled && /*#__PURE__*/React.createElement(SearchBox, {
+      ref: onSearchBoxMounted,
+      controlPosition: window.google.maps.ControlPosition.TOP_LEFT,
+      onPlacesChanged: onPlacesChanged
+    }, /*#__PURE__*/React.createElement("input", {
+      type: "text",
+      placeholder: placeholder,
+      style: styles.searchBox,
+      value: searchValue,
+      onChange: onSearchChange,
+      disabled: disabled,
+      onKeyDown: handleStopPropagation
+    })), markers.map(marker => {
+      const label = marker.label || '';
+      const selected = marker.key === selectedPosition;
+      return /*#__PURE__*/React.createElement(Marker, _extends({}, marker, {
+        key: marker.key,
+        onRightClick: this.handleMarkerRightClick,
+        onClick: markerData => this.handleMarkerClick(markerData, marker)
+      }, MultipleMarkersIcon && !singleMarker && {
+        icon: MultipleMarkersIcon(label, selected),
+        label: undefined
+      }));
+    }));
+  }
+}
+GoogleMaps.propTypes = GoogleMapsPropTypes;
+export default withGoogleMap(GoogleMaps);

package/dist/esm/components/UTMap/components/GoogleMaps/styles.js

@@ -0,0 +1,16 @@
+export default {
+  searchBox: {
+    border: "1px solid rgba(0,0,0,0.24)",
+    boxSizing: 'border-box',
+    width: '75%',
+    maxWidth: '75%',
+    height: 30,
+    margin: 10,
+    borderRadius: 1,
+    boxShadow: "0 2px 6px rgba(0, 0, 0, 0.3)",
+    outline: 'none',
+    padding: '0px 10px',
+    textOverflow: 'ellipses',
+    textAlign: 'left'
+  }
+};

package/dist/esm/components/UTMap/constants.js

@@ -0,0 +1,23 @@
+export const GMAP_PARAMS = {
+  latitude: 'latitude',
+  longitude: 'longitude',
+  formattedAddress: 'formatted_address'
+};
+export const TEXTS = {
+  retrievingLocation: 'Estamos recuperando tu ubicación...',
+  retrieveLocationError: 'No pudimos determinar tu ubicación.',
+  invalidConfig: 'No se encuentran configuradas en el field las keys a utilizar para alguno de los siguientes campos: latitude, longitude y/o formatted_address',
+  placeholder: 'Ingresá una dirección'
+};
+export const LOCATION_TYPES = {
+  rooftop: 'ROOFTOP',
+  rangeInterpolated: 'RANGE_INTERPOLATED',
+  geometricCenter: 'GEOMETRIC_CENTER'
+};
+export const ADDRESS_TYPES = {
+  street: 'street_address',
+  route: 'route'
+};
+export const ZOOM_INITIAL = 10;
+export const ZOOM_ADDRESS_VALID = 15;
+export const MAP_PADDING = 60;

package/dist/esm/components/UTMap/index.js

@@ -0,0 +1,321 @@
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { PureComponent } from 'react';
+import { shouldShowErrors } from '@widergy/web-utils/lib/form';
+import isEmpty from 'lodash/isEmpty';
+import UTLabel from '../UTLabel';
+import { UTMapPropTypes } from '../../types/googleMapsTypes';
+import WithGoogleMapScript from '../WithGoogleMaps';
+import GoogleMaps from './components/GoogleMaps';
+import { geolocation, checkAddressIsValid, retrieveAddressByCoords, getValue, isValidConfiguration } from './utils';
+import { GMAP_PARAMS, TEXTS, ZOOM_INITIAL, ZOOM_ADDRESS_VALID, MAP_PADDING } from './constants';
+import styles from './styles.module.scss';
+class UTMap extends PureComponent {
+  constructor(props) {
+    var _this;
+    super(props);
+    _this = this;
+    _defineProperty(this, "handleSearchChange", event => this.setState({
+      searchValue: event.target.value
+    }));
+    _defineProperty(this, "updateAddress", (latLng, forcedAddress, changeValue) => {
+      this.setState({
+        searchValue: ''
+      });
+      // Update address on search box and complete field value on store
+      retrieveAddressByCoords({
+        address: forcedAddress,
+        location: latLng
+      }, address => {
+        this.setState({
+          searchValue: address.formatted_address
+        }, () => {
+          const {
+            field,
+            onChange,
+            singleMarker
+          } = this.props;
+          const addressComponents = field.configuration.address_components;
+          const addressValue = {};
+          Object.keys(addressComponents).map(key => addressValue[addressComponents[key]] = getValue(address, latLng, key));
+          if (changeValue && singleMarker) onChange(addressValue);
+        });
+      });
+    });
+    _defineProperty(this, "updateMarker", latLng => {
+      // Add marker on screen
+      const newMarker = {
+        position: latLng,
+        defaultAnimation: 2,
+        key: Date.now()
+      };
+      const markers = this.props.singleMarker ? [newMarker] : [...this.state.markers];
+      this.setState({
+        markers
+      });
+    });
+    _defineProperty(this, "handleMapClick", event => {
+      // When user click on any place inside map
+      const {
+        disabled,
+        singleMarker,
+        onChange,
+        polygonPath,
+        onLocationOutOfBoundsCallback,
+        zoomAddressInvalid
+      } = this.props;
+      const {
+        usePolygon
+      } = this.state;
+      const {
+        latLng
+      } = event;
+      if (disabled) return;
+      const isValid = checkAddressIsValid(latLng, usePolygon, polygonPath);
+      if (!isValid && onLocationOutOfBoundsCallback) {
+        this.setState({
+          mapZoom: zoomAddressInvalid || 10
+        });
+        return onLocationOutOfBoundsCallback();
+      }
+      if (isValid && singleMarker) {
+        onChange(null);
+        this.updateMarker(latLng);
+        this.updateAddress(latLng, null, true);
+      }
+    });
+    _defineProperty(this, "centerMap", latLng => this.setState({
+      center: latLng,
+      mapZoom: this.props.zoomAddressValid || ZOOM_ADDRESS_VALID
+    }));
+    _defineProperty(this, "handleMarkerRightClick", targetMarker => {
+      const nextMarkers = this.state.markers.filter(marker => marker.position !== targetMarker.latLng && marker.position.lat !== targetMarker.latLng.lat() && marker.position.lng !== targetMarker.latLng.lng());
+      this.setState({
+        markers: nextMarkers
+      });
+    });
+    _defineProperty(this, "handleMarkerClick", function (_) {
+      let optionData = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      const {
+        key,
+        value
+      } = optionData;
+      const {
+        onChange
+      } = _this.props;
+      const selected = _this.state.selectedPosition === key;
+      _this.setState({
+        selectedPosition: selected ? null : key
+      });
+      if (onChange) onChange(selected ? null : value);
+    });
+    _defineProperty(this, "handleMapMounted", mapRef => {
+      // When map is mounted on screen
+      this.map = mapRef;
+      const {
+        input,
+        field,
+        singleMarker
+      } = this.props;
+      if (input.value) {
+        const addressComponents = field.configuration.address_components;
+        const latLng = new window.google.maps.LatLng(input.value[addressComponents[GMAP_PARAMS.latitude]], input.value[addressComponents[GMAP_PARAMS.longitude]]);
+        this.updateAddress(latLng, input.value[addressComponents[GMAP_PARAMS.formattedAddress]]);
+        return;
+      }
+      if (this.props.useGeolocation) {
+        // We try to recover user actual position with navigator geolocation
+        geolocation(this.props.errors.retrieveLocationError).getCurrentPosition(userPosition => {
+          var _this$state$markers;
+          // If we can retrieve user position...
+
+          const markerCoordinates = !singleMarker && ((_this$state$markers = this.state.markers) === null || _this$state$markers === void 0 || (_this$state$markers = _this$state$markers[0]) === null || _this$state$markers === void 0 ? void 0 : _this$state$markers.position);
+          const {
+            lat: optionLat,
+            lng: optionLng
+          } = markerCoordinates || {};
+          const {
+            latitude: userLatitude,
+            longitude: userLongitude
+          } = userPosition.coords;
+          const searchLatitude = singleMarker ? userLatitude : optionLat;
+          const searchLongitude = singleMarker ? userLongitude : optionLng;
+          const userLatLng = new window.google.maps.LatLng(searchLatitude, searchLongitude);
+          if (checkAddressIsValid(userLatLng, this.state.usePolygon, this.props.polygonPath)) {
+            const actualPosition = {
+              lat: searchLatitude,
+              lng: searchLongitude
+            };
+            this.setState({
+              center: actualPosition,
+              markers: [...(this.props.singleMarker ? [{
+                position: actualPosition,
+                key: Date.now(),
+                defaultAnimation: 2
+              }] : this.state.markers)],
+              mapLoading: false
+            }, () => {
+              const latlng = new window.google.maps.LatLng(searchLatitude, searchLongitude);
+              this.updateAddress(latlng, null, true);
+            });
+          } else {
+            // In other case we set map on startLocation
+            const latlng = new window.google.maps.LatLng(this.state.center.lat, this.state.center.lng);
+            this.updateAddress(latlng, null, true);
+          }
+        },
+        // If we can't retrieve user position we set map on startLocation
+        () => {
+          const latlng = new window.google.maps.LatLng(this.state.center.lat, this.state.center.lng);
+          this.updateAddress(latlng, null, true);
+        });
+      }
+      const bounds = new window.google.maps.LatLngBounds();
+      this.state.markers.forEach(marker => {
+        bounds.extend(new window.google.maps.LatLng(marker.position.lat, marker.position.lng));
+      });
+      if (this.map && !singleMarker) {
+        this.map.fitBounds(bounds, MAP_PADDING);
+      }
+    });
+    _defineProperty(this, "handleBoundsChanged", () => this.setState({
+      center: this.map.getCenter()
+    }));
+    _defineProperty(this, "handleSearchBoxMounted", searchBoxRef => this.searchBox = searchBoxRef);
+    _defineProperty(this, "handlePlacesChanged", () => {
+      if (this.props.disabled) return;
+      const places = this.searchBox.getPlaces();
+      const place = !isEmpty(places) && checkAddressIsValid(places[0].geometry.location, this.state.usePolygon, this.props.polygonPath) && places[0];
+      if (place) {
+        this.props.onChange(null);
+        this.updateMarker(place.geometry.location);
+        this.updateAddress(place.geometry.location, place.formatted_address, true);
+        this.centerMap(place.geometry.location);
+      } else if (this.props.onLocationOutOfBoundsCallback) this.props.onLocationOutOfBoundsCallback();
+    });
+    this.state = {
+      markers: [],
+      mapLoading: true,
+      searchValue: '',
+      mapZoom: this.props.zoomInitial || ZOOM_INITIAL,
+      usePolygon: this.props.usePolygon && !isEmpty(this.props.polygonPath),
+      invalidConfiguration: false,
+      selectedPosition: null
+    };
+  }
+  componentDidMount() {
+    const startPosition = {
+      position: {
+        lat: null,
+        lng: null
+      }
+    };
+    const {
+      input,
+      startLocation,
+      field = {},
+      options = []
+    } = this.props;
+    if (!isValidConfiguration(field)) {
+      this.setState({
+        invalidConfiguration: true,
+        mapLoading: false
+      });
+      return;
+    }
+    const coordinates = options.map(option => ({
+      key: option.id.toString(),
+      position: {
+        lat: option.configuration.coordinates.latitude,
+        lng: option.configuration.coordinates.longitude
+      },
+      label: "".concat(option.value),
+      value: option.value
+    }));
+    if (input.value) {
+      startPosition.position.lat = input.value[field.configuration.address_components[GMAP_PARAMS.latitude]];
+      startPosition.position.lng = input.value[field.configuration.address_components[GMAP_PARAMS.longitude]];
+      this.setState({
+        center: startPosition.position,
+        markers: [startPosition],
+        mapLoading: false
+      });
+      return;
+    }
+    if (startLocation && startLocation.position.lat && startLocation.position.lng) {
+      this.setState({
+        center: startLocation.position,
+        markers: [startLocation],
+        mapLoading: false
+      });
+    }
+    if (!isEmpty(coordinates)) {
+      this.setState({
+        center: coordinates[0].position,
+        markers: coordinates,
+        mapLoading: false
+      });
+    }
+  }
+  render() {
+    const {
+      showOnlyMap = false
+    } = this.props.field.configuration;
+    const searchEnabled = !showOnlyMap && this.props.singleMarker;
+    return /*#__PURE__*/React.createElement("div", null, this.state.center ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(GoogleMaps, {
+      center: this.state.center,
+      colorBorderPolygon: this.props.colorBorderPolygon,
+      colorPolygon: this.props.colorPolygon,
+      containerElement: /*#__PURE__*/React.createElement("div", {
+        className: this.props.className
+      }),
+      disabled: this.props.disabled,
+      mapElement: /*#__PURE__*/React.createElement("div", {
+        className: this.props.className
+      }),
+      markers: this.state.markers,
+      MultipleMarkersIcon: this.props.MultipleMarkersIcon,
+      onMapClick: this.handleMapClick,
+      onMapMounted: this.handleMapMounted,
+      onMarkerClick: this.handleMarkerClick,
+      onMarkerRightClick: this.handleMarkerRightClick,
+      onPlacesChanged: this.handlePlacesChanged,
+      onSearchBoxMounted: this.handleSearchBoxMounted,
+      onSearchChange: this.handleSearchChange,
+      placeholder: this.props.placeholder,
+      polygonPath: this.props.polygonPath,
+      searchEnabled: searchEnabled,
+      searchValue: this.state.searchValue,
+      selectedPosition: this.state.selectedPosition,
+      singleMarker: this.props.singleMarker,
+      usePolygon: this.state.usePolygon,
+      zoom: this.state.mapZoom
+    })) : this.state.mapLoading ? /*#__PURE__*/React.createElement(UTLabel, null, this.props.errors.retrievingLocation) : this.state.invalidConfiguration ? /*#__PURE__*/React.createElement(UTLabel, {
+      colorTheme: "error",
+      variant: "small"
+    }, this.props.errors.invalidConfig) : /*#__PURE__*/React.createElement(UTLabel, {
+      colorTheme: "error",
+      variant: "small"
+    }, this.props.errors.retrieveLocationError), !showOnlyMap && /*#__PURE__*/React.createElement(UTLabel, {
+      colorTheme: "error",
+      variant: "small",
+      className: styles.error
+    }, shouldShowErrors(this.props.meta) ? this.props.meta.error : ''));
+  }
+}
+UTMap.propTypes = UTMapPropTypes;
+UTMap.defaultProps = {
+  errors: {
+    retrievingLocation: TEXTS.retrievingLocation,
+    retrieveLocationError: TEXTS.retrieveLocationError,
+    invalidConfig: TEXTS.invalidConfig
+  },
+  placeholder: TEXTS.placeholder,
+  field: {
+    configuration: {
+      send_address_components: false
+    }
+  }
+};
+export default WithGoogleMapScript()(UTMap);

package/dist/esm/components/UTMap/styles.module.scss

@@ -0,0 +1,4 @@
+.error {
+  display: flex;
+  margin-top: 20px;
+}

package/dist/esm/components/UTMap/types.js

@@ -0,0 +1,31 @@
+import { any, number, bool, func, shape, arrayOf, oneOfType } from 'prop-types';
+const coordinatePropType = oneOfType([number, func]);
+export const GoogleMapsPropTypes = {
+  onMapClick: func.isRequired,
+  onMarkerRightClick: func.isRequired,
+  center: shape({
+    lat: coordinatePropType,
+    lng: coordinatePropType
+  }),
+  markers: arrayOf(shape({
+    position: shape({
+      lat: coordinatePropType,
+      lng: coordinatePropType
+    }).isRequired,
+    key: number,
+    defaultAnimation: number
+  })),
+  onMapMounted: func.isRequired,
+  onSearchBoxMounted: func.isRequired,
+  onPlacesChanged: func.isRequired,
+  usePolygon: bool,
+  polygonPath: arrayOf(shape({
+    lat: number,
+    lng: number
+  })),
+  bounds: any,
+  onSearchChange: func,
+  searchValue: any,
+  zoom: number,
+  showOnlyMap: bool
+};