react-measure - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

bower.json

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

dist/react-measure.js

@@ -196,3 +196,2 @@ (function webpackUniversalModuleDefinition(root, factory) {
 	        context.style.overflow = 'hidden';
-	        //copy.style.transform = 'translateY(-100%)';
 
@@ -215,3 +214,3 @@ // remove name from all children inputs so they don't conflict with current ones
 	        copy.style.height = 'auto';
-	        copy.style.width = '100%';
+	        copy.style.width = 'auto';
 	        copy.style.position = 'absolute';
@@ -232,3 +231,8 @@ copy.style.visibility = 'hidden';
 	      // grab dimensions of node
-	      dimensions = this._nodeCopy.getBoundingClientRect();
+	      dimensions = {
+	        width: this._nodeCopy.offsetWidth,
+	        height: this._nodeCopy.offsetHeight,
+	        top: this._nodeCopy.offsetTop,
+	        left: this._nodeCopy.offsetLeft
+	      };
 
@@ -238,10 +242,3 @@ // remove the copy after getting it's height
 
-	      return {
-	        width: dimensions.width,
-	        height: dimensions.height,
-	        top: dimensions.top,
-	        right: dimensions.right,
-	        bottom: dimensions.bottom,
-	        left: dimensions.left
-	      };
+	      return dimensions;
 	    }
@@ -248,0 +245,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(o){if(n[o])return n[o].exports;var r=n[o]={exports:{},id:o,loaded:!1};return e[o].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var n={};return t.m=e,t.c=n,t.p="dist/",t(0)}([function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var r=n(1),i=o(r);t["default"]=i["default"],e.exports=t["default"]},function(e,t,n){"use strict";function o(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 n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),a=function(e,t,n){for(var o=!0;o;){var r=e,i=t,u=n;a=l=s=void 0,o=!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,n=u,o=!0}},s=n(2),l=o(s),d=n(3),c=o(d),f=n(4),p=o(f),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,right:null,bottom: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=c["default"](this._forceMeasure,300),this._setMeasure=c["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 n=this._measure(this._node);JSON.stringify(t)!==JSON.stringify(n)&&this._setMeasure(n)}},{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 n=document.createElement("div"),o=e.cloneNode(!0);n.style.height=0,n.style.position="relative",n.style.overflow="hidden";for(var r=o.querySelectorAll("input"),i=r.length;i--;)r[i].setAttribute("name","");var u=o.querySelectorAll("[data-reactid]");o.setAttribute("data-reactid","");for(var a=u.length;a--;)u[a].setAttribute("data-reactid","");o.style.boxSizing="border-box",o.style.height="auto",o.style.width="100%",o.style.position="absolute",o.style.visibility="hidden",n.appendChild(o),this._parentNode.appendChild(n),this._copyAppended=!0,this._nodeCopy=o}return t=this._nodeCopy.getBoundingClientRect(),this._removeClone(),{width:t.width,height:t.height,top:t.top,right:t.right,bottom:t.bottom,left:t.left}}},{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))}}]),Measure}(s.Component);t["default"]=Measure,e.exports=t["default"]},function(t,n){t.exports=e},function(e,t){"use strict";function n(e,t,n){void 0===t&&(t=250),t||(t=250);var o=void 0,r=void 0;return function(){var i=n||this,u=+new Date,a=arguments;o&&o+t>u?(clearTimeout(r),r=setTimeout(function(){o=u,e.apply(i,a)},t)):(o=u,e.apply(i,a))}}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=n,e.exports=t["default"]},function(e,t){"use strict";function n(e){var t=void 0===arguments[1]?250:arguments[1],n=null;return function(){var o=this,r=arguments;clearTimeout(n),n=setTimeout(function(){e.apply(o,r)},t)}}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=n,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}}(),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,right:null,bottom: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);JSON.stringify(t)!==JSON.stringify(o)&&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.height="auto",n.style.width="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"]}])});

lib/Measure.js

@@ -121,3 +121,2 @@ 'use strict';
         context.style.overflow = 'hidden';
-        //copy.style.transform = 'translateY(-100%)';
 
@@ -140,3 +139,3 @@ // remove name from all children inputs so they don't conflict with current ones
         copy.style.height = 'auto';
-        copy.style.width = '100%';
+        copy.style.width = 'auto';
         copy.style.position = 'absolute';
@@ -157,3 +156,8 @@ copy.style.visibility = 'hidden';
       // grab dimensions of node
-      dimensions = this._nodeCopy.getBoundingClientRect();
+      dimensions = {
+        width: this._nodeCopy.offsetWidth,
+        height: this._nodeCopy.offsetHeight,
+        top: this._nodeCopy.offsetTop,
+        left: this._nodeCopy.offsetLeft
+      };
 
@@ -163,10 +167,3 @@ // remove the copy after getting it's height
 
-      return {
-        width: dimensions.width,
-        height: dimensions.height,
-        top: dimensions.top,
-        right: dimensions.right,
-        bottom: dimensions.bottom,
-        left: dimensions.left
-      };
+      return dimensions;
     }
@@ -173,0 +170,0 @@ }, {

package.json

 {
   "name": "react-measure",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "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.2
+## React Measure 0.0.4
 
@@ -12,3 +12,3 @@ Compute measurements of React components.
 <Measure>
-  {({width, height, top, right, bottom, left}) =>
+  {({width, height, top, left}) =>
     <div>
@@ -15,0 +15,0 @@ {/* do cool stuff with my dimensions */}

src/Measure.jsx

@@ -78,3 +78,2 @@ import React, { Component, Children, PropTypes } from 'react';
       context.style.overflow = 'hidden'
-      //copy.style.transform = 'translateY(-100%)';
 
@@ -97,3 +96,3 @@ // remove name from all children inputs so they don't conflict with current ones
       copy.style.height = 'auto'
-      copy.style.width = '100%'
+      copy.style.width = 'auto'
       copy.style.position = 'absolute'
@@ -114,15 +113,13 @@ copy.style.visibility = 'hidden'
     // grab dimensions of node
-    dimensions = this._nodeCopy.getBoundingClientRect();
+    dimensions = {
+      width: this._nodeCopy.offsetWidth,
+      height: this._nodeCopy.offsetHeight,
+      top: this._nodeCopy.offsetTop,
+      left: this._nodeCopy.offsetLeft,
+    }
 
     // remove the copy after getting it's height
-    this._removeClone();
+    this._removeClone()
 
-    return {
-      width: dimensions.width,
-      height: dimensions.height,
-      top: dimensions.top,
-      right: dimensions.right,
-      bottom: dimensions.bottom,
-      left: dimensions.left
-    }
+    return dimensions
   }
@@ -129,0 +126,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

Worsened metrics

Total package byte prevSize

37575

decreased by-0.88%

Number of downloads

316341

decreased by-1.82%

Lines of code

783

decreased by-1.14%

No dependency changes