homeflowjs 0.7.28 → 0.7.29

package/images/index.js

@@ -0,0 +1,7 @@
+import ResponsiveImage from "./responsive-image";
+import replaceImageDimensions from "./replaceImageDimensions";
+
+export {
+  ResponsiveImage,
+  replaceImageDimensions,
+}

package/images/replaceImageDimensions.js

@@ -0,0 +1,5 @@
+const replaceImageDimensions = (src, width, height) => {
+  src.replace('_x_', `${width || '_'}x${height || '_'}`);
+};
+
+export default replaceImageDimensions;

package/images/responsive-image.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import replaceImageDimensions from './replaceImageDimensions';
+
+const ResponsiveImage = ({
+  src, alt, srcSet, className, ...otherProps
+}) => {
+  const renderSrcSet = () => {
+    if (srcSet) {
+      return (
+        `${replaceImageDimensions(src, 175)} 175w,
+         ${replaceImageDimensions(src, 375)} 375w,
+         ${replaceImageDimensions(src, 500)} 500w,
+         ${replaceImageDimensions(src, 700)} 700w,
+         ${replaceImageDimensions(src, 900)} 900w,
+         ${replaceImageDimensions(src, 1200)} 1200w,
+         ${replaceImageDimensions(src, 1400)} 1400w,
+         ${replaceImageDimensions(src, 1920)} 1920w,`
+         );
+    }
+    return srcSet;
+  };
+
+  return (
+    <img
+      src={src}
+      alt={alt}
+      className={className}
+      loading="lazy"
+      srcSet={renderSrcSet()}
+      {...otherProps}
+    />
+  );
+};
+
+
+ResponsiveImage.propTypes = {
+  src: PropTypes.string.isRequired,
+  alt: PropTypes.string.isRequired,
+  srcSet: PropTypes.string,
+  className: PropTypes.string,
+};
+
+ResponsiveImage.defaultProps = {
+  srcSet: '',
+  className: '',
+};
+
+export default ResponsiveImage;

package/package.json

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