homeflowjs 0.11.1 → 0.11.3

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import L from 'leaflet';
-import { MapContainer, TileLayer, Marker } from 'react-leaflet';
+import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
 
-const BranchLeafletMap = ({ iconConfig }) => {
+const BranchLeafletMap = ({ iconConfig, CustomPopup }) => {
   const branch = Homeflow.get('branch');
 
   const defaultIconConfig = {
@@ -25,17 +25,25 @@ const BranchLeafletMap = ({ iconConfig }) => {
         attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
       />
-      <Marker position={[branch.lat, branch.lng]} icon={icon} />
+      <Marker position={[branch.lat, branch.lng]} icon={icon}>
+        {CustomPopup && (
+          <Popup>
+            <CustomPopup branch={branch} />
+          </Popup>
+        )}
+      </Marker>
     </MapContainer>
   );
 };
 
 BranchLeafletMap.propTypes = {
   iconConfig: PropTypes.object,
+  CustomPopup: PropTypes.elementType,
 };
 
 BranchLeafletMap.defaultProps = {
   iconConfig: null,
+  CustomPopup: null,
 };
 
 export default BranchLeafletMap;

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

@@ -39,8 +39,6 @@ class BranchMap extends React.Component {
     // Should this be added to Redux?
     const branch = Homeflow.get('branch');
 
-    // debugger;
-
     const options = {
       center: new google.maps.LatLng(branch.lat, branch.lng),
       mapTypeControl,
@@ -57,18 +55,34 @@ class BranchMap extends React.Component {
 
     const map = new google.maps.Map(document.getElementById('hfjs-branch-map'), options);
 
-    new google.maps.Marker({
+    const marker = new google.maps.Marker({
       position: { lat: branch.lat, lng: branch.lng },
       map,
       ...(iconConfig && { icon: iconConfig.iconUrl }),
     });
+
+    const branchPopupContent = document.getElementById('branch-map-popup-template')?.innerHTML;
+
+    if (branchPopupContent) {
+      const infoWindow = new google.maps.InfoWindow({
+        content: branchPopupContent,
+        ariaLabel: 'Custom Popup',
+      });
+
+      marker.addListener('click', () => {
+        infoWindow.open({
+          anchor: marker,
+          map,
+        });
+      });
+    }
   }
 
   render() {
-    const { google, iconConfig } = this.props;
+    const { google, iconConfig, CustomPopup } = this.props;
 
     if (!google) {
-      return <LazyLeafletMap iconConfig={iconConfig} />;
+      return <LazyLeafletMap iconConfig={iconConfig} CustomPopup={CustomPopup} />;
     }
 
     return (
@@ -86,6 +100,7 @@ BranchMap.propTypes = {
   initGoogleMaps: PropTypes.func.isRequired,
   google: PropTypes.bool,
   iconConfig: PropTypes.object,
+  CustomPopup: PropTypes.elementType,
   zoomControl: PropTypes.bool,
 };
 
@@ -97,6 +112,7 @@ BranchMap.defaultProps = {
   disableStreetview: false,
   google: false,
   iconConfig: null,
+  CustomPopup: null,
   zoomControl: false,
 };
 
@@ -107,4 +123,4 @@ const mapDispatchToProps = {
 export default connect(
   null,
   mapDispatchToProps,
-)(BranchMap);
+)(BranchMap);

package/package.json

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

package/properties/properties-display/properties-display.component.jsx

@@ -14,6 +14,7 @@ const PropertiesDisplay = ({
   displayType,
   infiniteScroll,
   inserts,
+  noResultsMessage,
   ...other
 }) => {
   const onScroll = () => {
@@ -49,9 +50,7 @@ const PropertiesDisplay = ({
   }, [properties]);
 
   if (!properties.length) {
-    return (
-      <p>There were no properties matching your search.</p>
-    );
+    return noResultsMessage;
   }
 
   const addWrapper = displayType === 'list';
@@ -107,10 +106,12 @@ PropertiesDisplay.propTypes = {
   displayType: PropTypes.string.isRequired,
   infiniteScroll: PropTypes.bool.isRequired,
   inserts: PropTypes.array,
+  noResultsMessage: PropTypes.node,
 };
 
 PropertiesDisplay.defaultProps = {
   inserts: null,
+  noResultsMessage: <p>There were no properties matching your search.</p>,
 };
 
 const mapStateToProps = (state) => ({

package/properties/property-map/property-leaflet-map.component.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import L from 'leaflet';
-import { MapContainer, TileLayer, Marker } from 'react-leaflet';
+import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
 
-const PropertyLeafletMap = () => {
+const PropertyLeafletMap = ({ CustomPopup }) => {
   const property = Homeflow.get('property');
   const customIcon = Homeflow.get('custom_map_icon');
 
@@ -23,9 +24,23 @@ const PropertyLeafletMap = () => {
         attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
         url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
       />
-      <Marker position={[property.lat, property.lng]} icon={defaultIcon} />
+      <Marker position={[property.lat, property.lng]} icon={defaultIcon}>
+        {CustomPopup && (
+          <Popup>
+            <CustomPopup property={property} />
+          </Popup>
+        )}
+      </Marker>
     </MapContainer>
   );
 };
 
+PropertyLeafletMap.propTypes = {
+  CustomPopup: PropTypes.elementType,
+};
+
+PropertyLeafletMap.defaultProps = {
+  CustomPopup: null,
+};
+
 export default PropertyLeafletMap;

package/properties/property-map/property-map.component.jsx

@@ -55,13 +55,29 @@ class PropertyMap extends React.Component {
       map,
       ...(iconConfig && { icon: iconConfig.iconUrl }),
     });
+
+    const propertyPopupContent = document.getElementById('property-show-map-popup-template')?.innerHTML;
+
+    if (propertyPopupContent) {
+      const infoWindow = new google.maps.InfoWindow({
+        content: propertyPopupContent,
+        ariaLabel: 'Custom Popup',
+      });
+
+      marker.addListener('click', () => {
+        infoWindow.open({
+          anchor: marker,
+          map,
+        });
+      });
+    }
   }
 
   render() {
-    const { google, iconConfig } = this.props;
+    const { google, iconConfig, CustomPopup } = this.props;
 
     if (!google) {
-      return <LazyLeafletMap iconConfig={iconConfig} />;
+      return <LazyLeafletMap iconConfig={iconConfig} CustomPopup={CustomPopup} />;
     }
 
     return (
@@ -79,6 +95,7 @@ PropertyMap.propTypes = {
   initGoogleMaps: PropTypes.func.isRequired,
   google: PropTypes.bool,
   iconConfig: PropTypes.object,
+  CustomPopup: PropTypes.elementType,
 };
 
 PropertyMap.defaultProps = {
@@ -89,6 +106,7 @@ PropertyMap.defaultProps = {
   disableStreetview: false,
   google: false,
   iconConfig: null,
+  CustomPopup: null,
 };
 
 const mapDispatchToProps = {
@@ -98,4 +116,4 @@ const mapDispatchToProps = {
 export default connect(
   null,
   mapDispatchToProps,
-)(PropertyMap);
+)(PropertyMap);

package/properties/property-results/property-results.component.jsx

@@ -26,6 +26,7 @@ const PropertyResults = ({
   infiniteScroll,
   noMap,
   inserts,
+  noResultsMessage,
   ...other
 }) => (
   <Router>
@@ -36,6 +37,7 @@ const PropertyResults = ({
           displayType="list"
           infiniteScroll={infiniteScroll}
           inserts={inserts}
+          noResultsMessage={noResultsMessage}
           {...other}
         />
       </Route>
@@ -46,6 +48,7 @@ const PropertyResults = ({
           displayType="grid"
           infiniteScroll={infiniteScroll}
           inserts={inserts}
+          noResultsMessage={noResultsMessage}
           {...other}
         />
       </Route>
@@ -57,6 +60,7 @@ const PropertyResults = ({
             displayType="map"
             infiniteScroll={infiniteScroll}
             inserts={inserts}
+            noResultsMessage={noResultsMessage}
             {...other}
           />
         ) : (
@@ -71,6 +75,7 @@ const PropertyResults = ({
             displayType="grid"
             infiniteScroll={infiniteScroll}
             inserts={inserts}
+            noResultsMessage={noResultsMessage}
             {...other}
           />
         </Route>
@@ -81,6 +86,7 @@ const PropertyResults = ({
             displayType="list"
             infiniteScroll={infiniteScroll}
             inserts={inserts}
+            noResultsMessage={noResultsMessage}
             {...other}
           />
         </Route>