react-measure - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

bower.json

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

dist/react-measure.js

@@ -101,3 +101,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 	var Measure = (function (_Component) {
-	  function Measure(props) {
+	  function Measure() {
 	    var _this = this;
@@ -107,3 +107,3 @@
 
-	    _get(Object.getPrototypeOf(Measure.prototype), 'constructor', this).call(this, props);
+	    _get(Object.getPrototypeOf(Measure.prototype), 'constructor', this).apply(this, arguments);
 
@@ -114,6 +114,6 @@ this._whitelist = this.props.whitelist || ['width', 'height', 'top', 'right', 'bottom', 'left'];
 	    });
-	    this._portal = document.createElement('div');
+	    this._portal = null;
 	    this._lastDimensions = {};
 
-	    this._copyMounted = function (dimensions) {
+	    this._cloneMounted = function (dimensions) {
 	      // determine if we need to update our callback with new dimensions or not
@@ -132,8 +132,6 @@ _this._properties.forEach(function (prop) {
 
-	      // remove component since we no longer need it
+	      // remove component and portal since we no longer need it
 	      _react2['default'].unmountComponentAtNode(_this._portal);
+	      _this._destroyPortal();
 	    };
-
-	    // set styles to hide portal from view
-	    this._portal.style.cssText = '\n      height: 0;\n      position: relative;\n      overflow: hidden;\n    ';
 	  }
@@ -146,7 +144,3 @@
 	    value: function componentDidMount() {
-	      var node = _react2['default'].findDOMNode(this);
-
-	      // append portal next to this component
-	      node.parentNode.appendChild(this._portal);
-
+	      this._node = _react2['default'].findDOMNode(this);
 	      this._cloneComponent();
@@ -160,8 +154,29 @@ }
 	  }, {
+	    key: '_createPortal',
+	    value: function _createPortal() {
+	      var portal = document.createElement('div');
+
+	      // set styles to hide portal from view
+	      portal.style.cssText = '\n      height: 0;\n      position: relative;\n      overflow: hidden;\n    ';
+
+	      this._portal = portal;
+
+	      // append portal next to this component
+	      this._node.parentNode.insertBefore(this._portal, this._node.nextSibling);
+	    }
+	  }, {
+	    key: '_destroyPortal',
+	    value: function _destroyPortal() {
+	      this._portal.parentNode.removeChild(this._portal);
+	    }
+	  }, {
 	    key: '_cloneComponent',
 	    value: function _cloneComponent() {
-	      var onMount = this._copyMounted;
+	      var onMount = this._cloneMounted;
 	      var clone = (0, _react.cloneElement)(this.props.children);
 	      var child = _react2['default'].createElement(_MeasureChild2['default'], { onMount: onMount }, clone);
 
+	      // create a portal to append clone to
+	      this._createPortal();
+
 	      // render clone to the portal
@@ -244,12 +259,10 @@ _react2['default'].render(child, this._portal);
 
-	      // if width/height was set to 0, set it to auto to get a true calculation
-	      if (node.style.width === '0px') {
-	        node.style.width = 'auto';
-	      }
+	      // set width/height to auto to get a true calculation
+	      node.style.width = 'auto';
+	      node.style.height = 'auto';
 
-	      if (node.style.height === '0px') {
-	        node.style.height = 'auto';
-	      }
-
 	      // move node exactly on top of it's clone to calculate proper position
+	      // this also overrides any transform already set, so something like scale
+	      // won't affect the calculation, could be bad to do this,
+	      // but we'll see what happens
 	      node.style.transform = 'translateY(-100%)';
@@ -256,0 +269,0 @@ node.style.WebkitTransform = 'translateY(-100%)';

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}}(),l=function(e,t,o){for(var n=!0;n;){var r=e,i=t,u=o;l=p=a=void 0,n=!1,null===r&&(r=Function.prototype);var l=Object.getOwnPropertyDescriptor(r,i);if(void 0!==l){if("value"in l)return l.value;var a=l.get;return void 0===a?void 0:a.call(u)}var p=Object.getPrototypeOf(r);if(null===p)return void 0;e=p,t=i,o=u,n=!0}},a=o(2),p=n(a),s=o(3),c=n(s),Measure=function(e){function Measure(e){var t=this;r(this,Measure),l(Object.getPrototypeOf(Measure.prototype),"constructor",this).call(this,e),this._whitelist=this.props.whitelist||["width","height","top","right","bottom","left"],this._properties=this._whitelist.filter(function(e){return t.props.blacklist.indexOf(e)<0}),this._portal=document.createElement("div"),this._lastDimensions={},this._copyMounted=function(e){t._properties.forEach(function(o){return e[o]!==t._lastDimensions[o]?(t.props.onChange(e),void(t._lastDimensions=e)):void 0}),p["default"].unmountComponentAtNode(t._portal)},this._portal.style.cssText="\n      height: 0;\n      position: relative;\n      overflow: hidden;\n    "}return i(Measure,e),u(Measure,[{key:"componentDidMount",value:function(){var e=p["default"].findDOMNode(this);e.parentNode.appendChild(this._portal),this._cloneComponent()}},{key:"componentDidUpdate",value:function(){this._cloneComponent()}},{key:"_cloneComponent",value:function(){var e=this._copyMounted,t=a.cloneElement(this.props.children),o=p["default"].createElement(c["default"],{onMount:e},t);p["default"].render(o,this._portal)}},{key:"render",value:function(){return a.Children.only(this.props.children)}}],[{key:"propTypes",value:{whitelist:a.PropTypes.array,blacklist:a.PropTypes.array,onChange:a.PropTypes.func},enumerable:!0},{key:"defaultProps",value:{blacklist:[],onChange:function(){return null}},enumerable:!0}]),Measure}(a.Component);t["default"]=Measure,e.exports=t["default"]},function(t,o){t.exports=e},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}}(),l=function(e,t,o){for(var n=!0;n;){var r=e,i=t,u=o;l=p=a=void 0,n=!1,null===r&&(r=Function.prototype);var l=Object.getOwnPropertyDescriptor(r,i);if(void 0!==l){if("value"in l)return l.value;var a=l.get;return void 0===a?void 0:a.call(u)}var p=Object.getPrototypeOf(r);if(null===p)return void 0;e=p,t=i,o=u,n=!0}},a=o(2),p=n(a),s=function(e){function t(){r(this,t),l(Object.getPrototypeOf(t.prototype),"constructor",this).apply(this,arguments)}return i(t,e),u(t,[{key:"componentDidMount",value:function(){var e=p["default"].findDOMNode(this);"0px"===e.style.width&&(e.style.width="auto"),"0px"===e.style.height&&(e.style.height="auto"),e.style.transform="translateY(-100%)",e.style.WebkitTransform="translateY(-100%)";var t=e.getBoundingClientRect(),o={width:t.width,height:t.height,top:t.top,right:t.right,bottom:t.bottom,left:t.left};this.props.onMount(o)}},{key:"render",value:function(){return this.props.children}}]),t}(a.Component);t["default"]=s,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}}(),l=function(e,t,o){for(var n=!0;n;){var r=e,i=t,u=o;l=s=a=void 0,n=!1,null===r&&(r=Function.prototype);var l=Object.getOwnPropertyDescriptor(r,i);if(void 0!==l){if("value"in l)return l.value;var a=l.get;return void 0===a?void 0:a.call(u)}var s=Object.getPrototypeOf(r);if(null===s)return void 0;e=s,t=i,o=u,n=!0}},a=o(2),s=n(a),c=o(3),p=n(c),Measure=function(e){function Measure(){var e=this;r(this,Measure),l(Object.getPrototypeOf(Measure.prototype),"constructor",this).apply(this,arguments),this._whitelist=this.props.whitelist||["width","height","top","right","bottom","left"],this._properties=this._whitelist.filter(function(t){return e.props.blacklist.indexOf(t)<0}),this._portal=null,this._lastDimensions={},this._cloneMounted=function(t){e._properties.forEach(function(o){return t[o]!==e._lastDimensions[o]?(e.props.onChange(t),void(e._lastDimensions=t)):void 0}),s["default"].unmountComponentAtNode(e._portal),e._destroyPortal()}}return i(Measure,e),u(Measure,[{key:"componentDidMount",value:function(){this._node=s["default"].findDOMNode(this),this._cloneComponent()}},{key:"componentDidUpdate",value:function(){this._cloneComponent()}},{key:"_createPortal",value:function(){var e=document.createElement("div");e.style.cssText="\n      height: 0;\n      position: relative;\n      overflow: hidden;\n    ",this._portal=e,this._node.parentNode.insertBefore(this._portal,this._node.nextSibling)}},{key:"_destroyPortal",value:function(){this._portal.parentNode.removeChild(this._portal)}},{key:"_cloneComponent",value:function(){var e=this._cloneMounted,t=a.cloneElement(this.props.children),o=s["default"].createElement(p["default"],{onMount:e},t);this._createPortal(),s["default"].render(o,this._portal)}},{key:"render",value:function(){return a.Children.only(this.props.children)}}],[{key:"propTypes",value:{whitelist:a.PropTypes.array,blacklist:a.PropTypes.array,onChange:a.PropTypes.func},enumerable:!0},{key:"defaultProps",value:{blacklist:[],onChange:function(){return null}},enumerable:!0}]),Measure}(a.Component);t["default"]=Measure,e.exports=t["default"]},function(t,o){t.exports=e},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}}(),l=function(e,t,o){for(var n=!0;n;){var r=e,i=t,u=o;l=s=a=void 0,n=!1,null===r&&(r=Function.prototype);var l=Object.getOwnPropertyDescriptor(r,i);if(void 0!==l){if("value"in l)return l.value;var a=l.get;return void 0===a?void 0:a.call(u)}var s=Object.getPrototypeOf(r);if(null===s)return void 0;e=s,t=i,o=u,n=!0}},a=o(2),s=n(a),c=function(e){function t(){r(this,t),l(Object.getPrototypeOf(t.prototype),"constructor",this).apply(this,arguments)}return i(t,e),u(t,[{key:"componentDidMount",value:function(){var e=s["default"].findDOMNode(this);e.style.width="auto",e.style.height="auto",e.style.transform="translateY(-100%)",e.style.WebkitTransform="translateY(-100%)";var t=e.getBoundingClientRect(),o={width:t.width,height:t.height,top:t.top,right:t.right,bottom:t.bottom,left:t.left};this.props.onMount(o)}},{key:"render",value:function(){return this.props.children}}]),t}(a.Component);t["default"]=c,e.exports=t["default"]}])});

