Add debounce to responsive functionality.

Author: Amir Tocker

src/components/CloudinaryComponent/CloudinaryComponent.js

@@ -68,7 +68,6 @@ export default class CloudinaryComponent extends Component {
    * @param options one or more options objects
    */
   static normalizeOptions(...options) {
-    var result = {};
     return options.reduce((left, right)=> {
         for (let key in right) {
           let value = right[key];
@@ -84,7 +83,6 @@ export default class CloudinaryComponent extends Component {
   getUrl(options) {
     let transformation = this.getTransformation(options);
     let cl = Cloudinary.new(options);
-    console.log("options: ", options, "transformation:", transformation);
     return cl.url(options.public_id, transformation);
   }
 

src/components/Image/Image.js

@@ -1,47 +1,25 @@
 import React, {Component, PropTypes} from 'react';
 import cloudinary, {Util} from 'cloudinary-core';
 import CloudinaryComponent from '../CloudinaryComponent';
-
-function firstDefined(...values){
-  for(let value of values) {
-    if(value !== undefined) return value;
-  }
-  return undefined;
-}
-
-function defaultBreakpoints(width, steps = 100) {
-  return steps * Math.ceil(width / steps);
-}
-
-function closestAbove(list, value) {
-  var i;
-  i = list.length - 2;
-  while (i >= 0 && list[i] >= value) {
-    i--;
-  }
-  return list[i + 1];
-}
+import debounce from '../../util/debounce';
+import firstDefined from '../../util/firstDefined';
 
 export default class Image extends CloudinaryComponent {
   constructor(props, context) {
     super(props, context);
-    console.log("Image constructor");
     let options = CloudinaryComponent.normalizeOptions(context, props);
-    let url = this.getUrl(options);
     this.handleResize = this.handleResize.bind(this);
 
     let state = {responsive: false, url: "", breakpoints: defaultBreakpoints};
     this.state = Object.assign(state, this.prepareState(props, context));
     this.state = state;
-    console.log(this);
   }
 
   get window() {
     return (this.element && this.element.ownerDocument) ? (this.element.ownerDocument.defaultView || window) : window;
   }
 
   componentWillReceiveProps(nextProps, nextContext) {
-    console.log("componentWillReceiveProps",nextProps, nextContext);
     let state = this.prepareState(nextProps, nextContext);
     this.setState(state);
   }
@@ -50,80 +28,80 @@ export default class Image extends CloudinaryComponent {
     let options = CloudinaryComponent.normalizeOptions(context, props);
     let url = this.getUrl(options);
     let state = {};
-    console.log("prepareState options ", options);
     if (options.breakpoints !== undefined) {
       state.breakpoints = options.breakpoints;
     }
     if (options.responsive) {
-      console.log("prepareState - responsive");
       state.responsive = true;
       url = this.cloudinary_update(url, state);
     }
 
     let currentState = this.state || {};
     if (/* FIXME probably not needed */ Util.isEmpty(currentState.url) || url !== currentState.url) {
-      console.log("prepareState setting url ", url);
       state.url = url;
     }
     return state;
   }
 
   componentWillMount() {
-    console.log("componentWillMount");
     super.componentWillMount();
   }
 
   componentDidMount() {
-    console.log("componentDidMount");
     super.componentDidMount();
     // now that we have a this.element, we need to calculate the URL
     let state = this.prepareState();
-    if(state.url !== undefined){
-      console.log("componentDidMount setting state");
+    if (state.url !== undefined) {
       this.setState(state);
     }
   }
 
   componentWillUnmount() {
-    console.log("componentWillUnmount");
-    this.window.removeEventListener('resize', this.handleResize);
+    this.element = undefined;
+    if (this.listener) {
+      this.listener.cancel();
+      this.window.removeEventListener('resize', this.listener);
+    }
+    this.listener = undefined;
   }
 
   componentWillUpdate(nextProps, nextState, nextContext) {
     // TODO check responsive. also check for responsive state change.
-    console.log("componentWillUpdate", nextState);
-    if(nextState.responsive){
-      console.log("componentWillUpdate - setting listener");
-      this.window.addEventListener('resize', this.handleResize);
+    if (nextState.responsive) {
+      const wait = firstDefined(nextProps.responsiveDebounce, nextContext.responsiveDebounce, 100);
+      if (this.listener) {
+        this.window.removeEventListener('resize', this.listener);
+      }
+      this.listener = debounce(this.handleResize, wait);
+      this.window.addEventListener('resize', this.listener);
     }
-
   }
 
   componentDidUpdate(prevProps, prevState, prevContext) {
-    console.log("componentDidUpdate");
   }
 
   shouldComponentUpdate(nextProps, nextState, nextContext) {
-    console.log("shouldComponentUpdate");
     return true;
   }
 
-  handleResize(e){
+  handleResize(e) {
     let options = CloudinaryComponent.normalizeOptions(this.context, this.props);
     let url = this.getUrl(options);
-    if(this.state.responsive){
+    if (this.state.responsive) {
       url = this.cloudinary_update(url);
       let partialState = {url: url};
-      this.setState(partialState);
+      if (this.element) {
+        this.setState(partialState);
+      }
     }
   }
 
   render() {
-    var {public_id, responsive, children, ...options} = CloudinaryComponent.normalizeOptions(this.props, this.context);
-    console.log("render image", this._reactInternalInstance._debugID, this.state.url, this.state.width);
+    var {public_id, responsive, responsive_debounce, children, ...options} = CloudinaryComponent.normalizeOptions(this.props,
+      this.context);
     var attributes = cloudinary.Transformation.new(options).toHtmlAttributes();
     return (
-      <img {...attributes} src={this.state.url} ref={(e)=>{this.element = e;}}/>
+      <img {...attributes} src={this.state.url} ref={(e)=> {this.element = e;}}/>
     );
   }
 
@@ -139,13 +117,11 @@ export default class Image extends CloudinaryComponent {
         containerWidth = Util.width(element);
       }
     }
-    console.log("findContainerWidth returning ", containerWidth);
     return containerWidth;
   };
 
   applyBreakpoints(tag, width, steps, options) {
-    console.log("applyBreakpoints");
-    var ref, ref1, ref2, responsive_use_breakpoints;
+    var responsive_use_breakpoints;
     options = CloudinaryComponent.normalizeOptions(this.context, this.props, options);
     responsive_use_breakpoints = options.responsiveUseBreakpoints;
     if ((!responsive_use_breakpoints) || (responsive_use_breakpoints === 'resize' && !options.resizing)) {
@@ -156,14 +132,13 @@ export default class Image extends CloudinaryComponent {
   };
 
   calc_breakpoint(element, width, steps) {
-    console.log("calc_breakpoint");
     var breakpoints, point;
     breakpoints = this.state.breakpoints || defaultBreakpoints;
     if (Util.isFunction(breakpoints)) {
       return breakpoints(width, steps);
     } else {
       if (Util.isString(breakpoints)) {
-        breakpoints = ((function() {
+        breakpoints = ((function () {
           var j, len, ref, results;
           ref = breakpoints.split(',');
           results = [];
@@ -172,7 +147,7 @@ export default class Image extends CloudinaryComponent {
             results.push(parseInt(point));
           }
           return results;
-        })()).sort(function(a, b) {
+        })()).sort(function (a, b) {
           return a - b;
         });
       }
@@ -195,8 +170,8 @@ export default class Image extends CloudinaryComponent {
     }
     return dprString;
   };
+
   updateDpr(dataSrc, roundDpr) {
-    console.log("updateDpr");
     return dataSrc.replace(/\bdpr_(1\.0|auto)\b/g, 'dpr_' + this.device_pixel_ratio(roundDpr));
   };
 
@@ -205,7 +180,7 @@ export default class Image extends CloudinaryComponent {
     imageWidth = this.state.width || 0;
     if (requiredWidth > imageWidth) {
       imageWidth = requiredWidth;
-      this.setState( {width: requiredWidth});
+      this.setState({width: requiredWidth});
     }
     return imageWidth;
   };
@@ -214,35 +189,40 @@ export default class Image extends CloudinaryComponent {
     var requiredWidth;
     var match;
     let resultUrl = this.updateDpr(url, options.roundDpr);
-    console.group("cloudinary_update", resultUrl);
-    console.log("state", this.state);
-    if(options.responsive || this.state && this.state.responsive) {
-      console.log("responsive");
+    if (options.responsive || this.state && this.state.responsive) {
       let containerWidth = this.findContainerWidth();
       if (containerWidth !== 0) {
         if (/w_auto:breakpoints/.test(resultUrl)) {
-            requiredWidth = this.maxWidth(containerWidth, this.element);
-            resultUrl = resultUrl.replace(/w_auto:breakpoints([_0-9]*)(:[0-9]+)?/, "w_auto:breakpoints$1:" + requiredWidth);
+          requiredWidth = this.maxWidth(containerWidth, this.element);
+          resultUrl = resultUrl.replace(/w_auto:breakpoints([_0-9]*)(:[0-9]+)?/,
+            "w_auto:breakpoints$1:" + requiredWidth);
         } else if (match = /w_auto(:(\d+))?/.exec(resultUrl)) {
-            requiredWidth = this.applyBreakpoints(this.element, containerWidth, match[2], options);
-            requiredWidth = this.maxWidth(requiredWidth, this.element);
-            resultUrl = resultUrl.replace(/w_auto[^,\/]*/g, "w_" + requiredWidth);
+          requiredWidth = this.applyBreakpoints(this.element, containerWidth, match[2], options);
+          requiredWidth = this.maxWidth(requiredWidth, this.element);
+          resultUrl = resultUrl.replace(/w_auto[^,\/]*/g, "w_" + requiredWidth);
         }
-        // Util.removeAttribute(this.element, 'width');
-        // if (!options.responsive_preserve_height) {
-        //   Util.removeAttribute(this.element, 'height');
-        // }
       } else {
         resultUrl = "";
       }
-
     }
-    console.log("cloudinary_update returning", resultUrl);
-    console.groupEnd();
     return resultUrl;
   }
 }
 
 Image.defaultProps = {};
 Image.contextTypes = CloudinaryComponent.contextTypes;
-Image.propTypes = CloudinaryComponent.propTypes;
+Image.propTypes = CloudinaryComponent.propTypes;
+
+
+function defaultBreakpoints(width, steps = 100) {
+  return steps * Math.ceil(width / steps);
+}
+
+function closestAbove(list, value) {
+  var i;
+  i = list.length - 2;
+  while (i >= 0 && list[i] >= value) {
+    i--;
+  }
+  return list[i + 1];
+}

src/components/Transformation/Transformation.js

@@ -6,24 +6,6 @@ export default class Transformation extends CloudinaryComponent {
     super(props);
   }
 
-  componentWillReceiveProps(nextProps) {
-  }
-
-  componentWillMount() {
-  }
-
-  componentDidMount() {
-  }
-
-  componentWillUnmount() {
-  }
-
-  componentWillUpdate(nextProps, nextState) {
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-  }
-
   shouldComponentUpdate(nextProps, nextState) {
     return true;
   }

src/util/debounce.js

@@ -0,0 +1,29 @@
+export default function debounce(func, wait, immediate) {
+  let timeout = null;
+  let debounced =  () => {
+    const context = this;
+    const args = arguments;
+    const callNow = immediate && !timeout;
+    if(timeout){
+      clearTimeout(timeout);
+    }
+    const later = () => {
+      timeout = null;
+      if (!immediate) {
+        func.apply(context, args);
+      }
+    };
+
+    timeout = setTimeout(later, wait);
+    if (callNow) {
+      func.apply(context, args);
+    }
+  };
+
+  debounced.cancel = ()=>{
+    clearTimeout(timeout);
+    timeout = null;
+  };
+  return debounced;
+
+}

src/util/firstDefined.js

@@ -0,0 +1,6 @@
+export default function firstDefined(...values){
+  for(let value of values) {
+    if(value !== undefined) return value;
+  }
+  return undefined;
+}

stories/index.js

@@ -7,17 +7,20 @@ import CloudinaryContext from '../src/components/CloudinaryContext';
 import cloudinary from 'cloudinary-core';
 
 storiesOf('Image', module).addWithInfo('image', "Basic tag", ()=> {
-    // let t = {width: 0.5, crop: "scale"};
-    let t = {crop: "scale"};
     return (
-      <Image cloudName="demo" publicId="sample" crop="scale"/>
+      <Image cloudName="demo" publicId="sample"/>
     )
   }
 ).addWithInfo('responsive image', "Basic tag", ()=> {
     return (
       <Image cloudName="demo" publicId="sample" crop="scale" width="auto" responsive/>
     )
   }
+).addWithInfo('responsive image with very slow debounce', "Basic tag", ()=> {
+    return (
+      <Image cloudName="demo" publicId="sample" crop="scale" width="auto" responsive responsiveDebounce="2000"/>
+    )
+  }
 ).addWithInfo('image with alt', "Demostrate using an img tag attribute", ()=> {
     let t = {width: 0.5, crop: "scale"};
     return (
@@ -32,11 +35,10 @@ storiesOf('Image', module).addWithInfo('image', "Basic tag", ()=> {
 ).addWithInfo('image with style', 'image with style', ()=> {
     let t = {width: 0.5, crop: "scale"};
     return (
-      <Image cloudName="demo" publicId="sample" style={{border: "20px solid"}}/>
+      <Image {...t} cloudName="demo" publicId="sample" style={{border: "20px solid"}}/>
     )
   }
 ).addWithInfo('image with chained transformation', 'image with chained transformation', ()=> {
-    let t = {width: 0.5, crop: "scale"};
     return (
       <div>
         <Image cloudName="demo" publicId="sample" width="100" crop="scale" angle="10"
@@ -46,7 +48,6 @@ storiesOf('Image', module).addWithInfo('image', "Basic tag", ()=> {
     )
   }
 ).addWithInfo('image with nested chained transformation', 'image with chained transformation', ()=> {
-  let t = {width: 0.5, crop: "scale"};
   return (
     <div>
       <Image cloudName="demo" publicId="sample">