react-measure - npm Package Compare versions

Comparing version 0.4.2 to 0.5.0

CHANGELOG.md

 ## CHANGELOG
+### 0.5.0
+Moved dimension calculations to its own library
+
+Cleaned up build files for NPMCDN
+
 ### 0.4.2
@@ -3,0 +8,0 @@ Removed old code from `lib` folder

dist/react-measure.js

@@ -84,3 +84,3 @@ (function webpackUniversalModuleDefinition(root, factory) {
 
-	var _get = function get(_x4, _x5, _x6) { var _again = true; _function: while (_again) { var object = _x4, property = _x5, receiver = _x6; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x4 = parent; _x5 = property; _x6 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
+	var _get = function get(_x2, _x3, _x4) { var _again = true; _function: while (_again) { var object = _x2, property = _x3, receiver = _x4; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x2 = parent; _x3 = property; _x4 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
 
@@ -191,7 +191,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 	    key: 'getDimensions',
-	    value: function getDimensions() {
-	      var node = arguments.length <= 0 || arguments[0] === undefined ? this._node : arguments[0];
-	      var accurate = arguments.length <= 1 || arguments[1] === undefined ? true : arguments[1];
+	    value: function getDimensions(node, clone) {
+	      if (node === undefined) node = this._node;
 
-	      return (0, _getNodeDimensions2['default'])(node, accurate);
+	      return (0, _getNodeDimensions2['default'])(node, { clone: clone });
 	    }
@@ -304,3 +303,5 @@ }, {
 
-	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+	function _interopRequireDefault(obj) {
+	  return obj && obj.__esModule ? obj : { 'default': obj };
+	}
 
@@ -312,3 +313,3 @@ var _getCloneDimensions = __webpack_require__(7);
 	function getNodeDimensions(node) {
-	  var accurate = arguments.length <= 1 || arguments[1] === undefined ? false : arguments[1];
+	  var options = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
 
@@ -319,6 +320,6 @@ var rect = node.getBoundingClientRect();
 
-	  if (accurate) {
-	    var cloneDimensions = (0, _getCloneDimensions2['default'])(node);
-	    width = cloneDimensions.width;
-	    height = cloneDimensions.height;
+	  if (!width || !height || options.clone) {
+	    rect = (0, _getCloneDimensions2['default'])(node, options);
+	    width = rect.width;
+	    height = rect.height;
 	  }
@@ -349,3 +350,3 @@
 
-	function getCloneDimensions(node) {
+	function getCloneDimensions(node, options) {
 	  var parentNode = node.parentNode;
@@ -355,19 +356,23 @@
 	  var clone = node.cloneNode(true);
-	  var width = 0;
-	  var height = 0;
+	  var style = getComputedStyle(clone);
+	  var rect = {};
 
 	  // give the node some context to measure off of
-	  // height and overflow prevent scrollbars from node copy
+	  // no height and hidden overflow hide node copy
 	  context.style.height = 0;
-	  context.style.position = 'relative';
 	  context.style.overflow = 'hidden';
 
-	  // clean up any attributes that might cause a conflict
+	  // clean up any attributes that might cause a conflict with the original node
+	  // i.e. inputs that should focus or submit data
 	  clone.setAttribute('id', '');
 	  clone.setAttribute('name', '');
 
-	  // set props to hide copy and get a true height calculation
+	  // set props to get a true dimension calculation
+	  clone.style.display = options.display || style.getPropertyValue('display');
+	  // if (style.getPropertyValue('width') !== '') {
+	  clone.style.width = 'auto';
+	  // }
+	  // if (style.getPropertyValue('height') !== '') {
 	  clone.style.height = 'auto';
-	  clone.style.position = 'absolute';
-	  clone.style.visibility = 'hidden';
+	  // }
 
@@ -381,4 +386,3 @@ // append copy to context
 	  // get accurate width and height
-	  width = clone.scrollWidth;
-	  height = clone.scrollHeight;
+	  rect = clone.getBoundingClientRect();
 
@@ -388,3 +392,3 @@ // destroy clone
 
-	  return { width: width, height: height };
+	  return rect;
 	}
@@ -391,0 +395,0 @@

dist/react-measure.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("React"),require("ReactDOM"),require("elementResizeDetectorMaker")):"function"==typeof define&&define.amd?define(["React","ReactDOM","elementResizeDetectorMaker"],t):"object"==typeof exports?exports.Measure=t(require("React"),require("ReactDOM"),require("elementResizeDetectorMaker")):e.Measure=t(e.React,e.ReactDOM,e.elementResizeDetectorMaker)}(this,function(e,t,r){return function(e){function t(o){if(r[o])return r[o].exports;var n=r[o]={exports:{},id:o,loaded:!1};return e[o].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var r={};return t.m=e,t.c=r,t.p="dist/",t(0)}([function(e,t,r){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var n=r(1),i=o(n);t["default"]=i["default"],e.exports=t["default"]},function(e,t,r){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function n(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&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var u=function(){function e(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,r,o){return r&&e(t.prototype,r),o&&e(t,o),t}}(),s=function(e,t,r){for(var o=!0;o;){var n=e,i=t,u=r;s=l=a=void 0,o=!1,null===n&&(n=Function.prototype);var s=Object.getOwnPropertyDescriptor(n,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(n);if(null===l)return void 0;e=l,t=i,r=u,o=!0}},a=r(2),l=(o(a),r(3)),c=o(l),f=r(4),p=o(f),d=r(6),h=o(d),Measure=function(e){function Measure(){var e=this;n(this,Measure),s(Object.getPrototypeOf(Measure.prototype),"constructor",this).apply(this,arguments),this.state={dimensions:{}},this._node=null,this._propsToMeasure=this._getPropsToMeasure(this.props),this._lastDimensions={},this.measure=function(){var t=arguments.length<=0||void 0===arguments[0]?e.props.accurate:arguments[0];if(e.props.shouldMeasure){var r=e.getDimensions(e._node,t),o="function"==typeof e.props.children;e._propsToMeasure.some(function(t){return r[t]!==e._lastDimensions[t]?(e.props.onMeasure(r),o&&e.setState({dimensions:r}),e._lastDimensions=r,!0):void 0})}}}return i(Measure,e),u(Measure,[{key:"componentDidMount",value:function(){var e=this;this._node=c["default"].findDOMNode(this),this.measure(),p["default"]().listenTo(this._node,function(){return e.measure()})}},{key:"componentWillReceiveProps",value:function(e){var t=(e.config,e.whitelist),r=e.blacklist;(this.props.whitelist!==t||this.props.blacklist!==r)&&(this._propsToMeasure=this._getPropsToMeasure({whitelist:t,blacklist:r}))}},{key:"componentWillUnmount",value:function(){p["default"]().removeAllListeners(this._node)}},{key:"getDimensions",value:function(){var e=arguments.length<=0||void 0===arguments[0]?this._node:arguments[0],t=arguments.length<=1||void 0===arguments[1]?!0:arguments[1];return h["default"](e,t)}},{key:"_getPropsToMeasure",value:function(e){var t=e.whitelist,r=e.blacklist;return t.filter(function(e){return r.indexOf(e)<0})}},{key:"render",value:function(){var e=this.props.children;return a.Children.only("function"==typeof e?e(this.state.dimensions):e)}}],[{key:"propTypes",value:{accurate:a.PropTypes.bool,whitelist:a.PropTypes.array,blacklist:a.PropTypes.array,shouldMeasure:a.PropTypes.bool,onMeasure:a.PropTypes.func},enumerable:!0},{key:"defaultProps",value:{accurate:!1,whitelist:["width","height","top","right","bottom","left"],blacklist:[],shouldMeasure:!0,onMeasure:function(){return null}},enumerable:!0}]),Measure}(a.Component);t["default"]=Measure,e.exports=t["default"]},function(t,r){t.exports=e},function(e,r){e.exports=t},function(e,t,r){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function n(){return s||(s=u["default"]({strategy:"scroll"})),s}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=n;var i=r(5),u=o(i),s=null;e.exports=t["default"]},function(e,t){e.exports=r},function(e,t,r){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function n(e){var t=arguments.length<=1||void 0===arguments[1]?!1:arguments[1],r=e.getBoundingClientRect(),o=r.width,n=r.height;if(t){var i=u["default"](e);o=i.width,n=i.height}return{width:o,height:n,top:r.top,right:r.right,bottom:r.bottom,left:r.left}}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=n;var i=r(7),u=o(i);e.exports=t["default"]},function(e,t){"use strict";function r(e){var t=e.parentNode,r=document.createElement("div"),o=e.cloneNode(!0),n=0,i=0;return r.style.height=0,r.style.position="relative",r.style.overflow="hidden",o.setAttribute("id",""),o.setAttribute("name",""),o.style.height="auto",o.style.position="absolute",o.style.visibility="hidden",r.appendChild(o),t.appendChild(r),n=o.scrollWidth,i=o.scrollHeight,t.removeChild(r),{width:n,height:i}}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=r,e.exports=t["default"]}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("React"),require("ReactDOM"),require("elementResizeDetectorMaker")):"function"==typeof define&&define.amd?define(["React","ReactDOM","elementResizeDetectorMaker"],t):"object"==typeof exports?exports.Measure=t(require("React"),require("ReactDOM"),require("elementResizeDetectorMaker")):e.Measure=t(e.React,e.ReactDOM,e.elementResizeDetectorMaker)}(this,function(e,t,r){return function(e){function t(o){if(r[o])return r[o].exports;var n=r[o]={exports:{},id:o,loaded:!1};return e[o].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var r={};return t.m=e,t.c=r,t.p="dist/",t(0)}([function(e,t,r){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var n=r(1),i=o(n);t["default"]=i["default"],e.exports=t["default"]},function(e,t,r){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function n(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&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var u=function(){function e(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,r,o){return r&&e(t.prototype,r),o&&e(t,o),t}}(),s=function(e,t,r){for(var o=!0;o;){var n=e,i=t,u=r;s=l=a=void 0,o=!1,null===n&&(n=Function.prototype);var s=Object.getOwnPropertyDescriptor(n,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(n);if(null===l)return void 0;e=l,t=i,r=u,o=!0}},a=r(2),l=(o(a),r(3)),c=o(l),p=r(4),f=o(p),d=r(6),h=o(d),Measure=function(e){function Measure(){var e=this;n(this,Measure),s(Object.getPrototypeOf(Measure.prototype),"constructor",this).apply(this,arguments),this.state={dimensions:{}},this._node=null,this._propsToMeasure=this._getPropsToMeasure(this.props),this._lastDimensions={},this.measure=function(){var t=arguments.length<=0||void 0===arguments[0]?e.props.accurate:arguments[0];if(e.props.shouldMeasure){var r=e.getDimensions(e._node,t),o="function"==typeof e.props.children;e._propsToMeasure.some(function(t){return r[t]!==e._lastDimensions[t]?(e.props.onMeasure(r),o&&e.setState({dimensions:r}),e._lastDimensions=r,!0):void 0})}}}return i(Measure,e),u(Measure,[{key:"componentDidMount",value:function(){var e=this;this._node=c["default"].findDOMNode(this),this.measure(),f["default"]().listenTo(this._node,function(){return e.measure()})}},{key:"componentWillReceiveProps",value:function(e){var t=(e.config,e.whitelist),r=e.blacklist;(this.props.whitelist!==t||this.props.blacklist!==r)&&(this._propsToMeasure=this._getPropsToMeasure({whitelist:t,blacklist:r}))}},{key:"componentWillUnmount",value:function(){f["default"]().removeAllListeners(this._node)}},{key:"getDimensions",value:function(e,t){return void 0===e&&(e=this._node),h["default"](e,{clone:t})}},{key:"_getPropsToMeasure",value:function(e){var t=e.whitelist,r=e.blacklist;return t.filter(function(e){return r.indexOf(e)<0})}},{key:"render",value:function(){var e=this.props.children;return a.Children.only("function"==typeof e?e(this.state.dimensions):e)}}],[{key:"propTypes",value:{accurate:a.PropTypes.bool,whitelist:a.PropTypes.array,blacklist:a.PropTypes.array,shouldMeasure:a.PropTypes.bool,onMeasure:a.PropTypes.func},enumerable:!0},{key:"defaultProps",value:{accurate:!1,whitelist:["width","height","top","right","bottom","left"],blacklist:[],shouldMeasure:!0,onMeasure:function(){return null}},enumerable:!0}]),Measure}(a.Component);t["default"]=Measure,e.exports=t["default"]},function(t,r){t.exports=e},function(e,r){e.exports=t},function(e,t,r){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function n(){return s||(s=u["default"]({strategy:"scroll"})),s}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=n;var i=r(5),u=o(i),s=null;e.exports=t["default"]},function(e,t){e.exports=r},function(e,t,r){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function n(e){var t=arguments.length<=1||void 0===arguments[1]?{}:arguments[1],r=e.getBoundingClientRect(),o=r.width,n=r.height;return o&&n&&!t.clone||(r=u["default"](e,t),o=r.width,n=r.height),{width:o,height:n,top:r.top,right:r.right,bottom:r.bottom,left:r.left}}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=n;var i=r(7),u=o(i);e.exports=t["default"]},function(e,t){"use strict";function r(e,t){var r=e.parentNode,o=document.createElement("div"),n=e.cloneNode(!0),i=getComputedStyle(n),u={};return o.style.height=0,o.style.overflow="hidden",n.setAttribute("id",""),n.setAttribute("name",""),n.style.display=t.display||i.getPropertyValue("display"),n.style.width="auto",n.style.height="auto",o.appendChild(n),r.appendChild(o),u=n.getBoundingClientRect(),r.removeChild(o),u}Object.defineProperty(t,"__esModule",{value:!0}),t["default"]=r,e.exports=t["default"]}])});

lib/Measure.js

@@ -9,3 +9,3 @@ 'use strict';
 
-var _get = function get(_x4, _x5, _x6) { var _again = true; _function: while (_again) { var object = _x4, property = _x5, receiver = _x6; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x4 = parent; _x5 = property; _x6 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
+var _get = function get(_x2, _x3, _x4) { var _again = true; _function: while (_again) { var object = _x2, property = _x3, receiver = _x4; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x2 = parent; _x3 = property; _x4 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
 
@@ -30,3 +30,3 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
-var _getNodeDimensions = require('./get-node-dimensions');
+var _getNodeDimensions = require('get-node-dimensions');
 
@@ -117,7 +117,6 @@ var _getNodeDimensions2 = _interopRequireDefault(_getNodeDimensions);
     key: 'getDimensions',
-    value: function getDimensions() {
-      var node = arguments.length <= 0 || arguments[0] === undefined ? this._node : arguments[0];
-      var accurate = arguments.length <= 1 || arguments[1] === undefined ? true : arguments[1];
+    value: function getDimensions(node, clone) {
+      if (node === undefined) node = this._node;
 
-      return (0, _getNodeDimensions2['default'])(node, accurate);
+      return (0, _getNodeDimensions2['default'])(node, { clone: clone });
     }
@@ -124,0 +123,0 @@ }, {

package.json

 {
   "name": "react-measure",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "description": "Compute measurements of React components.",
   "main": "lib/react-measure.js",
+  "files": ["dist", "lib"],
   "scripts": {
@@ -40,3 +41,4 @@ "build": "npm run build:lib && NODE_ENV=production webpack --config webpack.prod.config.js",
   "dependencies": {
-    "element-resize-detector": "^1.1.5"
+    "element-resize-detector": "^1.1.5",
+    "get-node-dimensions": "^0.1.1"
   },
@@ -43,0 +45,0 @@ "devDependencies": {

README.md

@@ -14,2 +14,7 @@ ## React Measure
 
+```html
+<script src="https://npmcdn.com/react-measure/dist/react-measure.js"></script>
+(UMD library exposed as `Measure`)
+```
+
 ## Codepen Demo
@@ -16,0 +21,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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

118

increased by4.42%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

34449

decreased by-37.72%

Dependency count

4

increased by33.33%

Number of package files

9

decreased by-62.5%

Lines of code

456

decreased by-56.98%

Dependency changes

• + Addedget-node-dimensions@^0.1.1

• + Addedget-node-dimensions@0.1.1(transitive)