lib/Measure.js

@@ -28,22 +28,3 @@ 'use strict';
 
-  _createClass(Measure, null, [{
-    key: 'propTypes',
-    value: {
-      whitelist: _react.PropTypes.array,
-      blacklist: _react.PropTypes.array,
-      onChange: _react.PropTypes.func
-    },
-    enumerable: true
-  }, {
-    key: 'defaultProps',
-    value: {
-      blacklist: [],
-      onChange: function onChange() {
-        return null;
-      }
-    },
-    enumerable: true
-  }]);
-
-  function Measure(props) {
+  function Measure() {
     var _this = this;
@@ -53,5 +34,4 @@
 
-    _get(Object.getPrototypeOf(Measure.prototype), 'constructor', this).call(this, props);
+    _get(Object.getPrototypeOf(Measure.prototype), 'constructor', this).apply(this, arguments);
 
-    // set styles to hide portal from view
     this._whitelist = this.props.whitelist || ['width', 'height', 'top', 'right', 'bottom', 'left'];
@@ -61,6 +41,6 @@ this._properties = this._whitelist.filter(function (prop) {
     });
-    this._portal = document.createElement('div');
+    this._portal = null;
     this._lastDimensions = {};
 
-    this._copyMounted = function (dimensions) {
+    this._cloneMounted = function (dimensions) {
       // determine if we need to update our callback with new dimensions or not
@@ -79,7 +59,6 @@ _this._properties.forEach(function (prop) {
 
-      // remove component since we no longer need it
+      // remove component and portal since we no longer need it
       _react2['default'].unmountComponentAtNode(_this._portal);
+      _this._destroyPortal();
     };
-
-    this._portal.style.cssText = '\n      height: 0;\n      position: relative;\n      overflow: hidden;\n    ';
   }
@@ -90,7 +69,3 @@
     value: function componentDidMount() {
-      var node = _react2['default'].findDOMNode(this);
-
-      // append portal next to this component
-      node.parentNode.appendChild(this._portal);
-
+      this._node = _react2['default'].findDOMNode(this);
       this._cloneComponent();
@@ -104,8 +79,29 @@ }
   }, {
+    key: '_createPortal',
+    value: function _createPortal() {
+      var portal = document.createElement('div');
+
+      // set styles to hide portal from view
+      portal.style.cssText = '\n      height: 0;\n      position: relative;\n      overflow: hidden;\n    ';
+
+      this._portal = portal;
+
+      // append portal next to this component
+      this._node.parentNode.insertBefore(this._portal, this._node.nextSibling);
+    }
+  }, {
+    key: '_destroyPortal',
+    value: function _destroyPortal() {
+      this._portal.parentNode.removeChild(this._portal);
+    }
+  }, {
     key: '_cloneComponent',
     value: function _cloneComponent() {
-      var onMount = this._copyMounted;
+      var onMount = this._cloneMounted;
       var clone = (0, _react.cloneElement)(this.props.children);
       var child = _react2['default'].createElement(_MeasureChild2['default'], { onMount: onMount }, clone);
 
+      // create a portal to append clone to
+      this._createPortal();
+
       // render clone to the portal
@@ -119,2 +115,19 @@ _react2['default'].render(child, this._portal);
     }
+  }], [{
+    key: 'propTypes',
+    value: {
+      whitelist: _react.PropTypes.array,
+      blacklist: _react.PropTypes.array,
+      onChange: _react.PropTypes.func
+    },
+    enumerable: true
+  }, {
+    key: 'defaultProps',
+    value: {
+      blacklist: [],
+      onChange: function onChange() {
+        return null;
+      }
+    },
+    enumerable: true
   }]);
@@ -121,0 +134,0 @@

lib/MeasureChild.js

@@ -35,12 +35,10 @@ 'use strict';
 
-      // if width/height was set to 0, set it to auto to get a true calculation
-      if (node.style.width === '0px') {
-        node.style.width = 'auto';
-      }
+      // set width/height to auto to get a true calculation
+      node.style.width = 'auto';
+      node.style.height = 'auto';
 
-      if (node.style.height === '0px') {
-        node.style.height = 'auto';
-      }
-
       // move node exactly on top of it's clone to calculate proper position
+      // this also overrides any transform already set, so something like scale
+      // won't affect the calculation, could be bad to do this,
+      // but we'll see what happens
       node.style.transform = 'translateY(-100%)';
@@ -47,0 +45,0 @@ node.style.WebkitTransform = 'translateY(-100%)';

package.json

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

README.md

@@ -1,2 +0,2 @@
-## React Measure 0.1.0
+## React Measure 0.1.1
 
@@ -63,5 +63,12 @@ Compute measurements of React components.
 ## CHANGELOG
-### 0.0.1
+### 0.1.1
+Set width/height to auto on clone no matter what to get a true dimension
+
+Append clone directly after original instead of the end of its parent
+
+Portal now gets destroyed after measurements have been calculated
+
+### 0.1.0
 Rewritten to be more React friendly
 
 Measure component no longer accepts a child function, instead get dimensions by setting state in onChange callback

src/Measure.jsx

@@ -16,10 +16,19 @@ import React, { Component, Children, PropTypes, cloneElement } from 'react'
   _properties = this._whitelist.filter(prop => this.props.blacklist.indexOf(prop) < 0)
-  _portal = document.createElement('div')
+  _portal = null
   _lastDimensions = {}
 
-  constructor(props) {
-    super(props)
+  componentDidMount() {
+    this._node = React.findDOMNode(this)
+    this._cloneComponent()
+  }
 
+  componentDidUpdate() {
+    this._cloneComponent();
+  }
+
+  _createPortal() {
+    const portal = document.createElement('div')
+
     // set styles to hide portal from view
-    this._portal.style.cssText = `
+    portal.style.cssText = `
       height: 0;
@@ -29,18 +38,14 @@ position: relative;
     `
-  }
 
-  componentDidMount() {
-    const node = React.findDOMNode(this)
+    this._portal = portal
 
     // append portal next to this component
-    node.parentNode.appendChild(this._portal)
-
-    this._cloneComponent();
+    this._node.parentNode.insertBefore(this._portal, this._node.nextSibling)
   }
 
-  componentDidUpdate() {
-    this._cloneComponent();
+  _destroyPortal() {
+    this._portal.parentNode.removeChild(this._portal);
   }
 
-  _copyMounted = (dimensions) => {
+  _cloneMounted = (dimensions) => {
     // determine if we need to update our callback with new dimensions or not
@@ -59,11 +64,15 @@ this._properties.forEach(prop => {
 
-    // remove component since we no longer need it
+    // remove component and portal since we no longer need it
     React.unmountComponentAtNode(this._portal)
+    this._destroyPortal()
   }
 
   _cloneComponent() {
-    const onMount = this._copyMounted;
+    const onMount = this._cloneMounted;
     const clone = cloneElement(this.props.children)
     const child = React.createElement(MeasureChild, {onMount}, clone)
 
+    // create a portal to append clone to
+    this._createPortal()
+
     // render clone to the portal
@@ -70,0 +79,0 @@ React.render(child, this._portal)

src/MeasureChild.jsx

@@ -7,12 +7,10 @@ import React, { Component } from 'react'
   
-    // if width/height was set to 0, set it to auto to get a true calculation
-    if(node.style.width === '0px') {
-      node.style.width = 'auto'
-    }
+    // set width/height to auto to get a true calculation
+    node.style.width = 'auto'
+    node.style.height = 'auto'
 
-    if(node.style.height === '0px') {
-      node.style.height = 'auto'
-    }
-
     // move node exactly on top of it's clone to calculate proper position
+    // this also overrides any transform already set, so something like scale
+    // won't affect the calculation, could be bad to do this,
+    // but we'll see what happens
     node.style.transform = 'translateY(-100%)'
@@ -19,0 +17,0 @@ node.style.WebkitTransform = 'translateY(-100%)'

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

39437

increased by4.32%

Lines of code

678

increased by4.79%

Number of lines in readme file

73

increased by10.61%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of downloads

316341

decreased by-1.82%

No dependency changes