Add Transformation component.

Author: Amir Tocker

src/components/CloudinaryComponent/CloudinaryComponent.js

@@ -39,14 +39,28 @@ export default class CloudinaryComponent extends Component {
     return null;
   }
 
+  getChildTransformations(children) {
+    return React.Children.map( children ,child =>
+      CloudinaryComponent.getOptions(child.props, child.context)
+    );
+  }
+
+  getTransformation(){
+    let options = CloudinaryComponent.getOptions(this.props, this.context);
+    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 {{}}
    */
-  getOptions(props, context) {
+  static getOptions(props, context) {
     var options = {};
 
     for(let key in context) {
@@ -65,8 +79,10 @@ export default class CloudinaryComponent extends Component {
   }
 
   getUrl(props, context = {}) {
-    var options = this.getOptions(props, context);
+    var options = CloudinaryComponent.getOptions(props, context);
+    options = this.getTransformation();
     let cl = Cloudinary.new(options);
+    this.getChildTransformations(props.children);
     return  cl.url(props.publicId, options);
   }
 

src/components/Image/Image.js

@@ -1,5 +1,5 @@
 import React, {Component, PropTypes} from 'react';
-import {Transformation} from 'cloudinary-core';
+import cloudinary from 'cloudinary-core';
 import CloudinaryComponent from '../CloudinaryComponent';
 
 export default class Image extends CloudinaryComponent {
@@ -36,8 +36,8 @@ export default class Image extends CloudinaryComponent {
   }
 
   render() {
-    var options = this.getOptions(this.props, this.context);
-    var attributes = Transformation.new(options).toHtmlAttributes();
+    var {children, ...options} = CloudinaryComponent.getOptions(this.props, this.context);
+    var attributes = cloudinary.Transformation.new(options).toHtmlAttributes();
     return (
       <img {...attributes} src={this.state.url} />
     );

src/components/Transformation/Transformation.js

@@ -0,0 +1,37 @@
+import React, {Component} from 'react';
+import CloudinaryComponent from '../CloudinaryComponent';
+
+export default class Transformation extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  componentWillReceiveProps(nextProps) {
+  }
+
+  componentWillMount() {
+  }
+
+  componentDidMount() {
+  }
+
+  componentWillUnmount() {
+  }
+
+  componentWillUpdate(nextProps, nextState) {
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    return true;
+  }
+
+  render() {
+    return null;
+  }
+}
+Transformation.propTypes = CloudinaryComponent.propTypes;
+Transformation.defaultProps = {};
+Transformation.contextTypes = {};

src/components/Transformation/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "transformation",
+  "version": "1.0.0",
+  "main": "./Transformation.js",
+  "private": true
+}

src/components/Video/Video.js

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

stories/index.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { storiesOf, action, linkTo } from '@kadira/storybook';
 import Image from '../src/components/Image';
 import Video from '../src/components/Video';
+import Transformation from '../src/components/Transformation';
 import CloudinaryContext from '../src/components/CloudinaryContext';
 import cloudinary from 'cloudinary-core';
 
@@ -37,11 +38,12 @@ storiesOf('Image', module)
   }).addWithInfo('image with chained transformation', 'image with chained transformation', ()=> {
     let t = { width: 0.5, crop: "scale"};
     return(<div>
-      <Image cloudName="demo" publicId="sample" width="100" crop="scale" angle="10">
-        <Transformation width="100" crop="scale" angle="10"/>
-        <Transformation width="100" crop="scale" angle="10"/>
+      <Image cloudName="demo" publicId="sample" >
+        <Transformation width="200" crop="scale" angle="10" />
+        <Transformation width="100" crop="crop"  />
+        <Transformation width="100" crop="scale" angle="-10"/>
       </Image>
-      <Image cloudName="demo" publicId="sample" width="100" crop="scale" angle="10" />
+      <Image cloudName="demo" publicId="sample" width="100" crop="scale" />
       </div>
     )
   });