Use nextProps for updating calculated URL correctly (#73)

Author: eitanp461

src/components/CloudinaryComponent/CloudinaryComponent.js

@@ -47,20 +47,20 @@ class CloudinaryComponent extends Component {
   /**
    * Returns an object with all the transformation parameters based on the context and properties of this element
    * and any children.
-   * @param options
+   * @param extendedProps
    * @returns {object} a hash of transformation and configuration parameters
    * @protected
    */
-  getTransformation(options) {
+  getTransformation(extendedProps) {
     var transformation;
-    if (this.props.children !== undefined) {
-      let childrenOptions = this.getChildTransformations(this.props.children);
+    if (extendedProps.children !== undefined) {
+      let childrenOptions = this.getChildTransformations(extendedProps.children);
       if (!Util.isEmpty(childrenOptions)) {
         transformation = childrenOptions;
-        return {...options, transformation};
+        return {...extendedProps, transformation};
       }
     }
-    return {...options};
+    return {...extendedProps};
   }
 
   /**
@@ -85,14 +85,14 @@ class CloudinaryComponent extends Component {
 
   /**
    * Generate a Cloudinary resource URL based on the options provided and child Transformation elements
-   * @param options
+   * @param extendedProps React props combined with custom Cloudinary configuration options
    * @returns {string} a cloudinary URL
    * @protected
    */
-  getUrl(options) {
-    let transformation = this.getTransformation(options);
-    let cl = Cloudinary.new(Util.withSnakeCaseKeys(options));
-    return cl.url(options.publicId, transformation);
+  getUrl(extendedProps) {
+    let transformation = this.getTransformation(extendedProps);
+    let cl = Cloudinary.new(Util.withSnakeCaseKeys(extendedProps));
+    return cl.url(extendedProps.publicId, transformation);
   }
 
 }

src/components/Image/Image.js

@@ -45,13 +45,13 @@ class Image extends CloudinaryComponent {
    * @private
    */
   prepareState(props = this.props, context = this.context) {
-    let options = CloudinaryComponent.normalizeOptions(context, props);
-    let url = this.getUrl(options);
+    let extendedProps = CloudinaryComponent.normalizeOptions(context, props);
+    let url = this.getUrl(extendedProps);
     let state = {};
-    if (options.breakpoints !== undefined) {
-      state.breakpoints = options.breakpoints;
+    if (extendedProps.breakpoints !== undefined) {
+      state.breakpoints = extendedProps.breakpoints;
     }
-    if (options.responsive) {
+    if (extendedProps.responsive) {
       state.responsive = true;
       url = this.cloudinary_update(url, state);
     }

test/TransformationTest.js

@@ -1,44 +1,58 @@
-import React from 'react';
-import { expect } from 'chai';
-import { shallow, mount, render } from 'enzyme';
-import Image from '../src/components/Image';
-import Transformation from '../src/components/Transformation';
+import React from "react";
+import { expect } from "chai";
+import { shallow, mount, render } from "enzyme";
+import Image from "../src/components/Image";
+import Transformation from "../src/components/Transformation";
 
-
-describe('Transformation', () => {
-  beforeEach(() => {
-  });
+describe("Transformation", () => {
+  beforeEach(() => {});
   it("should create an img tag", function() {
     let tag = shallow(
-      <Image publicId="sample" cloudName="demo" >
-        <Transformation width="100" crop="scale" angle="10"/>
+      <Image publicId="sample" cloudName="demo">
+        <Transformation width="100" crop="scale" angle="10" />
       </Image>
     );
     expect(tag.name()).to.equal("img");
-    expect(tag.state("url")).to.equal("http://res.cloudinary.com/demo/image/upload/a_10,c_scale,w_100/sample");
+    expect(tag.state("url")).to.equal(
+      "http://res.cloudinary.com/demo/image/upload/a_10,c_scale,w_100/sample"
+    );
   });
   it("should allow chained transformations", function() {
     let tag = shallow(
-      <Image publicId="sample" cloudName="demo" >
-        <Transformation width="100" crop="scale"/>
+      <Image publicId="sample" cloudName="demo">
+        <Transformation width="100" crop="scale" />
         <Transformation width="200" crop="pad">
-          <Transformation angle="30"/>
+          <Transformation angle="30" />
         </Transformation>
       </Image>
     );
     expect(tag.type()).to.equal("img");
-    expect(tag.state("url")).to.equal("http://res.cloudinary.com/demo/image/upload/c_scale,w_100/a_30/c_pad,w_200/sample");
+    expect(tag.state("url")).to.equal(
+      "http://res.cloudinary.com/demo/image/upload/c_scale,w_100/a_30/c_pad,w_200/sample"
+    );
+  });
+  it("array should define a set of variables", function() {
+    let tag = shallow(
+      <Image
+        cloudName="demo"
+        publicId="sample"
+        variables={[["$z", 5], ["$foo", "$z * 2"]]}
+      />
+    );
+    expect(tag.type()).to.equal("img");
+    expect(tag.state("url")).to.equal(
+      "http://res.cloudinary.com/demo/image/upload/$z_5,$foo_$z_mul_2/sample"
+    );
+  });
+  it("updates transformations dynamically", function() {
+    let image = mount(
+      <Image publicId="sample" cloudName="demo">
+        <Transformation width="100" crop="scale" />
+      </Image>
+    );
+    expect(image.find('img').getElement().props.src).to.equal('http://res.cloudinary.com/demo/image/upload/c_scale,w_100/sample');
+    let transformation = mount(<Transformation width="200" crop="scale" />);
+    image.setProps({children: [transformation]});
+    expect(image.find('img').getElement().props.src).to.equal('http://res.cloudinary.com/demo/image/upload/c_scale,w_200/sample');
   });
-    it("array should define a set of variables", function () {
-        let tag = shallow(
-            <Image cloudName='demo'
-                   publicId='sample'
-                   variables={[
-                    ["$z", 5], ["$foo", "$z * 2"]
-                    ]}
-                    >
-            </Image>);
-        expect(tag.type()).to.equal("img");
-        expect(tag.state("url")).to.equal("http://res.cloudinary.com/demo/image/upload/$z_5,$foo_$z_mul_2/sample");
-    });
-});
+});