@widergy/energy-ui 3.172.3 → 3.173.0

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

@@ -1 +1,84 @@
-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,MARKER_Z_INDEX}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:center,colorBorderPolygon:colorBorderPolygon,colorPolygon:colorPolygon,disabled:disabled,markers:markers,MultipleMarkersIcon:MultipleMarkersIcon,onMapClick:onMapClick,onMapMounted:onMapMounted,onPlacesChanged:onPlacesChanged,onSearchBoxMounted:onSearchBoxMounted,onSearchChange:onSearchChange,placeholder:placeholder,polygonPath:polygonPath,searchEnabled:searchEnabled,searchValue:searchValue,selectedPosition:selectedPosition,singleMarker:singleMarker,usePolygon:usePolygon,zoom:zoom}=this.props,polygonOptions=polygonDefaultOptions(colorPolygon,colorBorderPolygon);return React.createElement(GoogleMap,{ref:onMapMounted,defaultOptions:googleMapDefaultOptions,onClick:onMapClick,center:center,zoom:zoom},usePolygon&&React.createElement(Polygon,{defaultOptions:polygonOptions,onClick:onMapClick,path:polygonPath}),searchEnabled&&React.createElement(SearchBox,{ref:onSearchBoxMounted,controlPosition:window.google.maps.ControlPosition.TOP_LEFT,onPlacesChanged:onPlacesChanged},React.createElement("input",{type:"text",placeholder:placeholder,style:styles.searchBox,value:searchValue,onChange:onSearchChange,disabled:disabled,onKeyDown:e=>{"Enter"===e.key&&!1===e.shiftKey&&(e.preventDefault(),e.stopPropagation())}})),markers.map(marker=>{const label=marker.label||"",selected=marker.key===selectedPosition;return React.createElement(Marker,_extends({},marker,{key:marker.key,onRightClick:this.handleMarkerRightClick,onClick:markerData=>this.handleMarkerClick(markerData,marker),zIndex:selected?MARKER_Z_INDEX.selected:MARKER_Z_INDEX.default},MultipleMarkersIcon&&!singleMarker&&{icon:MultipleMarkersIcon(label,selected),label:void 0}))}))}}GoogleMaps.propTypes=GoogleMapsPropTypes;export default withGoogleMap(GoogleMaps);
+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, MARKER_Z_INDEX } 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),
+        zIndex: selected ? MARKER_Z_INDEX.selected : MARKER_Z_INDEX.default
+      }, MultipleMarkersIcon && !singleMarker && {
+        icon: MultipleMarkersIcon(label, selected),
+        label: undefined
+      }));
+    }));
+  }
+}
+GoogleMaps.propTypes = GoogleMapsPropTypes;
+export default withGoogleMap(GoogleMaps);

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

@@ -1 +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"}};
+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

@@ -1 +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;
+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

