homeflowjs 0.10.24 → 0.10.25

package/branches/branches-map/branches-map.component.jsx

@@ -13,9 +13,20 @@ import ReactLeafletGoogleLayer from 'react-leaflet-google-layer';
 import 'leaflet/dist/leaflet.css';
 
 const BranchesMap = ({
-  CustomPopup, google, gmapsKey, iconConfig, fallbackLatLng, scrollWheelZoom
+  CustomPopup,
+  google,
+  gmapsKey,
+  iconConfig,
+  fallbackLatLng,
+  scrollWheelZoom,
+  markerClickHandler,
+  displayPopup,
+  selectedBranch, 
+  branches: branchesProp,
 }) => {
-  let branches = Homeflow.get('branches');
+  let branches = !!branchesProp.length
+    ? branchesProp
+    : Homeflow.get('branches');
   let showMarkers = true;
 
   // If no branches found use fallback lat, long and set showMarkers to false
@@ -30,17 +41,20 @@ const BranchesMap = ({
     shadowUrl: '/assets/marker-shadow.png',
   };
 
-  let icon = L.icon(iconConfig || defaultIconConfig);
+  
 
   const bounds = latLngBounds([branches[0].lat, branches[0].lng]);
 
   const markers = branches.map((branch) => {
     bounds.extend([branch.lat, branch.lng]);
+    let icon = L.icon(iconConfig || defaultIconConfig);
     // check if branch object have mapIcon payload, example:
     // mapIcon: {
     //   iconUrl: 'specific-path.png' || 'data:image/svg+xml;utf8,<svg></svg>',
     //   iconSize: [149, 66],
     // }
+    if (branch.branchID === selectedBranch.branchID && 'mapIcon' in selectedBranch) icon = L.icon(selectedBranch.mapIcon);
+
     if ('mapIcon' in branch) icon = L.icon(branch.mapIcon);
     // check if branch object have mapDivIcon payload, example:
     // mapDivIcon: {
@@ -49,35 +63,55 @@ const BranchesMap = ({
     // }
     if ('mapDivIcon' in branch) icon = L.divIcon(branch.mapDivIcon);
 
+    if (displayPopup) {
+      return (
+        <Marker
+          position={[branch.lat, branch.lng]}
+          icon={icon}
+          key={branch?.branch_id || branch?.branchID}
+          eventHandlers={{
+            click: () => markerClickHandler(branch),
+          }}
+        >
+          {CustomPopup ? (
+            <Popup>
+              <CustomPopup branch={branch} />
+            </Popup>
+          ) : (
+            <Popup>
+              <div className="hfjs-branch-marker-popup">
+                <h2>{branch.name}</h2>
+                <p>{branch.address}</p>
+
+                {branch.sales_enabled && (
+                  <a href={`${branch.branch_url}/sales`}>
+                    View all properties for sale &gt;
+                  </a>
+                )}
+
+                <br />
+
+                {branch.lettings_enabled && (
+                  <a href={`${branch.branch_url}/lettings`}>
+                    View all properties to let &gt;
+                  </a>
+                )}
+              </div>
+            </Popup>
+          )}
+        </Marker>
+      );
+    }
+
     return (
       <Marker
         position={[branch.lat, branch.lng]}
         icon={icon}
-        key={branch.branch_id}
-      >
-        {CustomPopup ? (
-          <Popup>
-            <CustomPopup branch={branch} />
-          </Popup>
-        ) : (
-          <Popup>
-            <div className="hfjs-branch-marker-popup">
-              <h2>{branch.name}</h2>
-              <p>{branch.address}</p>
-
-              {branch.sales_enabled && (
-                <a href={`${branch.branch_url}/sales`}>View all properties for sale &gt;</a>
-              )}
-
-              <br />
-
-              {branch.lettings_enabled && (
-                <a href={`${branch.branch_url}/lettings`}>View all properties to let &gt;</a>
-              )}
-            </div>
-          </Popup>
-        )}
-      </Marker>
+        key={branch?.branch_id || branch?.branchID}
+        eventHandlers={{
+          click: () => markerClickHandler(branch),
+        }}
+      />
     );
   });
 
@@ -112,6 +146,10 @@ BranchesMap.propTypes = {
   iconConfig: PropTypes.object,
   fallbackLatLng: PropTypes.object,
   scrollWheelZoom: PropTypes.bool,
+  markerClickHandler: PropTypes.func,
+  displayPopup : PropTypes.bool,
+  selectedBranch: PropTypes.object,
+  branches: PropTypes.arrayOf(PropTypes.object)
 };
 
 BranchesMap.defaultProps = {
@@ -121,6 +159,10 @@ BranchesMap.defaultProps = {
   iconConfig: null,
   fallbackLatLng: { lat: 51.509865, lng: -0.118092 },
   scrollWheelZoom: false,
+  markerClickHandler: () => {},
+  displayPopup: true,
+  selectedBranch: {},
+  branches: []
 };
 
 const mapStateToProps = (state) => ({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "homeflowjs",
-  "version": "0.10.24",
+  "version": "0.10.25",
   "description": "JavaScript toolkit for Homeflow themes",
   "main": "index.js",
   "scripts": {