Fix/dont rename non cloudinary props (#181)

Author: Nir Maoz

src/components/Image/Image.js

@@ -55,28 +55,25 @@ class Image extends CloudinaryComponent {
     const options = {...this.getOptions(), ...additionalOptions};
     const {nonCloudinaryProps} = extractCloudinaryProps(options);
 
-    let attributes = {...getImageTag(options).attributes(), ...nonCloudinaryProps};
+    // React requires camelCase instead of snake_case attributes
+    const attributes = ({...Util.withCamelCaseKeys(getImageTag(options).attributes()), ...nonCloudinaryProps});
 
-    //React requires camelCase instead of snake_case attributes
-    attributes = Util.withCamelCaseKeys(attributes);
+    // We want to keep 'data-src' if it exists
+    if (attributes.dataSrc) {
+      attributes['data-src'] = attributes.dataSrc;
+    }
 
     // Set placeholder Id
     if (placeholder && attributes.id) {
       attributes.id = attributes.id + '-cld-placeholder';
     }
 
-    // Set dataSrc if lazy loading and not in view
+    // Set data-src if lazy loading and not in view
     if (!isInView && this.shouldLazyLoad(options)) {
-      attributes.dataSrc = attributes.dataSrc || attributes.src;
+      attributes['data-src'] = attributes.dataSrc || attributes.src;
       delete attributes.src;
     }
 
-    // The data-src attribute was turned into dataSrc by the camelCase function,
-    // But it's needed by cloudinary-core's responsive() function. Notice that it's not snake_case.
-    if (attributes.dataSrc) {
-      attributes['data-src'] = attributes.dataSrc;
-    }
-
     // Remove unneeded attributes,
     ['dataSrc', 'accessibility', 'placeholder', 'breakpoints'].forEach(attr => {
       delete attributes[attr];
@@ -155,31 +152,38 @@ class Image extends CloudinaryComponent {
     });
   };
 
+  renderPlaceholder = (placeholder, attributes) => {
+    attributes.style = {...(attributes.style || {}), opacity: 0, position: 'absolute'}
+    attributes.onLoad = this.handleImageLoaded;
+    const placeholderWrapperStyle = {display: 'inline'}
+    const placeholderAttributes = this.getAttributes({placeholder: placeholder.props.type});
+
+    return (
+      <Fragment>
+        {this.renderImage(attributes)}
+        <div style={placeholderWrapperStyle}>
+          <img {...placeholderAttributes}/>
+        </div>
+      </Fragment>
+    );
+  };
+
+  renderImage = (attributes) => {
+    return <img ref={this.attachRef} {...attributes}/>
+  }
+
   render() {
-    const {attachRef, getAttributes, handleImageLoaded} = this;
+    const {isLoaded} = this.state;
     const {children} = this.getExtendedProps();
     const placeholder = this.getChildPlaceholder(children);
-    const {isLoaded} = this.state;
-
-    const attributes = getAttributes();
+    const attributes = this.getAttributes();
 
-    //If image wasn't loaded and there's a placeholder then we render it alongside the image.
+    //If image wasn't loaded and there's a child placeholder then we render it.
     if (!isLoaded && placeholder) {
-      const placeholderStyle = {display: isLoaded ? 'none' : 'inline'}
-      attributes.style = {...(attributes.style || {}), opacity: 0, position: 'absolute'}
-      attributes.onLoad = handleImageLoaded;
-      const placeholderAttributes = getAttributes({placeholder: placeholder.props.type});
-
-      return (
-        <Fragment>
-          <img ref={attachRef} {...attributes} />
-          <div style={placeholderStyle}>
-            <img {...placeholderAttributes}/>
-          </div>
-        </Fragment>
-      );
+      return this.renderPlaceholder(placeholder, attributes);
     }
-    return <img ref={attachRef} {...attributes}/>
+
+    return this.renderImage(attributes);
   }
 }
 

src/components/Video/Video.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {Cloudinary, Util} from 'cloudinary-core';
 import CloudinaryComponent from '../CloudinaryComponent';
+import extractCloudinaryProps from "../../Util/extractCloudinaryProps";
 
 /**
  * A component representing a Cloudinary served video
@@ -70,11 +71,16 @@ class Video extends CloudinaryComponent {
     } = this.getMergedProps();
 
     options = CloudinaryComponent.normalizeOptions(options, {});
+    const {cloudinaryProps, cloudinaryReactProps, nonCloudinaryProps} = extractCloudinaryProps(options);
+    options = {...cloudinaryProps, ...cloudinaryReactProps};
+
+    //const snakeCaseOptions = toSnakeCaseKeys(options);
     const snakeCaseOptions = Util.withSnakeCaseKeys(options);
     const cld = Cloudinary.new(snakeCaseOptions);
 
-    // Let cloudinary-core generate this video tag attributes
-    const tagAttributes = Util.withCamelCaseKeys(cld.videoTag(publicId, options).attributes());
+    // Use cloudinary-core to generate this video tag's attributes
+    let tagAttributes = cld.videoTag(publicId, options).attributes();
+    tagAttributes = {...Util.withCamelCaseKeys(tagAttributes), ...nonCloudinaryProps};
 
     // Aggregate child transformations, used for generating <source> tags for this video element
     const childTransformations = this.getTransformation({...options, children});

test/ImageTest.js

@@ -94,6 +94,14 @@ describe('Image', () => {
 
     expect(tag.find('img').prop('src')).to.match(/fn_wasm:blur.wasm\/sample/);
   });
+  it('should not change kebab-case param names', () => {
+    let tag = mount(
+      <Image publicId="sample" cloudName="demo" data-testid="testing"/>
+    );
+
+    expect(tag.find('img').prop('data-testid')).to.equal('testing');
+    expect(tag.find('img').prop('datatestid')).to.equal(undefined);
+  });
   it('should update on prop change', () => {
     let tag = mount(<Image publicId="sample" cloudName="demo"/>);
     expect(tag.find('img').prop('src')).to.equal('http://res.cloudinary.com/demo/image/upload/sample');

test/VideoTest.js

@@ -190,4 +190,13 @@ describe('Video', () => {
     expect(video.prop('plays_inline')).to.equal(undefined);
     expect(video.prop('auto_play')).to.equal(undefined);
   });
+  it('should not change kebab-case param names', () => {
+    let tag = mount(
+      <Video publicId="dog" cloudName="demo" data-testid="testing"/>
+    );
+
+    const video = tag.find('video');
+    expect(video.prop('data-testid')).to.equal("testing");
+    expect(video.prop('datatestid')).to.equal(undefined);
+  });
 });