Don't convert keys to snake_case in normalizeOptions. Fixes #6.

Author: Amir Tocker

src/components/CloudinaryComponent/CloudinaryComponent.js

@@ -1,5 +1,6 @@
 import React, {Component, PropTypes} from 'react';
 import {Cloudinary, Configuration, Transformation, Util} from 'cloudinary-core';
+import {mapKeys} from '../../Util'
 
 const camelCase = Util.camelCase;
 const snakeCase = Util.snakeCase;
@@ -64,7 +65,7 @@ export default class CloudinaryComponent extends Component {
         for (let key in right) {
           let value = right[key];
           if (value !== null && value !== undefined) {
-            left[snakeCase(key)] = value;
+            left[key] = value;
           }
         }
         return left;
@@ -79,8 +80,8 @@ export default class CloudinaryComponent extends Component {
    */
   getUrl(options) {
     let transformation = this.getTransformation(options);
-    let cl = Cloudinary.new(options);
-    return cl.url(options.public_id, transformation);
+    let cl = Cloudinary.new(Util.withSnakeCaseKeys(options));
+    return cl.url(options.publicId, transformation);
   }
 
 }

src/components/Image/Image.js

@@ -102,7 +102,7 @@ export default class Image extends CloudinaryComponent {
   }
 
   render() {
-    var {public_id, responsive, responsive_debounce, children, ...options} = CloudinaryComponent.normalizeOptions(this.props,
+    var {publicId, responsive, responsiveDebounce, children, ...options} = CloudinaryComponent.normalizeOptions(this.props,
       this.context);
     var attributes = cloudinary.Transformation.new(options).toHtmlAttributes();
     return (

src/components/Video/Video.js

@@ -20,12 +20,12 @@ export default class Video extends CloudinaryComponent {
     sourceTransformation = sourceTransformation || {};
     sourceTypes = sourceTypes || Cloudinary.DEFAULT_VIDEO_PARAMS.source_types;
     options = CloudinaryComponent.normalizeOptions(options, {});
-    let cld = Cloudinary.new(options);
+    let cld = Cloudinary.new(Util.withSnakeCaseKeys(options));
     let sources = [];
     let tagAttributes = Transformation.new(options).toHtmlAttributes();
     if (Util.isPlainObject(poster)) {
       let defaults = poster.publicId !== undefined && poster.publicId !== null ? Cloudinary.DEFAULT_IMAGE_PARAMS : DEFAULT_POSTER_OPTIONS;
-      poster = cld.url(poster.publicId || publicId, Util.defaults({}, poster, defaults));
+      poster = cld.url(poster.publicId || publicId, Util.defaults({}, Util.withSnakeCaseKeys(poster), defaults));
     }
     if (!Util.isEmpty(poster)) {
       tagAttributes.poster = poster;

stories/index.js

@@ -38,6 +38,15 @@ storiesOf('Image', module).addWithInfo('image', "Basic tag", ()=> {
       <Image {...t} cloudName="demo" publicId="sample" style={{border: "20px solid"}}/>
     )
   }
+).addWithInfo('image with onError', 'image with onError', ()=> {
+    let t = {width: 0.5, crop: "scale"};
+    let onError = (e)=> { e.target.insertAdjacentHTML("afterend", "<div>Error handler was invoked.</div>")};
+    return (
+      <div>
+        <Image {...t} cloudName="demo" publicId="i-dont-exist" style={{border: "20px solid"}} onError={onError}/>
+      </div>
+    )
+  }
 ).addWithInfo('image with chained transformation', 'image with chained transformation', ()=> {
     return (
       <div>
@@ -99,7 +108,7 @@ storiesOf('Video', module).addWithInfo('Simple tag', 'Simple tag', ()=> {
   }
 ).addWithInfo('With source types', 'With source types', ()=> {
     return (
-      <Video cloudName="demo" controls="controls" publicId="dog" sourceTypes={['webm', 'ogv', 'mp4']}>
+      <Video cloudName="demo" controls="controls" publicId="dog" sourceTypes={['webm', 'ogv', 'mp4']} sourceTransformation={{webm: {aspectRatio: "1:1"}, ogv: {aspect_ratio: "3:2"}}}>
         Cannot display video.
       </Video>
     )

test/ImageTest.js

@@ -17,4 +17,38 @@ describe('Image', () => {
     expect(tag.type()).to.equal("img");
     expect(tag.state("url")).to.equal("http://res.cloudinary.com/demo/image/upload/c_scale,w_300/sample");
   });
+  it("should set event handlers", function() {
+    let width = 300;
+    let tag = shallow(<Image publicId="sample" cloudName="demo" width={width} crop="scale" onLoad={()=> "foo"}/>);
+    expect(tag.type()).to.equal("img");
+    expect(tag.state("url")).to.equal("http://res.cloudinary.com/demo/image/upload/c_scale,w_300/sample");
+    expect(tag.props().onLoad()).to.equal("foo")
+
+  });
+  it("should not pass-through Cloudinary attributes", function() {
+    let width = 300;
+
+    let tag2 = mount(<div width="300"><Image publicId="sample" cloudName="demo" width="auto" crop="scale" privateCdn="private" defaultImage="foobar" responsive responsiveUseBreakpoints /></div>);
+    let tag = shallow(<Image publicId="sample" cloudName="demo" width="auto" crop="scale" privateCdn="private" defaultImage="foobar" responsive responsiveUseBreakpoints />);
+    expect(tag.type()).to.equal("img");
+    expect(tag.state("url")).to.equal("");
+    expect(tag.props()).to.have.property('src');
+
+    // We are checking for both snake_case and camelCase keys
+    expect(tag.props()).not.to.have.property('privateCdn');
+    expect(tag.props()).not.to.have.property('private_cdn');
+    expect(tag.props()).not.to.have.property('defaultImage');
+    expect(tag.props()).not.to.have.property('default_image');
+    expect(tag.props()).not.to.have.property('responsiveUseBreakpoints');
+    expect(tag.props()).not.to.have.property('responsive_use_breakpoints');
+    tag = shallow(<Image publicId="sample" cloudName="demo" width={width} crop="scale" private_cdn="private" default_image="foobar"/>);
+    expect(tag.type()).to.equal("img");
+    expect(tag.state("url")).to.equal("http://demo-res.cloudinary.com/image/upload/c_scale,d_foobar,w_300/sample");
+    expect(tag.props()).to.have.property('src');
+    expect(tag.props()).not.to.have.property('privateCdn');
+    expect(tag.props()).not.to.have.property('private_cdn');
+    expect(tag.props()).not.to.have.property('defaultImage');
+    expect(tag.props()).not.to.have.property('default_image');
+
+  });
 });