react-measure - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

bower.json

 {
   "name": "react-measure",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "homepage": "https://github.com/souporserious/react-measure",
@@ -5,0 +5,0 @@ "authors": [

dist/react-measure.js

@@ -177,3 +177,7 @@ (function webpackUniversalModuleDefinition(root, factory) {
 	    value: function _setMeasure(dimensions) {
-	      this.setState(dimensions);
+	      var _this2 = this;
+
+	      this.setState(dimensions, function () {
+	        _this2.props.onChange(dimensions);
+	      });
 	    }
@@ -227,7 +231,8 @@ }, {
 	      // grab dimensions of node
+	      // we get the parent offsets since we wrapped the child
 	      dimensions = {
 	        width: this._nodeCopy.offsetWidth,
 	        height: this._nodeCopy.offsetHeight,
-	        top: this._nodeCopy.offsetTop,
-	        left: this._nodeCopy.offsetLeft
+	        top: this._nodeCopy.parentNode.offsetTop,
+	        left: this._nodeCopy.parentNode.offsetLeft
 	      };
@@ -252,2 +257,10 @@
 	    }
+	  }], [{
+	    key: 'defaultProps',
+	    value: {
+	      onChange: function onChange() {
+	        return null;
+	      }
+	    },
+	    enumerable: true
 	  }]);
@@ -254,0 +267,0 @@

