cloudinary-react - npm Package Compare versions

Comparing version 1.6.0 to 1.6.1

CHANGELOG.md

@@ -0,1 +1,8 @@
+1.6.1 / 2020-07-11
+==================
+
+* Fix bug where image width was set to 'null' for responsive images
+* Add a warning when 'responsive' prop is not affecting the transformation (#176)
+* Update cloudinary-core dependency to version 2.10.3
+
 1.6.0 / 2020-07-06
@@ -2,0 +9,0 @@ ==================

lib/components/Image/Image.js

@@ -58,5 +58,7 @@ "use strict";
 
+var RESPONSIVE_OVERRIDE_WARNING = ["Warning: passing a number value for width cancels the 'responsive' prop's effect on the image transformation.", "The 'responsive' prop affects the image transformation only when width === 'auto'.", "Passing 'width=\"auto\" responsive' will affect the actual image width that is fetched from Cloudinary.", "The 'responsive' prop causes the Image component to request an image which width is equal to the width of it's container.", "When passing 'width=\"auto\" responsive', you can set the <img> element width by passing a 'style' prop"].join('\n');
 /**
  * A component representing a Cloudinary served image
  */
+
 var Image = /*#__PURE__*/function (_CloudinaryComponent) {
@@ -75,3 +77,11 @@ _inherits(Image, _CloudinaryComponent);
     _defineProperty(_assertThisInitialized(_this), "isResponsive", function () {
-      return _this.props.responsive && _this.imgElement && _this.imgElement.current;
+      var _this$getExtendedProp = _this.getExtendedProps(),
+          responsive = _this$getExtendedProp.responsive,
+          width = _this$getExtendedProp.width;
+
+      if (responsive && width !== 'auto') {
+        console.warn(RESPONSIVE_OVERRIDE_WARNING);
+      }
+
+      return responsive && _this.imgElement && _this.imgElement.current;
     });
@@ -100,16 +110,27 @@
 
-      var attributes = _objectSpread(_objectSpread({}, (0, _Util.getImageTag)(options).attributes()), nonCloudinaryProps); // Set placeholder Id
+      var attributes = _objectSpread(_objectSpread({}, (0, _Util.getImageTag)(options).attributes()), nonCloudinaryProps); //React requires camelCase instead of snake_case attributes
 
 
+      attributes = _cloudinaryCore.Util.withCamelCaseKeys(attributes); // Set placeholder Id
+
       if (placeholder && attributes.id) {
         attributes.id = attributes.id + '-cld-placeholder';
+      } // Set dataSrc if lazy loading and not in view
+
+
+      if (!isInView && _this.shouldLazyLoad(options)) {
+        attributes.dataSrc = attributes.dataSrc || attributes.src;
+        delete attributes.src;
+      } // The data-src attribute was turned into dataSrc by the camelCase function,
+      // But it's needed by cloudinary-core's responsive() function. Notice that it's not snake_case.
+
+
+      if (attributes.dataSrc) {
+        attributes['data-src'] = attributes.dataSrc;
       } // Remove unneeded attributes,
 
 
-      ["src", "accessibility", "placeholder"].forEach(function (attr) {
+      ['dataSrc', 'accessibility', 'placeholder', 'breakpoints'].forEach(function (attr) {
         delete attributes[attr];
-      }); // Set src or data-src attribute
-
-      var srcAttrName = isInView || !_this.shouldLazyLoad(options) ? "src" : "data-src";
-      attributes[srcAttrName] = (0, _Util.getConfiguredCloudinary)(options).url(options.publicId, options);
+      });
       return attributes;
@@ -119,2 +140,4 @@ });
     _defineProperty(_assertThisInitialized(_this), "update", function () {
+      var isInView = _this.state.isInView;
+
       if (_this.isResponsive()) {
@@ -126,3 +149,3 @@ var removeListener = (0, _Util.makeElementResponsive)(_this.imgElement.current, _this.getOptions());
 
-      if (_this.shouldLazyLoad(_this.getExtendedProps())) {
+      if (!isInView && _this.shouldLazyLoad(_this.getExtendedProps())) {
         _cloudinaryCore.Util.detectIntersection(_this.imgElement.current, _this.onIntersect);
@@ -211,4 +234,4 @@ }
 
-      var _this$getExtendedProp = this.getExtendedProps(),
-          children = _this$getExtendedProp.children;
+      var _this$getExtendedProp2 = this.getExtendedProps(),
+          children = _this$getExtendedProp2.children;
 
@@ -215,0 +238,0 @@ var placeholder = this.getChildPlaceholder(children);

package.json

 {
   "name": "cloudinary-react",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "description": "Present Cloudinary images and videos using React components",
@@ -60,3 +60,3 @@ "main": "lib/index.js",
   "dependencies": {
-    "cloudinary-core": "^2.10.1",
+    "cloudinary-core": "^2.10.3",
     "prop-types": "^15.6.2"
@@ -63,0 +63,0 @@ },

src/components/Image/Image.js

 import React, {createRef, Fragment} from 'react';
 import CloudinaryComponent from '../CloudinaryComponent';
-import {extractCloudinaryProps, getImageTag, makeElementResponsive, getConfiguredCloudinary} from "../../Util";
+import {extractCloudinaryProps, getImageTag, makeElementResponsive} from "../../Util";
 import {Util} from "cloudinary-core";
 import PropTypes from "prop-types";
 
+const RESPONSIVE_OVERRIDE_WARNING = [
+  `Warning: passing a number value for width cancels the 'responsive' prop's effect on the image transformation.`,
+  `The 'responsive' prop affects the image transformation only when width === 'auto'.`,
+  `Passing 'width="auto" responsive' will affect the actual image width that is fetched from Cloudinary.`,
+  `The 'responsive' prop causes the Image component to request an image which width is equal to the width of it's container.`,
+  `When passing 'width="auto" responsive', you can set the <img> element width by passing a 'style' prop`
+].join('\n');
+
 /**
@@ -22,3 +30,8 @@ * A component representing a Cloudinary served image
   isResponsive = () => {
-    return this.props.responsive && this.imgElement && this.imgElement.current;
+    const {responsive, width} = this.getExtendedProps();
+    if (responsive && width !== 'auto') {
+      console.warn(RESPONSIVE_OVERRIDE_WARNING);
+    }
+
+    return responsive && this.imgElement && this.imgElement.current;
   }
@@ -48,2 +61,5 @@
 
+    //React requires camelCase instead of snake_case attributes
+    attributes = Util.withCamelCaseKeys(attributes);
+
     // Set placeholder Id
@@ -54,11 +70,19 @@ if (placeholder && attributes.id) {
 
+    // Set dataSrc if lazy loading and not in view
+    if (!isInView && this.shouldLazyLoad(options)) {
+      attributes.dataSrc = attributes.dataSrc || attributes.src;
+      delete attributes.src;
+    }
+
+    // The data-src attribute was turned into dataSrc by the camelCase function,
+    // But it's needed by cloudinary-core's responsive() function. Notice that it's not snake_case.
+    if (attributes.dataSrc) {
+      attributes['data-src'] = attributes.dataSrc;
+    }
+
     // Remove unneeded attributes,
-    ["src", "accessibility", "placeholder"].forEach(attr => {
+    ['dataSrc', 'accessibility', 'placeholder', 'breakpoints'].forEach(attr => {
       delete attributes[attr];
     });
 
-    // Set src or data-src attribute
-    const srcAttrName = isInView || !this.shouldLazyLoad(options) ? "src" : "data-src";
-    attributes[srcAttrName] = getConfiguredCloudinary(options).url(options.publicId, options);
-
     return attributes;
@@ -71,2 +95,4 @@ }
   update = () => {
+    const {isInView} = this.state;
+
     if (this.isResponsive()) {
@@ -77,3 +103,3 @@ const removeListener = makeElementResponsive(this.imgElement.current, this.getOptions());
 
-    if (this.shouldLazyLoad(this.getExtendedProps())) {
+    if (!isInView && this.shouldLazyLoad(this.getExtendedProps())) {
       Util.detectIntersection(this.imgElement.current, this.onIntersect);
@@ -161,3 +187,2 @@ }
     }
-
     return <img ref={attachRef} {...attributes}/>
@@ -164,0 +189,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

278320

increased by1.25%

Lines of code

2068

increased by1.82%

Dependency changes

• Updatedcloudinary-core@^2.10.3