@@ -1 +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:""}),retrieveAddressByCoords({address:forcedAddress,location:latLng},address=>{this.setState({searchValue:address.formatted_address},()=>{const{field:field,onChange:onChange,singleMarker:singleMarker}=this.props,addressComponents=field.configuration.address_components,addressValue={};Object.keys(addressComponents).map(key=>addressValue[addressComponents[key]]=getValue(address,latLng,key)),changeValue&&singleMarker&&onChange(addressValue)})})}),_defineProperty(this,"updateMarker",latLng=>{const newMarker={position:latLng,defaultAnimation:2,key:Date.now()},markers=this.props.singleMarker?[newMarker]:[...this.state.markers];this.setState({markers:markers})}),_defineProperty(this,"handleMapClick",event=>{const{disabled:disabled,singleMarker:singleMarker,onChange:onChange,polygonPath:polygonPath,onLocationOutOfBoundsCallback:onLocationOutOfBoundsCallback,zoomAddressInvalid:zoomAddressInvalid}=this.props,{usePolygon:usePolygon}=this.state,{latLng:latLng}=event;if(disabled)return;const isValid=checkAddressIsValid(latLng,usePolygon,polygonPath);if(!isValid&&onLocationOutOfBoundsCallback)return this.setState({mapZoom:zoomAddressInvalid||10}),onLocationOutOfBoundsCallback();isValid&&singleMarker&&(onChange(null),this.updateMarker(latLng),this.updateAddress(latLng,null,!0))}),_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&&void 0!==arguments[1]?arguments[1]:{};const{key:key,value:value}=optionData,{onChange:onChange}=_this.props,selected=_this.state.selectedPosition===key;_this.setState({selectedPosition:selected?null:key}),onChange&&onChange(selected?null:value)}),_defineProperty(this,"handleMapMounted",mapRef=>{this.map=mapRef;const{input:input,field:field,singleMarker:singleMarker}=this.props;if(input.value){const addressComponents=field.configuration.address_components,latLng=new window.google.maps.LatLng(input.value[addressComponents[GMAP_PARAMS.latitude]],input.value[addressComponents[GMAP_PARAMS.longitude]]);return void this.updateAddress(latLng,input.value[addressComponents[GMAP_PARAMS.formattedAddress]])}this.props.useGeolocation&&geolocation(this.props.errors.retrieveLocationError).getCurrentPosition(userPosition=>{var _this$state$markers;const markerCoordinates=!singleMarker&&(null===(_this$state$markers=this.state.markers)||void 0===_this$state$markers||null===(_this$state$markers=_this$state$markers[0])||void 0===_this$state$markers?void 0:_this$state$markers.position),{lat:optionLat,lng:optionLng}=markerCoordinates||{},{latitude:userLatitude,longitude:userLongitude}=userPosition.coords,searchLatitude=singleMarker?userLatitude:optionLat,searchLongitude=singleMarker?userLongitude:optionLng,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:!1},()=>{const latlng=new window.google.maps.LatLng(searchLatitude,searchLongitude);this.updateAddress(latlng,null,!0)})}else{const latlng=new window.google.maps.LatLng(this.state.center.lat,this.state.center.lng);this.updateAddress(latlng,null,!0)}},()=>{const latlng=new window.google.maps.LatLng(this.state.center.lat,this.state.center.lng);this.updateAddress(latlng,null,!0)});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))}),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(),place=!isEmpty(places)&&checkAddressIsValid(places[0].geometry.location,this.state.usePolygon,this.props.polygonPath)&&places[0];place?(this.props.onChange(null),this.updateMarker(place.geometry.location),this.updateAddress(place.geometry.location,place.formatted_address,!0),this.centerMap(place.geometry.location)):this.props.onLocationOutOfBoundsCallback&&this.props.onLocationOutOfBoundsCallback()}),this.state={markers:[],mapLoading:!0,searchValue:"",mapZoom:this.props.zoomInitial||ZOOM_INITIAL,usePolygon:this.props.usePolygon&&!isEmpty(this.props.polygonPath),invalidConfiguration:!1,selectedPosition:null}}componentDidMount(){const startPosition={position:{lat:null,lng:null}},{input:input,startLocation:startLocation,field:field={},options:options=[]}=this.props;if(!isValidConfiguration(field))return void this.setState({invalidConfiguration:!0,mapLoading:!1});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)return startPosition.position.lat=input.value[field.configuration.address_components[GMAP_PARAMS.latitude]],startPosition.position.lng=input.value[field.configuration.address_components[GMAP_PARAMS.longitude]],void this.setState({center:startPosition.position,markers:[startPosition],mapLoading:!1});startLocation&&startLocation.position.lat&&startLocation.position.lng&&this.setState({center:startLocation.position,markers:[startLocation],mapLoading:!1}),isEmpty(coordinates)||this.setState({center:coordinates[0].position,markers:coordinates,mapLoading:!1})}render(){const{showOnlyMap:showOnlyMap=!1}=this.props.field.configuration,searchEnabled=!showOnlyMap&&this.props.singleMarker;return React.createElement("div",null,this.state.center?React.createElement("div",null,React.createElement(GoogleMaps,{center:this.state.center,colorBorderPolygon:this.props.colorBorderPolygon,colorPolygon:this.props.colorPolygon,containerElement:React.createElement("div",{className:this.props.className}),disabled:this.props.disabled,mapElement: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?React.createElement(UTLabel,null,this.props.errors.retrievingLocation):this.state.invalidConfiguration?React.createElement(UTLabel,{colorTheme:"error",variant:"small"},this.props.errors.invalidConfig):React.createElement(UTLabel,{colorTheme:"error",variant:"small"},this.props.errors.retrieveLocationError),!showOnlyMap&&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:!1}}};export default WithGoogleMapScript()(UTMap);
+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/types.js

@@ -1 +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};
+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
+};

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

