Create CloudinaryComponent.

Author: Amir Tocker

src/components/CloudinaryComponent/CloudinaryComponent.js

@@ -0,0 +1,87 @@
+import React, {Component, PropTypes} from 'react';
+import cloudinary from 'cloudinary-core';
+
+const camelCase = cloudinary.Util.camelCase;
+const snakeCase = cloudinary.Util.snakeCase;
+
+export default class CloudinaryComponent extends Component {
+  constructor(props, context) {
+    super(props, context);
+  }
+
+  getChildContext() {
+    return {};
+  }
+
+  componentWillReceiveProps(nextProps) {
+  }
+
+  componentWillMount() {
+  }
+
+  componentDidMount() {
+  }
+
+  componentWillUnmount() {
+  }
+
+  componentWillUpdate(nextProps, nextState) {
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+  }
+
+  shouldComponentUpdate(nextProps, nextState) {
+    return true;
+  }
+
+  render() {
+    return null;
+  }
+
+  /**
+   * 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) {
+    var options = {};
+
+    for(let key in context) {
+      let value = context[key];
+      if(value !== null && value !== undefined) {
+        options[snakeCase(key)] = value;
+      }
+    }
+    for(let key in props) {
+      let value = props[key];
+      if(value !== null && value !== undefined) {
+        options[snakeCase(key)] = value;
+      }
+    }
+    return options;
+  }
+}
+CloudinaryComponent.VALID_OPTIONS = cloudinary.Configuration.CONFIG_PARAMS.concat(cloudinary.Transformation.new().PARAM_NAMES).map( camelCase);
+CloudinaryComponent.contextTypes = typesFrom(CloudinaryComponent.VALID_OPTIONS);
+
+CloudinaryComponent.propTypes = CloudinaryComponent.contextTypes ;
+
+CloudinaryComponent.childContextTypes = {};
+
+/**
+ * Create a React type definition object. All items are PropTypes.string.
+ * @param {Array} configparams a list of parameter names
+ * @returns {Object}
+ */
+function typesFrom(configparams) {
+  configparams = configparams || [];
+  const types = {};
+  for (let key of configparams) {
+    types[camelCase(key)] = PropTypes.string;
+  }
+  return types;
+}
+

src/components/CloudinaryComponent/package.json

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

src/components/CloudinaryContext/CloudinaryContext.js

@@ -1,15 +1,32 @@
-import React, {Component, PropTypes} from 'react';
-import cloudinary from 'cloudinary-core';
-
-export default class CloudinaryContext extends React.Component {
+import React from 'react';
+import CloudinaryComponent from '../CloudinaryComponent';
+
+/**
+ * Provides a container for Cloudinary components. Any option set in CloudinaryContext will be passed to the children.
+ * @example
+ *    <CloudinaryContext cloudName="mycloud" dpr="auto">
+ *      <!-- other tags -->
+ *      <Image publicId={id}/>
+ *    </CloudinaryContext>
+ *
+ */
+export default class CloudinaryContext extends CloudinaryComponent {
   constructor(props, context) {
     super(props, context);
     this.state = {};
   }
 
   getChildContext() {
     let {children, ...otherProps} = this.props;
-    return Object.assign({}, this.context, otherProps);
+    let context = {};
+    // only pass valid Cloudinary options
+    CloudinaryComponent.VALID_OPTIONS.forEach(key => {
+      let val = otherProps[key] || this.context[key];
+      if(val !== null && val !== undefined){
+        context[key] = val;
+      }
+    });
+    return context;
   }
 
   componentWillReceiveProps(nextProps, nextContext) {
@@ -40,19 +57,6 @@ export default class CloudinaryContext extends React.Component {
     );
   }
 }
-CloudinaryContext.propTypes = {};
+CloudinaryContext.propTypes = CloudinaryComponent.propTypes;
 CloudinaryContext.defaultProps = {};
-CloudinaryContext.contextTypes = {
-  cloudName: PropTypes.string.isRequired
-};
-CloudinaryContext.childContextTypes = {
-  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);
+CloudinaryContext.childContextTypes = CloudinaryComponent.contextTypes;

src/components/Image/Image.js

@@ -1,42 +1,27 @@
 import React, {Component, PropTypes} from 'react';
 import cloudinary from 'cloudinary-core';
+import CloudinaryComponent from '../CloudinaryComponent';
 
-export default class Image extends React.Component {
+export default class Image extends CloudinaryComponent {
   constructor(props, context) {
     super(props, context);
-    var options = Object.assign({}, context, props);
-    var options2 = this.snakeCase(options);
+    var options = this.getOptions(props, context);
+    var options2 = 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 options = Object.assign({}, nextContext, nextProps);
+    var options = this.getOptions(nextProps, nextContext);
 
     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,
-      transformation: transformation
-    })
+    if(url != this.state.url){
+      this.setState({
+        url: url
+      })
+    }
   }
 
   componentWillMount() {
@@ -59,7 +44,7 @@ export default class Image extends React.Component {
   }
 
   render() {
-    var options = Object.assign({}, this.context, this.props);
+    var options = this.getOptions(this.props, this.context);
     var {publicId, transformation, ...other} = this.props;
     var attributes = cloudinary.Transformation.new(options).toHtmlAttributes();
     return (
@@ -85,7 +70,4 @@ Image.propTypes = {
 
 };
 Image.defaultProps = {};
-Image.contextTypes = {
-  cloudName: PropTypes.string,
-  angle: PropTypes.string
-};
+Image.contextTypes = CloudinaryComponent.contextTypes;

stories/index.js

@@ -6,7 +6,7 @@ import CloudinaryContext from '../src/components/CloudinaryContext';
 
 let CLImage = Image;
 
-storiesOf('Cloudinary', module)
+storiesOf('Image', module)
   .add('image', ()=> {
     let t = { width: 0.5, crop: "scale"};
     return (
@@ -18,35 +18,47 @@ storiesOf('Cloudinary', module)
       <Image cloudName="demo" publicId="does-not-exist" alt="This image is intentionally missing" transformation={t}/>
     )
   })
+  .add('image with html attributes', ()=> {
+    return(
+      <Image cloudName="demo" publicId="sample"  html_width="100"/>
+    )
+  })
   .add('image with style', ()=> {
     let t = { width: 0.5, crop: "scale"};
     return(
       <Image cloudName="demo" publicId="sample" style={{border: "20px solid"}} transformation={t}/>
     )
-  })
+  });
+storiesOf('Video', module)
   .add('Video', ()=> {
     return (
       <Video />
-    )})
+    )});
+storiesOf('CloudinaryContext', module)
   .add('CloudinaryContext', ()=> {
     let t = { width: 0.5, crop: "scale"};
     return (
       <CloudinaryContext cloudName="demo" >
-        <ul><li>
+        <div><span>Inside a div: </span>
           <Image publicId="sample" transformation={t} width="50"/>
-          </li></ul>
+          </div>
 
           <Image publicId="sample" transformation={t}/>
       </CloudinaryContext>
     )})
-  .add('CloudinaryContext - nested', ()=> {
+  .add('Nested Context', ()=> {
     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}/>
-          </CloudinaryContext>
+      <CloudinaryContext cloudName="demo" width="50" crop="scale">
+        <Image publicId="sample"/>
+        <Image publicId="sample" radius="100"/>
+        <Image publicId="sample" angle="0"/>
+        <CloudinaryContext angle="20" width="100" style={{border: "2px solid"}}>
+          <span>Inner Context</span>
+          <Image publicId="sample"/>
+          <Image publicId="sample" radius="100"/>
+          <Image publicId="sample" angle="0"/>
+        </CloudinaryContext>
       </CloudinaryContext>
     )})
 ;