@shopgate/engage/locations/components/StoreFinder/StoreFinderMap.js

Shopgate's ENGAGE library.

import React,{useContext,useMemo,useCallback}from'react';import PropTypes from'prop-types';import"../../assets/leaflet.css";import'leaflet-gesture-handling/dist/leaflet-gesture-handling.css';import Leaflet from'leaflet';import{GestureHandling}from'leaflet-gesture-handling';import{Map,Marker,TileLayer}from'react-leaflet';import{renderToString}from'react-dom/server';import MapMarkerIcon from'@shopgate/pwa-ui-shared/icons/MapMarkerIcon';import{StoreFinderContext}from"../../locations.context";import{container,marker,markerSelected,userPosition as userPositionStyle}from"./StoreFinderMap.style";Leaflet.Map.addInitHook('addHandler','gestureHandling',GestureHandling);/**
 * @param {Object} props The component props
 * @returns {JSX}
 */var StoreFinderMap=function StoreFinderMap(_ref){var showUserPosition=_ref.showUserPosition;var _useContext=useContext(StoreFinderContext),locations=_useContext.locations,selectedLocation=_useContext.selectedLocation,changeLocation=_useContext.changeLocation,userSearch=_useContext.userSearch;var iconHTML=useMemo(function(){return renderToString(React.createElement(MapMarkerIcon,null));},[]);var makerIcon=useMemo(function(){return Leaflet.divIcon({html:iconHTML,className:marker,iconSize:[40,40]});},[iconHTML]);var markerIconSelected=useMemo(function(){return Leaflet.divIcon({html:iconHTML,className:markerSelected,iconSize:[40,40]});},[iconHTML]);var userPositionIcon=useMemo(function(){return Leaflet.divIcon({html:'<div/>',className:userPositionStyle,iconSize:[20,20]});},[]);var positions=useMemo(function(){return locations.map(function(location){var code=location.code,latitude=location.latitude,longitude=location.longitude;var _ref2=selectedLocation||{},selectedCode=_ref2.code;var icon=selectedCode===code?markerIconSelected:makerIcon;return{code:code,location:location,icon:icon,position:[latitude,longitude]};});},[locations,makerIcon,markerIconSelected,selectedLocation]);var userPosition=useMemo(function(){var geolocation=userSearch.geolocation;if(!geolocation||!showUserPosition){return null;}var latitude=geolocation.latitude,longitude=geolocation.longitude;return{icon:userPositionIcon,position:[latitude,longitude]};},[showUserPosition,userPositionIcon,userSearch]);var viewport=useMemo(function(){var _ref3=selectedLocation||locations[0]||{},latitude=_ref3.latitude,longitude=_ref3.longitude;if(!latitude||!longitude){return(userPosition===null||userPosition===void 0?void 0:userPosition.position)||null;}return[latitude,longitude];},[locations,selectedLocation,userPosition]);var onMarkerClick=useCallback(function(event,location){changeLocation(location,true);},[changeLocation]);return React.createElement("div",{className:container},React.createElement(Map,{center:viewport,zoom:15,className:container,gestureHandling:Leaflet.Browser.mobile,touchZoom:true},React.createElement(TileLayer,{attribution:"&copy <a href=\"http://osm.org/copyright\">OpenStreetMap</a> contributors",url:"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"}),positions.map(function(_ref4){var position=_ref4.position,code=_ref4.code,location=_ref4.location,icon=_ref4.icon;return React.createElement(Marker,{key:code,icon:icon,position:position,onclick:function onclick(e){onMarkerClick(e,location);}});}),userPosition&&React.createElement(Marker,{key:"user-position",icon:userPosition.icon,position:userPosition.position})));};StoreFinderMap.defaultProps={showUserPosition:true};export default StoreFinderMap;