cloudinary-react - npm Package Compare versions

Comparing version 1.6.1 to 1.6.2

CHANGELOG.md

@@ -0,1 +1,8 @@
+1.6.2 / 2020-07-16
+==================
+
+* Fix bug where non Cloudinary attribute names were changed (#181)
+* Add test for image update on prop change (#174)
+* Update readme: Audio, Placeholder & storybook
+
 1.6.1 / 2020-07-11
@@ -2,0 +9,0 @@ ==================

lib/components/Image/Image.js

@@ -106,23 +106,21 @@ "use strict";
       var _extractCloudinaryPro = (0, _Util.extractCloudinaryProps)(options),
-          nonCloudinaryProps = _extractCloudinaryPro.nonCloudinaryProps;
+          nonCloudinaryProps = _extractCloudinaryPro.nonCloudinaryProps; // React requires camelCase instead of snake_case attributes
 
-      var attributes = _objectSpread(_objectSpread({}, (0, _Util.getImageTag)(options).attributes()), nonCloudinaryProps); //React requires camelCase instead of snake_case attributes
 
+      var attributes = _objectSpread(_objectSpread({}, _cloudinaryCore.Util.withCamelCaseKeys((0, _Util.getImageTag)(options).attributes())), nonCloudinaryProps); // We want to keep 'data-src' if it exists
 
-      attributes = _cloudinaryCore.Util.withCamelCaseKeys(attributes); // Set placeholder Id
 
+      if (attributes.dataSrc) {
+        attributes['data-src'] = attributes.dataSrc;
+      } // Set placeholder Id
+
+
       if (placeholder && attributes.id) {
         attributes.id = attributes.id + '-cld-placeholder';
-      } // Set dataSrc if lazy loading and not in view
+      } // Set data-src if lazy loading and not in view
 
 
       if (!isInView && _this.shouldLazyLoad(options)) {
-        attributes.dataSrc = attributes.dataSrc || attributes.src;
+        attributes['data-src'] = 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,
@@ -181,2 +179,27 @@
 
+    _defineProperty(_assertThisInitialized(_this), "renderPlaceholder", function (placeholder, attributes) {
+      attributes.style = _objectSpread(_objectSpread({}, attributes.style || {}), {}, {
+        opacity: 0,
+        position: 'absolute'
+      });
+      attributes.onLoad = _this.handleImageLoaded;
+      var placeholderWrapperStyle = {
+        display: 'inline'
+      };
+
+      var placeholderAttributes = _this.getAttributes({
+        placeholder: placeholder.props.type
+      });
+
+      return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, _this.renderImage(attributes), /*#__PURE__*/_react["default"].createElement("div", {
+        style: placeholderWrapperStyle
+      }, /*#__PURE__*/_react["default"].createElement("img", placeholderAttributes)));
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "renderImage", function (attributes) {
+      return /*#__PURE__*/_react["default"].createElement("img", _extends({
+        ref: _this.attachRef
+      }, attributes));
+    });
+
     _this.imgElement = /*#__PURE__*/(0, _react.createRef)();
@@ -227,5 +250,3 @@ _this.state = {
     value: function render() {
-      var attachRef = this.attachRef,
-          getAttributes = this.getAttributes,
-          handleImageLoaded = this.handleImageLoaded;
+      var isLoaded = this.state.isLoaded;
 
@@ -236,27 +257,9 @@ var _this$getExtendedProp2 = this.getExtendedProps(),
       var placeholder = this.getChildPlaceholder(children);
-      var isLoaded = this.state.isLoaded;
-      var attributes = getAttributes(); //If image wasn't loaded and there's a placeholder then we render it alongside the image.
+      var attributes = this.getAttributes(); //If image wasn't loaded and there's a child placeholder then we render it.
 
       if (!isLoaded && placeholder) {
-        var placeholderStyle = {
-          display: isLoaded ? 'none' : 'inline'
-        };
-        attributes.style = _objectSpread(_objectSpread({}, attributes.style || {}), {}, {
-          opacity: 0,
-          position: 'absolute'
-        });
-        attributes.onLoad = handleImageLoaded;
-        var placeholderAttributes = getAttributes({
-          placeholder: placeholder.props.type
-        });
-        return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement("img", _extends({
-          ref: attachRef
-        }, attributes)), /*#__PURE__*/_react["default"].createElement("div", {
-          style: placeholderStyle
-        }, /*#__PURE__*/_react["default"].createElement("img", placeholderAttributes)));
+        return this.renderPlaceholder(placeholder, attributes);
       }
 
-      return /*#__PURE__*/_react["default"].createElement("img", _extends({
-        ref: attachRef
-      }, attributes));
+      return this.renderImage(attributes);
     }
@@ -263,0 +266,0 @@ }]);

