Merge pull request #7 from jayfunk/improvements

Improvements

Author: nrako

.gitignore

@@ -1,2 +1,3 @@
 node_modules
 npm-debug.log
+.idea

karma.conf.js

@@ -0,0 +1,32 @@
+module.exports = function (config) {
+  config.set({
+    frameworks: [
+      'mocha',
+      'chai',
+      'sinon',
+      'browserify'
+    ],
+
+    files: [
+      'test/**/*.js'
+    ],
+
+    browserify: {
+      debug: true
+    },
+
+    preprocessors: {
+      'test/**/*.js': ['browserify']
+    },
+
+    reporters: ['progress'],
+
+    browsers: ['Chrome'],
+
+    client: {
+      mocha: {
+        reporter: 'html'
+      }
+    }
+  });
+};

package.json

@@ -4,7 +4,7 @@
   "description": "React component to react on resize event using scroll trick",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "karma start --single-run"
   },
   "repository": {
     "type": "git",
@@ -23,7 +23,17 @@
     "object-assign": "^1.0.0"
   },
   "devDependencies": {
-    "react": ">=0.12.0"
+    "react": ">=0.12.0",
+    "chai": "^2.2.0",
+    "karma": "^0.12.31",
+    "karma-browserify": "^4.1.2",
+    "karma-chai": "^0.1.0",
+    "karma-chrome-launcher": "^0.1.7",
+    "karma-mocha": "^0.1.10",
+    "karma-sinon": "^1.0.4",
+    "mocha": "^2.2.4",
+    "react": "^0.12.0",
+    "sinon": "^1.14.1"
   },
   "peerDependencies": {
     "react": ">=0.12.0"

src/component.js

@@ -6,13 +6,20 @@ var React        = require('react');
 var objectAssign = require('object-assign');
 
 var Resizeable = React.createClass({
+
+  lastDimensions: {
+    width: null,
+    height: null
+  },
+
   propTypes: {
     triggersClass: React.PropTypes.string,
     expandClass: React.PropTypes.string,
     contractClass: React.PropTypes.string,
     embedCss: React.PropTypes.bool,
     onResize: React.PropTypes.func.isRequired
   },
+
   getDefaultProps: function () {
     return {
       triggersClass: 'resize-triggers',
@@ -32,8 +39,13 @@ var Resizeable = React.createClass({
 
   componentDidMount: function () {
     this.resetTriggers();
-    setTimeout(this.resetTriggers, 1000);
+    this.initialResetTriggersTimeout = setTimeout(this.resetTriggers, 1000);
   },
+
+  componentWillUnmount: function () {
+    clearTimeout(this.initialResetTriggersTimeout);
+  },
+
   componentDidUpdate: function () {
     this.resetTriggers();
   },
@@ -51,28 +63,29 @@ var Resizeable = React.createClass({
     expand.scrollTop         = expand.scrollHeight;
   },
 
-  checkTriggers: function () {
-    var element = this.refs.resizable.getDOMNode();
-    return element.offsetWidth != this.lastWidth || element.offsetHeight != this.lastHeight;
-  },
-
   onScroll: function () {
     if (this.r) this.cancelFrame(this.r);
     this.r = this.requestFrame(function () {
-      if (!this.checkTriggers())
-        return;
+      var dimensions = this.getDimensions();
 
-      var el = this.refs.resizable.getDOMNode();
+      if (this.haveDimensionsChanged(dimensions)) {
+        this.lastDimensions = dimensions;
+        this.props.onResize(dimensions);
+      }
+    }.bind(this));
+  },
 
-      this.lastWidth = el.offsetWidth;
-      this.lastHeight = el.offsetHeight;
+  getDimensions: function () {
+    var el = this.refs.resizable.getDOMNode();
 
-      this.props.onResize({
-        width: this.lastWidth,
-        height: this.lastHeight
-      });
+    return {
+      width: el.offsetWidth,
+      height: el.offsetHeight
+    };
+  },
 
-    }.bind(this));
+  haveDimensionsChanged: function (dimensions) {
+    return dimensions.width != this.lastDimensions.width || dimensions.height != this.lastDimensions.height;
   },
 
   render: function() {

test/ResizableTest.js

@@ -0,0 +1,39 @@
+var React = require('react/addons');
+var Resizable = require('../src/component');
+var ReactTestUtils = require('react/lib/ReactTestUtils');
+
+describe('Resizable', function () {
+
+  it('should mount', function () {
+    var root = ReactTestUtils.renderIntoDocument(React.createElement(Resizable, {
+      onResize: function () {}
+    }));
+
+    root.should.exist;
+  });
+
+  it('should clean up timeouts on unmount', function () {
+    var clock = sinon.useFakeTimers();
+    var container = document.createElement('div');
+
+    React.render(React.createElement(Resizable, {
+      onResize: function () {}
+    }), container);
+
+    React.unmountComponentAtNode(container);
+
+    clock.tick(1000);
+    clock.restore();
+  });
+
+  it('should have default value for last dimensions when first rendered', function (done) {
+    var node = ReactTestUtils.renderIntoDocument(React.createElement(Resizable, {
+      onResize: function () {
+        done();
+      }
+    }));
+    
+    ReactTestUtils.Simulate.scroll(node.refs.resizable);
+  });
+
+});