@@ -1 +1,62 @@
-import{isEmpty}from"@widergy/web-utils/lib/array";import{GMAP_PARAMS,LOCATION_TYPES,ADDRESS_TYPES}from"./constants";export const geolocation=message=>navigator.geolocation?navigator.geolocation:{getCurrentPosition(success,failure){failure(message)}};export const checkAddressIsValid=(latLng,usePolygon,polygon)=>{const utilityPolygon=new window.google.maps.Polygon({paths:polygon});return!usePolygon||window.google.maps.geometry.poly.containsLocation(latLng,utilityPolygon)};export const retrieveAddressByCoords=(_ref,onAddressFoundCallback)=>{let{location:location,address:address}=_ref;const geocoder=new window.google.maps.Geocoder,parameters=address?{address:address}:{location:location};geocoder.geocode(parameters,(results,status)=>{if("OK"===status){const addressResults=results.filter(result=>result.types.some(type=>type===ADDRESS_TYPES.street||type===ADDRESS_TYPES.route));let finalAddress;isEmpty(addressResults)?isEmpty(results)||(finalAddress={...results[0],...address?{formatted_address:address}:{}}):finalAddress=addressResults.find(elem=>elem.geometry.location_type===LOCATION_TYPES.rooftop)||addressResults.find(elem=>elem.geometry.location_type===LOCATION_TYPES.rangeInterpolated)||addressResults.find(elem=>elem.geometry.location_type===LOCATION_TYPES.geometricCenter),finalAddress&&onAddressFoundCallback(finalAddress)}})};export const findAddressComponent=(address,component)=>{const addrComponent=address.address_components.find(attribute=>attribute.types.includes(component));return addrComponent&&addrComponent.long_name};export const getValue=(address,latLng,paramName)=>{switch(paramName){case GMAP_PARAMS.latitude:return latLng.lat();case GMAP_PARAMS.longitude:return latLng.lng();case GMAP_PARAMS.formattedAddress:return address.formatted_address;default:return findAddressComponent(address,paramName)}};export const isValidConfiguration=field=>field&&field.configuration&&field.configuration.address_components&&field.configuration.address_components[GMAP_PARAMS.latitude]&&field.configuration.address_components[GMAP_PARAMS.longitude]&&field.configuration.address_components[GMAP_PARAMS.formattedAddress];
+import { isEmpty } from '@widergy/web-utils/lib/array';
+import { GMAP_PARAMS, LOCATION_TYPES, ADDRESS_TYPES } from './constants';
+export const geolocation = message => navigator.geolocation ? navigator.geolocation : {
+  getCurrentPosition(success, failure) {
+    failure(message);
+  }
+};
+export const checkAddressIsValid = (latLng, usePolygon, polygon) => {
+  // Check if a position is included on Utility polygon or if utility hasn't setted a polygon
+  // To set map in this position
+  const utilityPolygon = new window.google.maps.Polygon({
+    paths: polygon
+  });
+  return !usePolygon || window.google.maps.geometry.poly.containsLocation(latLng, utilityPolygon);
+};
+export const retrieveAddressByCoords = (_ref, onAddressFoundCallback) => {
+  let {
+    location,
+    address
+  } = _ref;
+  const geocoder = new window.google.maps.Geocoder();
+  const parameters = address ? {
+    address
+  } : {
+    location
+  };
+  geocoder.geocode(parameters, (results, status) => {
+    if (status === 'OK') {
+      const addressResults = results.filter(result => result.types.some(type => type === ADDRESS_TYPES.street || type === ADDRESS_TYPES.route));
+      let finalAddress;
+      if (!isEmpty(addressResults)) {
+        finalAddress = addressResults.find(elem => elem.geometry.location_type === LOCATION_TYPES.rooftop) || addressResults.find(elem => elem.geometry.location_type === LOCATION_TYPES.rangeInterpolated) || addressResults.find(elem => elem.geometry.location_type === LOCATION_TYPES.geometricCenter);
+      } else if (!isEmpty(results)) {
+        finalAddress = {
+          ...results[0],
+          ...(address ? {
+            formatted_address: address
+          } : {})
+        };
+      }
+      if (finalAddress) onAddressFoundCallback(finalAddress);
+    }
+  });
+};
+export const findAddressComponent = (address, component) => {
+  const addrComponent = address.address_components.find(attribute => attribute.types.includes(component));
+  return addrComponent && addrComponent.long_name;
+};
+export const getValue = (address, latLng, paramName) => {
+  switch (paramName) {
+    case GMAP_PARAMS.latitude:
+      return latLng.lat();
+    case GMAP_PARAMS.longitude:
+      return latLng.lng();
+    case GMAP_PARAMS.formattedAddress:
+      return address.formatted_address;
+    default:
+      return findAddressComponent(address, paramName);
+  }
+};
+// configuration.address_components
+export const isValidConfiguration = field => field && field.configuration && field.configuration.address_components && field.configuration.address_components[GMAP_PARAMS.latitude] && field.configuration.address_components[GMAP_PARAMS.longitude] && field.configuration.address_components[GMAP_PARAMS.formattedAddress];