dist/react-measure.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("React")):"function"==typeof define&&define.amd?define(["React"],t):"object"==typeof exports?exports.Measure=t(require("React")):e.Measure=t(e.React)}(this,function(e){return function(e){function t(n){if(o[n])return o[n].exports;var r=o[n]={exports:{},id:n,loaded:!1};return e[n].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var o={};return t.m=e,t.c=o,t.p="dist/",t(0)}([function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var r=o(1),i=n(r);t["default"]=i["default"],e.exports=t["default"]},function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var u=function(){function e(e,t){for(var o=0;o<t.length;o++){var n=t[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,o,n){return o&&e(t.prototype,o),n&&e(t,n),t}}(),s=function(e,t,o){for(var n=!0;n;){var r=e,i=t,u=o;s=l=a=void 0,n=!1,null===r&&(r=Function.prototype);var s=Object.getOwnPropertyDescriptor(r,i);if(void 0!==s){if("value"in s)return s.value;var a=s.get;return void 0===a?void 0:a.call(u)}var l=Object.getPrototypeOf(r);if(null===l)return void 0;e=l,t=i,o=u,n=!0}},a=o(2),l=n(a),d=o(3),f=n(d),c=o(4),p=n(c),h=[];window.addEventListener("resize",function(){h.forEach(function(e){return e._forceMeasure()})});var Measure=function(e){function Measure(){var e=this;r(this,Measure),s(Object.getPrototypeOf(Measure.prototype),"constructor",this).apply(this,arguments),this.state={width:null,height:null,top:null,left:null},this._node=null,this._nodeCopy=null,this._nodeParent=null,this._copyAppended=!1,this._forceMeasure=function(){e.forceUpdate()}}return i(Measure,e),u(Measure,[{key:"componentWillMount",value:function(){this._removeClone=p["default"](this._removeClone,300),this._forceMeasure=f["default"](this._forceMeasure,300),this._setMeasure=f["default"](this._setMeasure,300)}},{key:"componentDidMount",value:function(){this._node=l["default"].findDOMNode(this),this._parentNode=this._node.parentNode,this.setState(this._measure(this._node)),h.push(this)}},{key:"componentDidUpdate",value:function(e,t){var o=this._measure(this._node);(t.width!==o.width||t.height!==o.height||t.top!==o.top||t.left!==o.left)&&this._setMeasure(o)}},{key:"componentWillUnmount",value:function(){var e=h.indexOf(this);e>-1&&h.splice(e,1)}},{key:"_setMeasure",value:function(e){this.setState(e)}},{key:"_measure",value:function(e){var t=void 0;if(!this._copyAppended){var o=document.createElement("div"),n=e.cloneNode(!0);o.style.height=0,o.style.position="relative",o.style.overflow="hidden";for(var r=n.querySelectorAll("input"),i=r.length;i--;)r[i].setAttribute("name","");var u=n.querySelectorAll("[data-reactid]");n.setAttribute("data-reactid","");for(var s=u.length;s--;)u[s].setAttribute("data-reactid","");n.style.boxSizing="border-box",n.style.width="auto",n.style.height="auto",n.style.position="absolute",n.style.visibility="hidden",o.appendChild(n),this._parentNode.appendChild(o),this._copyAppended=!0,this._nodeCopy=n}return t={width:this._nodeCopy.offsetWidth,height:this._nodeCopy.offsetHeight,top:this._nodeCopy.offsetTop,left:this._nodeCopy.offsetLeft},this._removeClone(),t}},{key:"_removeClone",value:function(){this._parentNode.removeChild(this._nodeCopy.parentNode),this._copyAppended=!1}},{key:"render",value:function(){return a.Children.only(this.props.children(this.state))}}]),Measure}(a.Component);t["default"]=Measure,e.exports=t["default"]},function(t,o){t.exports=e},function(e,t){"use strict";function o(e,t,o){void 0===t&&(t=250),t||(t=250);var n=void 0,r=void 0;return function(){var i=o||this,u=+new Date,s=arguments;n&&n+t>u?(clearTimeout(r),r=setTimeout(function(){n=u,e.apply(i,s)},t)):(n=u,e.apply(i,s))}}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=o,e.exports=t["default"]},function(e,t){"use strict";function o(e){var t=void 0===arguments[1]?250:arguments[1],o=null;return function(){var n=this,r=arguments;clearTimeout(o),o=setTimeout(function(){e.apply(n,r)},t)}}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=o,e.exports=t["default"]}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("React")):"function"==typeof define&&define.amd?define(["React"],t):"object"==typeof exports?exports.Measure=t(require("React")):e.Measure=t(e.React)}(this,function(e){return function(e){function t(n){if(o[n])return o[n].exports;var r=o[n]={exports:{},id:n,loaded:!1};return e[n].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var o={};return t.m=e,t.c=o,t.p="dist/",t(0)}([function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var r=o(1),i=n(r);t["default"]=i["default"],e.exports=t["default"]},function(e,t,o){"use strict";function n(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var u=function(){function e(e,t){for(var o=0;o<t.length;o++){var n=t[o];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,o,n){return o&&e(t.prototype,o),n&&e(t,n),t}}(),a=function(e,t,o){for(var n=!0;n;){var r=e,i=t,u=o;a=l=s=void 0,n=!1,null===r&&(r=Function.prototype);var a=Object.getOwnPropertyDescriptor(r,i);if(void 0!==a){if("value"in a)return a.value;var s=a.get;return void 0===s?void 0:s.call(u)}var l=Object.getPrototypeOf(r);if(null===l)return void 0;e=l,t=i,o=u,n=!0}},s=o(2),l=n(s),d=o(3),f=n(d),p=o(4),c=n(p),h=[];window.addEventListener("resize",function(){h.forEach(function(e){return e._forceMeasure()})});var Measure=function(e){function Measure(){var e=this;r(this,Measure),a(Object.getPrototypeOf(Measure.prototype),"constructor",this).apply(this,arguments),this.state={width:null,height:null,top:null,left:null},this._node=null,this._nodeCopy=null,this._nodeParent=null,this._copyAppended=!1,this._forceMeasure=function(){e.forceUpdate()}}return i(Measure,e),u(Measure,[{key:"componentWillMount",value:function(){this._removeClone=c["default"](this._removeClone,300),this._forceMeasure=f["default"](this._forceMeasure,300),this._setMeasure=f["default"](this._setMeasure,300)}},{key:"componentDidMount",value:function(){this._node=l["default"].findDOMNode(this),this._parentNode=this._node.parentNode,this.setState(this._measure(this._node)),h.push(this)}},{key:"componentDidUpdate",value:function(e,t){var o=this._measure(this._node);(t.width!==o.width||t.height!==o.height||t.top!==o.top||t.left!==o.left)&&this._setMeasure(o)}},{key:"componentWillUnmount",value:function(){var e=h.indexOf(this);e>-1&&h.splice(e,1)}},{key:"_setMeasure",value:function(e){var t=this;this.setState(e,function(){t.props.onChange(e)})}},{key:"_measure",value:function(e){var t=void 0;if(!this._copyAppended){var o=document.createElement("div"),n=e.cloneNode(!0);o.style.height=0,o.style.position="relative",o.style.overflow="hidden";for(var r=n.querySelectorAll("input"),i=r.length;i--;)r[i].setAttribute("name","");var u=n.querySelectorAll("[data-reactid]");n.setAttribute("data-reactid","");for(var a=u.length;a--;)u[a].setAttribute("data-reactid","");n.style.boxSizing="border-box",n.style.width="auto",n.style.height="auto",n.style.position="absolute",n.style.visibility="hidden",o.appendChild(n),this._parentNode.appendChild(o),this._copyAppended=!0,this._nodeCopy=n}return t={width:this._nodeCopy.offsetWidth,height:this._nodeCopy.offsetHeight,top:this._nodeCopy.parentNode.offsetTop,left:this._nodeCopy.parentNode.offsetLeft},this._removeClone(),t}},{key:"_removeClone",value:function(){this._parentNode.removeChild(this._nodeCopy.parentNode),this._copyAppended=!1}},{key:"render",value:function(){return s.Children.only(this.props.children(this.state))}}],[{key:"defaultProps",value:{onChange:function(){return null}},enumerable:!0}]),Measure}(s.Component);t["default"]=Measure,e.exports=t["default"]},function(t,o){t.exports=e},function(e,t){"use strict";function o(e,t,o){void 0===t&&(t=250),t||(t=250);var n=void 0,r=void 0;return function(){var i=o||this,u=+new Date,a=arguments;n&&n+t>u?(clearTimeout(r),r=setTimeout(function(){n=u,e.apply(i,a)},t)):(n=u,e.apply(i,a))}}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=o,e.exports=t["default"]},function(e,t){"use strict";function o(e){var t=void 0===arguments[1]?250:arguments[1],o=null;return function(){var n=this,r=arguments;clearTimeout(o),o=setTimeout(function(){e.apply(n,r)},t)}}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=o,e.exports=t["default"]}])});

lib/Measure.js

@@ -102,3 +102,7 @@ 'use strict';
     value: function _setMeasure(dimensions) {
-      this.setState(dimensions);
+      var _this2 = this;
+
+      this.setState(dimensions, function () {
+        _this2.props.onChange(dimensions);
+      });
     }
@@ -152,7 +156,8 @@ }, {
       // grab dimensions of node
+      // we get the parent offsets since we wrapped the child
       dimensions = {
         width: this._nodeCopy.offsetWidth,
         height: this._nodeCopy.offsetHeight,
-        top: this._nodeCopy.offsetTop,
-        left: this._nodeCopy.offsetLeft
+        top: this._nodeCopy.parentNode.offsetTop,
+        left: this._nodeCopy.parentNode.offsetLeft
       };
@@ -177,2 +182,10 @@
     }
+  }], [{
+    key: 'defaultProps',
+    value: {
+      onChange: function onChange() {
+        return null;
+      }
+    },
+    enumerable: true
   }]);
@@ -179,0 +192,0 @@

package.json

 {
   "name": "react-measure",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "Compute measurements of React components.",
@@ -5,0 +5,0 @@ "main": "lib/react-measure.js",

README.md

@@ -1,2 +0,2 @@
-## React Measure 0.0.5
+## React Measure 0.0.6
 
@@ -11,3 +11,3 @@ Compute measurements of React components.
 
-<Measure>
+<Measure onChange={this._handleOnChange}>
   {({width, height, top, left}) =>
@@ -14,0 +14,0 @@ <div>

src/Measure.jsx

@@ -13,2 +13,6 @@ import React, { Component, Children, PropTypes } from 'react'
 class Measure extends Component {
+  static defaultProps = {
+    onChange: () => null
+  }
+
   state = {
@@ -65,3 +69,5 @@ width: null,
   _setMeasure(dimensions) {
-    this.setState(dimensions)
+    this.setState(dimensions, () => {
+      this.props.onChange(dimensions)
+    })
   }
@@ -114,7 +120,8 @@
     // grab dimensions of node
+    // we get the parent offsets since we wrapped the child
     dimensions = {
       width: this._nodeCopy.offsetWidth,
       height: this._nodeCopy.offsetHeight,
-      top: this._nodeCopy.offsetTop,
-      left: this._nodeCopy.offsetLeft,
+      top: this._nodeCopy.parentNode.offsetTop,
+      left: this._nodeCopy.parentNode.offsetLeft,
     }
@@ -121,0 +128,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

38497

increased by2.71%

Lines of code

808

increased by3.86%

No dependency changes