lib/components/Video/Video.js

@@ -16,2 +16,4 @@ "use strict";
 
+var _extractCloudinaryProps = _interopRequireDefault(require("../../Util/extractCloudinaryProps"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -115,10 +117,17 @@
 
+      var _extractCloudinaryPro = (0, _extractCloudinaryProps["default"])(options),
+          cloudinaryProps = _extractCloudinaryPro.cloudinaryProps,
+          cloudinaryReactProps = _extractCloudinaryPro.cloudinaryReactProps,
+          nonCloudinaryProps = _extractCloudinaryPro.nonCloudinaryProps;
+
+      options = _objectSpread(_objectSpread({}, cloudinaryProps), cloudinaryReactProps); //const snakeCaseOptions = toSnakeCaseKeys(options);
+
       var snakeCaseOptions = _cloudinaryCore.Util.withSnakeCaseKeys(options);
 
-      var cld = _cloudinaryCore.Cloudinary["new"](snakeCaseOptions); // Let cloudinary-core generate this video tag attributes
+      var cld = _cloudinaryCore.Cloudinary["new"](snakeCaseOptions); // Use cloudinary-core to generate this video tag's attributes
 
 
-      var tagAttributes = _cloudinaryCore.Util.withCamelCaseKeys(cld.videoTag(publicId, options).attributes()); // Aggregate child transformations, used for generating <source> tags for this video element
+      var tagAttributes = cld.videoTag(publicId, options).attributes();
+      tagAttributes = _objectSpread(_objectSpread({}, _cloudinaryCore.Util.withCamelCaseKeys(tagAttributes)), nonCloudinaryProps); // Aggregate child transformations, used for generating <source> tags for this video element
 
-
       var childTransformations = _this.getTransformation(_objectSpread(_objectSpread({}, options), {}, {
@@ -125,0 +134,0 @@ children: children

package.json

 {
   "name": "cloudinary-react",
-  "version": "1.6.1",
+  "version": "1.6.2",
   "description": "Present Cloudinary images and videos using React components",
@@ -17,3 +17,4 @@ "main": "lib/index.js",
     "storybook": "start-storybook -p 6006",
-    "build-storybook": "del-cli docs && build-storybook -c .storybook -o docs"
+    "build-storybook": "del-cli docs && build-storybook -c .storybook -o docs",
+    "prepublishOnly": "npm run build-storybook"
   },
@@ -20,0 +21,0 @@ "repository": {

README.md

@@ -63,9 +63,14 @@
 
-The library includes 4 Elements:
+The library includes 6 Components:
 
 * CloudinaryContext
 * Image
+* Audio
 * Video
 * Transformation
+* Placeholder - can only be used as child of an Image component
 
+## Components Demo
+Storybook for the components is available [here](https://cloudinary.github.io/cloudinary-react/)
+
 ### CloudinaryContext
@@ -119,4 +124,11 @@ CloudinaryContext allows you to define shared parameters that are applied to all children elements.
 
+## Updating github pages
+The github pages source is the "gh-pages" branch. To generate updated storybook:
+1. Switch to "gh-pages" branch
+2. pull from master
+3. rebuild storybook by running "npm run build-storybook"
+4. commit and push
+
 ## License
 
 Released under the MIT license.

src/components/Image/Image.js

@@ -58,6 +58,9 @@ import React, {createRef, Fragment} from 'react';
 
-    let attributes = {...getImageTag(options).attributes(), ...nonCloudinaryProps};
+    // React requires camelCase instead of snake_case attributes
+    const attributes = ({...Util.withCamelCaseKeys(getImageTag(options).attributes()), ...nonCloudinaryProps});
 
-    //React requires camelCase instead of snake_case attributes
-    attributes = Util.withCamelCaseKeys(attributes);
+    // We want to keep 'data-src' if it exists
+    if (attributes.dataSrc) {
+      attributes['data-src'] = attributes.dataSrc;
+    }
 
@@ -69,14 +72,8 @@ // Set placeholder Id
 
-    // Set dataSrc if lazy loading and not in view
+    // Set data-src if lazy loading and not in view
     if (!isInView && this.shouldLazyLoad(options)) {
-      attributes.dataSrc = attributes.dataSrc || attributes.src;
+      attributes['data-src'] = 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,
@@ -160,27 +157,34 @@ ['dataSrc', 'accessibility', 'placeholder', 'breakpoints'].forEach(attr => {
 
+  renderPlaceholder = (placeholder, attributes) => {
+    attributes.style = {...(attributes.style || {}), opacity: 0, position: 'absolute'}
+    attributes.onLoad = this.handleImageLoaded;
+    const placeholderWrapperStyle = {display: 'inline'}
+    const placeholderAttributes = this.getAttributes({placeholder: placeholder.props.type});
+
+    return (
+      <Fragment>
+        {this.renderImage(attributes)}
+        <div style={placeholderWrapperStyle}>
+          <img {...placeholderAttributes}/>
+        </div>
+      </Fragment>
+    );
+  };
+
+  renderImage = (attributes) => {
+    return <img ref={this.attachRef} {...attributes}/>
+  }
+
   render() {
-    const {attachRef, getAttributes, handleImageLoaded} = this;
+    const {isLoaded} = this.state;
     const {children} = this.getExtendedProps();
     const placeholder = this.getChildPlaceholder(children);
-    const {isLoaded} = this.state;
+    const attributes = this.getAttributes();
 
-    const attributes = getAttributes();
-
-    //If image wasn't loaded and there's a placeholder then we render it alongside the image.
+    //If image wasn't loaded and there's a child placeholder then we render it.
     if (!isLoaded && placeholder) {
-      const placeholderStyle = {display: isLoaded ? 'none' : 'inline'}
-      attributes.style = {...(attributes.style || {}), opacity: 0, position: 'absolute'}
-      attributes.onLoad = handleImageLoaded;
-      const placeholderAttributes = getAttributes({placeholder: placeholder.props.type});
+      return this.renderPlaceholder(placeholder, attributes);
+    }
 
-      return (
-        <Fragment>
-          <img ref={attachRef} {...attributes} />
-          <div style={placeholderStyle}>
-            <img {...placeholderAttributes}/>
-          </div>
-        </Fragment>
-      );
-    }
-    return <img ref={attachRef} {...attributes}/>
+    return this.renderImage(attributes);
   }
@@ -187,0 +191,0 @@ }

src/components/Video/Video.js

@@ -5,2 +5,3 @@ import React from 'react';
 import CloudinaryComponent from '../CloudinaryComponent';
+import extractCloudinaryProps from "../../Util/extractCloudinaryProps";
 
@@ -74,7 +75,12 @@ /**
     options = CloudinaryComponent.normalizeOptions(options, {});
+    const {cloudinaryProps, cloudinaryReactProps, nonCloudinaryProps} = extractCloudinaryProps(options);
+    options = {...cloudinaryProps, ...cloudinaryReactProps};
+
+    //const snakeCaseOptions = toSnakeCaseKeys(options);
     const snakeCaseOptions = Util.withSnakeCaseKeys(options);
     const cld = Cloudinary.new(snakeCaseOptions);
 
-    // Let cloudinary-core generate this video tag attributes
-    const tagAttributes = Util.withCamelCaseKeys(cld.videoTag(publicId, options).attributes());
+    // Use cloudinary-core to generate this video tag's attributes
+    let tagAttributes = cld.videoTag(publicId, options).attributes();
+    tagAttributes = {...Util.withCamelCaseKeys(tagAttributes), ...nonCloudinaryProps};
 
@@ -81,0 +87,0 @@ // Aggregate child transformations, used for generating <source> tags for this video element

No alert changes

Improved metrics

Total package byte prevSize

280084

increased by0.63%

Lines of code

2082

increased by0.68%

Number of lines in readme file

133

increased by9.92%

No dependency changes