Replace getOptions with normalizedOptions. Refactor Transformation to inherit CloudinaryComponent.

Author: Amir Tocker

src/components/CloudinaryComponent/CloudinaryComponent.js

@@ -40,50 +40,53 @@ export default class CloudinaryComponent extends Component {
   }
 
   getChildTransformations(children) {
-    return React.Children.map(children, child =>
-      CloudinaryComponent.getOptions(child.props, child.context) // TODO change to getTransformation()
-    );
+    return React.Children.map(children, child =>{
+      let options = CloudinaryComponent.normalizeOptions(child.props, child.context);
+      let childOptions = this.getChildTransformations(child.props.children);
+      if(childOptions !== undefined && childOptions !== null){
+        options.transformation = childOptions;
+      }
+      return options;
+    });
   }
 
-  getTransformation() {
-    let options = CloudinaryComponent.getOptions(this.props, this.context);
-    let childrenOptions = this.getChildTransformations(this.props.children);
-    if (!Util.isEmpty(childrenOptions)) {
-      options.transformation = childrenOptions;
+  getTransformation(props = this.props , context = this.context) {
+    let options = CloudinaryComponent.normalizeOptions(context, props );
+    if(this.props.children !== undefined){
+      let childrenOptions = this.getChildTransformations(this.props.children);
+      if (!Util.isEmpty(childrenOptions)) {
+        options.transformation = childrenOptions;
+      }
     }
     return options;
   }
 
   /**
-   * Combine props and context to create an option Object that can be passed to Cloudinary methods.<br>
-   *   All names are converted to snake_case.
-   * @param props
-   * @param context
-   * @returns {{}}
+   * Combine properties of all options to create an option Object that can be passed to Cloudinary methods.<br>
+   *   All names are converted to snake_case. undefined and null values are filtered out.
+   * @returns {Object}
+   * @param options one or more options objects
    */
-  static getOptions(props, context) {
-    var options = {};
-
-    for (let key in context) {
-      let value = context[key];
-      if (value !== null && value !== undefined) {
-        options[snakeCase(key)] = value;
+  static normalizeOptions(...options) {
+    var result = {};
+    return options.reduce((left, right)=> {
+        for (let key in right) {
+          let value = right[key];
+          if (value !== null && value !== undefined) {
+            left[snakeCase(key)] = value;
+          }
+        }
+        return left;
       }
-    }
-    for (let key in props) {
-      let value = props[key];
-      if (value !== null && value !== undefined) {
-        options[snakeCase(key)] = value;
-      }
-    }
-    return options;
+      , {});
   }
 
-  getUrl(props, context = {}) {
-    let options = this.getTransformation();
+  getUrl(props = this.props , context = this.context) {
+    let options = CloudinaryComponent.normalizeOptions(context, props);
+    let transformation = this.getTransformation(props, context);
     let cl = Cloudinary.new(options);
-    this.getChildTransformations(props.children);
-    return cl.url(props.publicId, options);
+    console.log("options: ", options, "transformation:", transformation);
+    return cl.url(props.publicId, transformation);
   }
 
 }
@@ -96,7 +99,7 @@ CloudinaryComponent.propTypes.publicId = PropTypes.string;
 CloudinaryComponent.childContextTypes = {};
 
 /**
- * Create a React type definition object. All items are PropTypes.string.
+ * Create a React type definition object. All items are PropTypes.string or [string] or object or [object].
  * @param {Array} configParams a list of parameter names
  * @returns {Object}
  */

src/components/Image/Image.js

@@ -1,31 +1,37 @@
 import React, {Component, PropTypes} from 'react';
-import cloudinary from 'cloudinary-core';
+import cloudinary, {Util} from 'cloudinary-core';
 import CloudinaryComponent from '../CloudinaryComponent';
 
 export default class Image extends CloudinaryComponent {
   constructor(props, context) {
     super(props, context);
     let url = this.getUrl(props, context);
+    this.handleResize = this.handleResize.bind(this);
     this.state = {url};
   }
 
   componentWillReceiveProps(nextProps, nextContext) {
     let url = this.getUrl(nextProps, nextContext);
     if(url !== this.state.url){
-      this.setState({url});
+      console.log("setting url ", url);
+      this.setState({url, width: 0});
     }
   }
 
   componentWillMount() {
+    window.addEventListener('resize', this.handleResize);
   }
 
   componentDidMount() {
   }
 
   componentWillUnmount() {
+    window.removeEventListener('resize', this.handleResize);
+
   }
 
   componentWillUpdate(nextProps, nextState, nextContext) {
+
   }
 
   componentDidUpdate(prevProps, prevState, prevContext) {
@@ -35,11 +41,46 @@ export default class Image extends CloudinaryComponent {
     return true;
   }
 
+  getUrl(props, context, width){
+    console.log("getUrl", this);
+    width = width ||  (this.state ? this.state.width: undefined);
+    console.log("width is ", width);
+    if(width){
+      console.log("Width is ", width);
+      props = Object.assign({width}, props);
+    }
+    console.log(props);
+    return super.getUrl(props, context);
+
+  }
+  handleResize(e){
+    const width = this.findContainerWidth(this.element);
+    if(!width) {
+      return;
+    }
+    let partialState = {width, url: this.getUrl(this.props, this.context, width)};
+    this.setState(partialState);
+  }
+
+  findContainerWidth(element) {
+    console.log("findContainerWidth");
+    var containerWidth, style;
+    containerWidth = 0;
+    while (((element = element != null ? element.parentNode : void 0) instanceof Element) && !containerWidth) {
+      style = window.getComputedStyle(element);
+      if (!/^inline/.test(style.display)) {
+        containerWidth = Util.width(element);
+      }
+    }
+    return containerWidth;
+  };
+
   render() {
-    var {public_id, children, ...options} = CloudinaryComponent.getOptions(this.props, this.context);
+    var {public_id, children, ...options} = CloudinaryComponent.normalizeOptions(this.props, this.context);
+    console.log("render image", this.state.url, this.state.width);
     var attributes = cloudinary.Transformation.new(options).toHtmlAttributes();
     return (
-      <img {...attributes} src={this.state.url} />
+      <img {...attributes} src={this.state.url} ref={(e)=>{this.element = e;}}/>
     );
   }
 }

src/components/Transformation/Transformation.js

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import CloudinaryComponent from '../CloudinaryComponent';
 
-export default class Transformation extends Component {
+export default class Transformation extends CloudinaryComponent {
   constructor(props) {
     super(props);
   }

src/components/Video/Video.js

@@ -41,7 +41,7 @@ export default class Video extends CloudinaryComponent {
       this.props);
     sourceTransformation = sourceTransformation || {};
     sourceTypes = sourceTypes || Cloudinary.DEFAULT_VIDEO_PARAMS.source_types;
-    options = CloudinaryComponent.getOptions(options, {});
+    options = CloudinaryComponent.normalizeOptions(options, {});
     let cld = Cloudinary.new(options);
     let sources = [];
     let tagAttributes = Transformation.new(options).toHtmlAttributes();

stories/index.js

@@ -7,9 +7,10 @@ import CloudinaryContext from '../src/components/CloudinaryContext';
 import cloudinary from 'cloudinary-core';
 
 storiesOf('Image', module).addWithInfo('image', "Basic tag", ()=> {
-    let t = {width: 0.5, crop: "scale"};
+    // let t = {width: 0.5, crop: "scale"};
+    let t = {crop: "scale"};
     return (
-      <Image cloudName="demo" publicId="sample" transformation={t}/>
+      <Image cloudName="demo" publicId="sample" crop="scale"/>
     )
   }
 ).addWithInfo('image with alt', "Demostrate using an img tag attribute", ()=> {
@@ -39,14 +40,15 @@ storiesOf('Image', module).addWithInfo('image', "Basic tag", ()=> {
       </div>
     )
   }
-).addWithInfo('image with chained transformation', 'image with chained transformation', ()=> {
+).addWithInfo('image with nested chained transformation', 'image with chained transformation', ()=> {
   let t = {width: 0.5, crop: "scale"};
   return (
     <div>
       <Image cloudName="demo" publicId="sample">
-        <Transformation width="200" crop="scale" angle="10"/>
-        <Transformation width="100" crop="crop"/>
-        <Transformation width="100" crop="scale" angle="-10"/>
+        <Transformation angle="-45"/>
+        <Transformation effect="trim" angle="45" crop="scale" width="600">
+          <Transformation overlay="text:Arial_100:Hello" />
+        </Transformation>
       </Image>
       <Image cloudName="demo" publicId="sample" width="100" crop="scale"/>
     </div>