homeflowjs 0.8.10 → 0.8.13

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

@@ -60,7 +60,7 @@ class BranchMap extends React.Component {
     new google.maps.Marker({
       position: { lat: branch.lat, lng: branch.lng },
       map,
-      icon: iconConfig.iconUrl,
+      ...(iconConfig && { icon: iconConfig.iconUrl }),
     });
   }
 

package/images/replaceImageDimensions.js

@@ -1,5 +1,31 @@
-const replaceImageDimensions = (src, width, height) => {
-  src.replace('_x_', `${width || '_'}x${height || '_'}`);
+const replaceImageDimensions = (src, width = '_', height = '_') => {
+  const srcToArray = src.split('/');
+  // /files/photos/12345/6789/my-photo.jpg
+  const srcPathWithoutSize = !isNaN(srcToArray[srcToArray.length - 2])
+                            && !isNaN(srcToArray[srcToArray.length - 3]);
+  // /files/photos/12345/6789/_x_/my-photo.jpg
+  const srcPathWithSize = !isNaN(srcToArray[srcToArray.length - 3])
+                          && !isNaN(srcToArray[srcToArray.length - 4]);
+  const widthXheight = `${width}x${height}`;
+  const lastSlashIndex = src.lastIndexOf('/');
+  const secondTolastSlashIndex = src.lastIndexOf('/', lastSlashIndex - 1);
+  const pathBeforeFileName = src.substring(secondTolastSlashIndex, lastSlashIndex + 1);
+  let formatedSrc = null; // default to null
+  if ((srcPathWithoutSize || srcPathWithSize) && src.includes('_x_')) {
+    formatedSrc = src.replace('_x_', widthXheight);
+  }
+  if ((srcPathWithoutSize || srcPathWithSize) && !src.includes('_x_') && !pathBeforeFileName.includes('x')) {
+    formatedSrc = `${src.substring(0, lastSlashIndex + 1)}${widthXheight}${src.substr(lastSlashIndex)}`;
+  }
+  // src contains width or height set on the cms but not the component
+  if ((srcPathWithoutSize || srcPathWithSize) && !src.includes('_x_') && pathBeforeFileName.includes('x')) {
+    formatedSrc = src;
+  }
+  if (srcPathWithoutSize === srcPathWithSize) {
+    console.log('Source not supported', src);
+    formatedSrc = null;
+  }
+  return formatedSrc;
 };
 
 export default replaceImageDimensions;

package/images/responsive-image.jsx

@@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
 import replaceImageDimensions from './replaceImageDimensions';
 
 const ResponsiveImage = ({
-  src, alt, srcSet, className, ...otherProps
+  src, alt, srcSet, className, lazyload, ...otherProps
 }) => {
   const renderSrcSet = () => {
-    if (srcSet) {
+    if (!srcSet) {
       return (
         `${replaceImageDimensions(src, 175)} 175w,
          ${replaceImageDimensions(src, 375)} 375w,
@@ -16,34 +16,36 @@ const ResponsiveImage = ({
          ${replaceImageDimensions(src, 1200)} 1200w,
          ${replaceImageDimensions(src, 1400)} 1400w,
          ${replaceImageDimensions(src, 1920)} 1920w,`
-         );
+      );
     }
     return srcSet;
   };
 
   return (
     <img
-      src={src}
+      src={replaceImageDimensions(src, 1200)}
       alt={alt}
       className={className}
-      loading="lazy"
+      loading={`${lazyload ? 'lazy' : 'eager'}`}
       srcSet={renderSrcSet()}
       {...otherProps}
     />
   );
 };
 
-
 ResponsiveImage.propTypes = {
   src: PropTypes.string.isRequired,
-  alt: PropTypes.string.isRequired,
+  alt: PropTypes.string,
   srcSet: PropTypes.string,
+  lazyload: PropTypes.bool,
   className: PropTypes.string,
 };
 
 ResponsiveImage.defaultProps = {
   srcSet: '',
   className: '',
+  lazyload: true,
+  alt: '', // Decorative images shouldn't have alt
 };
 
 export default ResponsiveImage;

package/package.json

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