Pass all properties to children of CloudinaryContext.

Author: Amir Tocker

src/components/CloudinaryContext/CloudinaryContext.js

@@ -1,16 +1,18 @@
 import React, {Component, PropTypes} from 'react';
+import cloudinary from 'cloudinary-core';
 
 export default class CloudinaryContext extends React.Component {
-  constructor(props) {
-    super(props);
+  constructor(props, context) {
+    super(props, context);
     this.state = {};
   }
 
   getChildContext() {
-    return {cloud_name: "demo"};
+    let {children, ...otherProps} = this.props;
+    return Object.assign({}, this.context, otherProps);
   }
 
-  componentWillReceiveProps(nextProps) {
+  componentWillReceiveProps(nextProps, nextContext) {
   }
 
   componentWillMount() {
@@ -22,27 +24,35 @@ export default class CloudinaryContext extends React.Component {
   componentWillUnmount() {
   }
 
-  componentWillUpdate(nextProps, nextState) {
+  componentWillUpdate(nextProps, nextState, nextContext) {
   }
 
-  componentDidUpdate(prevProps, prevState) {
+  componentDidUpdate(prevProps, prevState, prevContext) {
   }
 
-  shouldComponentUpdate(nextProps, nextState) {
+  shouldComponentUpdate(nextProps, nextState, nextContext) {
     return true;
   }
 
   render() {
     return (
-      <span>CloudinaryContext Not Implemented yet</span>
+      <div>{this.props.children}</div>
     );
   }
 }
-CloudinaryContext.propTypes = {initialCount: React.PropTypes.number};
-CloudinaryContext.defaultProps = {initialCount: 0};
+CloudinaryContext.propTypes = {};
+CloudinaryContext.defaultProps = {};
 CloudinaryContext.contextTypes = {
-  cloud_name: PropTypes.string.isRequired
+  cloudName: PropTypes.string.isRequired
 };
 CloudinaryContext.childContextTypes = {
-  cloud_name: PropTypes.string.isRequired
-};
+  cloudName: PropTypes.string.isRequired
+};
+for (let key of cloudinary.Configuration.CONFIG_PARAMS) {
+  CloudinaryContext.childContextTypes[cloudinary.Util.camelCase(key)] = PropTypes.string;
+}
+for (let key of cloudinary.Transformation.new().PARAM_NAMES) {
+  CloudinaryContext.childContextTypes[cloudinary.Util.camelCase(key)] = PropTypes.string;
+}
+
+console.log(CloudinaryContext.childContextTypes);

src/components/Image/Image.js

@@ -2,22 +2,40 @@ import React, {Component, PropTypes} from 'react';
 import cloudinary from 'cloudinary-core';
 
 export default class Image extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {bar: props.initialBar};
+  constructor(props, context) {
+    super(props, context);
+    var options = Object.assign({}, context, props);
+    var options2 = this.snakeCase(options);
+    let cl = cloudinary.Cloudinary.new(options2);
+    // let tr = cloudinary.Transformation.new(options);
+    //
+    console.log("trying url", props, options2);
+    var url = cl.url(props.publicId, options2);
+    console.log(url);
+    this.state = {url: url};
     // this.foo = this.foo.bind(this);
   }
 
+  snakeCase(options) {
+    let res = {};
+    for(let key of Object.keys(options)) {
+      res[cloudinary.Util.snakeCase(key)] = options[key];
+    }
+    return res;
+  }
+
   componentWillReceiveProps(nextProps, nextContext) {
-    var config = {};
-    cloudinary.Configuration.CONFIG_PARAMS.forEach((param)=> {
-      if(nextProps[param]){
-        config[param] = nextProps[param];
-      }
-    });
+    var options = Object.assign({}, nextContext, nextProps);
 
+    let cl = cloudinary.Cloudinary.new(options);
+    let tr = cloudinary.Transformation.new(options);
+    var url = cl.url(this.props.publicId, options);
+    console.log(url);
+    var transformation = tr.toString();
+    console.log(transformation);
     this.setState({
-      url: ""
+      url: url,
+      transformation: transformation
     })
   }
 
@@ -41,11 +59,11 @@ export default class Image extends React.Component {
   }
 
   render() {
-    let cl = cloudinary.Cloudinary.new({cloud_name: "demo"});
+    var options = Object.assign({}, this.context, this.props);
     var {publicId, transformation, ...other} = this.props;
-    var url = cl.url(publicId, transformation);
+    var attributes = cloudinary.Transformation.new(options).toHtmlAttributes();
     return (
-      <img {...other} src={url} />
+      <img {...attributes} src={this.state.url} />
     );
   }
 }
@@ -57,16 +75,17 @@ Image.propTypes = {
   transformation: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.object,
-    PropTypes.arrayOf(React.PropTypes.object)
+    PropTypes.arrayOf(PropTypes.object)
   ]),
   handleLoad: PropTypes.func,
   breakpoints: PropTypes.oneOfType([
     PropTypes.func,
-    PropTypes.arrayOf(React.PropTypes.number)
+    PropTypes.arrayOf(PropTypes.number)
   ])
 
 };
 Image.defaultProps = {};
 Image.contextTypes = {
-  config: React.PropTypes.object
+  cloudName: PropTypes.string,
+  angle: PropTypes.string
 };

stories/index.js

@@ -10,18 +10,18 @@ storiesOf('Cloudinary', module)
   .add('image', ()=> {
     let t = { width: 0.5, crop: "scale"};
     return (
-    <Image publicId="sample" transformation={t}/>
+    <Image cloudName="demo" publicId="sample" transformation={t}/>
   )})
   .add('image with alt', ()=> {
     let t = { width: 0.5, crop: "scale"};
     return(
-      <Image publicId="does-not-exist" alt="This image is intentionally missing" transformation={t}/>
+      <Image cloudName="demo" publicId="does-not-exist" alt="This image is intentionally missing" transformation={t}/>
     )
   })
   .add('image with style', ()=> {
     let t = { width: 0.5, crop: "scale"};
     return(
-      <Image publicId="sample" style={{border: "20px solid"}} transformation={t}/>
+      <Image cloudName="demo" publicId="sample" style={{border: "20px solid"}} transformation={t}/>
     )
   })
   .add('Video', ()=> {
@@ -31,10 +31,22 @@ storiesOf('Cloudinary', module)
   .add('CloudinaryContext', ()=> {
     let t = { width: 0.5, crop: "scale"};
     return (
-      <CloudinaryContext >
-        <div>
+      <CloudinaryContext cloudName="demo" >
+        <ul><li>
+          <Image publicId="sample" transformation={t} width="50"/>
+          </li></ul>
+
+          <Image publicId="sample" transformation={t}/>
+      </CloudinaryContext>
+    )})
+  .add('CloudinaryContext - nested', ()=> {
+    let t = { width: 0.5, crop: "scale"};
+    return (
+      <CloudinaryContext cloudName="demo" angle="30">
+          <Image publicId="sample"  width="50"/>
+        <CloudinaryContext cloudName="demo" angle="20" width="100">
           <Image publicId="sample" transformation={t}/>
-        </div>
+          </CloudinaryContext>
       </CloudinaryContext>
     )})
 ;