Fix image component responsive prop

Author: nirmaoz

src/components/CloudinaryComponent/CloudinaryComponent.js

@@ -12,7 +12,10 @@ const camelCase = Util.camelCase;
  * @returns {object} an object with copied values
  */
 function only(source, keys = []) {
-  if(!source) return source
+  if(!source){
+    return source;
+  }
+
   return keys.reduce((tr, key) => {
     if (key in source) {
       tr[key] = source[key]
@@ -28,12 +31,17 @@ function only(source, keys = []) {
 class CloudinaryComponent extends PureComponent {
   constructor(props, context) {
     super(props, context);
+    this.getContext = this.getContext.bind(this);
   }
 
   render() {
     return null;
   }
 
+  getContext(){
+    return this.context || {};
+  }
+
   getChildTransformations(children) {
     if(children === undefined || children === null) return null;
     let mapped = React.Children.map(children, child =>{

src/components/CloudinaryContext/CloudinaryContext.js

@@ -20,8 +20,7 @@ class CloudinaryContext extends CloudinaryComponent {
   }
 
   render() {
-    const context = this.context || {};
-    const props = {...context, ...this.props};
+    const props = {...this.getContext(), ...this.props};
 
     const {children, cloudinaryProps, nonCloudinaryProps, cloudinaryReactProps} = extractCloudinaryProps(props);
 

src/components/Image/Image.js

@@ -34,7 +34,7 @@ class Image extends CloudinaryComponent {
     return (this.element && this.element.ownerDocument) ? (this.element.ownerDocument.defaultView || windowRef) : windowRef;
   }
 
-  prepareState(props = this.props, context = this.context) {
+  prepareState(props = this.props, context = this.getContext()) {
     let extendedProps = CloudinaryComponent.normalizeOptions(context, props);
     let url = this.getUrl(extendedProps);
     let state = {};
@@ -88,7 +88,7 @@ class Image extends CloudinaryComponent {
   componentDidUpdate(prevProps) {
     this.setState(this.prepareState());
     if (this.state.responsive) {
-      const wait = firstDefined(this.props.responsiveDebounce, this.context.responsiveDebounce, 100);
+      const wait = firstDefined(this.props.responsiveDebounce, this.getContext().responsiveDebounce, 100);
       if (this.listener) {
         this.window && this.window.removeEventListener('resize', this.listener);
       }
@@ -99,7 +99,7 @@ class Image extends CloudinaryComponent {
 
   render() {
     const {publicId, responsive, responsiveDebounce, children, ...options} =
-      CloudinaryComponent.normalizeOptions(this.props, this.context);
+      CloudinaryComponent.normalizeOptions(this.props, this.getContext());
     const attributes = cloudinary.Transformation.new(options).toHtmlAttributes();
     const {url} = this.state;
     return (
@@ -125,7 +125,7 @@ class Image extends CloudinaryComponent {
   };
 
   applyBreakpoints(width, steps, options) {
-    options = CloudinaryComponent.normalizeOptions(this.context, this.props, options);
+    options = CloudinaryComponent.normalizeOptions(this.getContext(), this.props, options);
     let responsiveUseBreakpoints = options.responsiveUseBreakpoints;
     if ((!responsiveUseBreakpoints) || (responsiveUseBreakpoints === 'resize' && !options.resizing)) {
       return width;

src/components/Video/Video.js

@@ -19,7 +19,7 @@ class Video extends CloudinaryComponent {
 
   render() {
     let {publicId, poster, sourceTypes, fallback, sourceTransformation: sourceTransformations, ...options} = Object.assign({},
-      this.context,
+      this.getContext(),
       this.props);
     sourceTransformations = sourceTransformations || {};
     sourceTypes = sourceTypes || Cloudinary.DEFAULT_VIDEO_PARAMS.source_types;

test/ImageTest.js

@@ -125,4 +125,9 @@ describe('Image', () => {
 
     expect(tag.find('img').prop('src')).to.match(/fn_wasm:blur.wasm\/sample/);
   });
+  it('should support responsive prop', () => {
+    let tag = mount(<Image publicId="sample" cloudName="demo"/>);
+    tag.setProps({responsive:true});
+    expect(tag.find('img').prop('src')).to.equal('http://res.cloudinary.com/demo/image/upload/sample');
+  });
 });