react-with-dimension - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

dist/bundle.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.WithDimension=t(require("react")):e.WithDimension=t(e.react)}(this,function(e){return function(e){function t(r){if(n[r])return n[r].exports;var i=n[r]={exports:{},id:r,loaded:!1};return e[r].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var i=n(1),o=r(i);t.default=o.default},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function u(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 a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},c=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),f=n(5),s=r(f),d=n(4),l=r(d),p=n(2),v=r(p),h=function(){var e=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],t=e.transform,n=void 0===t?function(e,t){return{containerWidth:e,containerHeight:t}}:t,r=e.containerStyle,d=void 0===r?{width:"100%",height:"100%",padding:0,border:0}:r,p=e.getHeight,h=void 0===p?function(e){return e.getBoundingClientRect().height}:p,m=e.getWidth,y=void 0===m?function(e){return e.getBoundingClientRect().width}:m,b=e.wait,w=void 0===b?200:b;return function(e){var t,r;return r=t=function(t){function r(){var e,t,n,u;i(this,r);for(var a=arguments.length,c=Array(a),f=0;a>f;f++)c[f]=arguments[f];return t=n=o(this,(e=Object.getPrototypeOf(r)).call.apply(e,[this].concat(c))),n.state={containerWidth:null,containerHeight:null},n.updateDimensions=function(){window.requestAnimationFrame(function(){var e=n.refs.withDimensionContainer;n.setState({containerWidth:y(e),containerHeight:h(e)})})},u=t,o(n,u)}return u(r,t),c(r,[{key:"componentDidMount",value:function(){window&&window.addEventListener&&(this.debouncedUpdate=(0,v.default)(this.updateDimensions,w),this.updateDimensions(),window.addEventListener("resize",this.debouncedUpdate))}},{key:"componentWillUnmount",value:function(){window&&window.removeEventListener&&window.removeEventListener("resize",this.debouncedUpdate)}},{key:"render",value:function(){return s.default.createElement("div",{ref:"withDimensionContainer",style:d},s.default.createElement(e,a({},n(this.state.containerWidth,this.state.containerHeight),this.props)))}}]),r}(f.Component),t.displayName=(0,l.default)(e,"withDimension"),r}};t.default=h},function(e,t){function n(e,t,n){function r(t){var n=h,r=m;return h=m=void 0,O=t,b=e.apply(r,n)}function o(e){return O=e,w=setTimeout(s,t),E?r(e):b}function u(e){var n=e-x,r=e-O,i=t-n;return D?j(i,y-r):i}function f(e){var n=e-x,r=e-O;return!x||n>=t||0>n||D&&r>=y}function s(){var e=_();return f(e)?d(e):void(w=setTimeout(s,u(e)))}function d(e){return clearTimeout(w),w=void 0,M&&h?r(e):(h=m=void 0,b)}function l(){void 0!==w&&clearTimeout(w),x=O=0,h=m=w=void 0}function p(){return void 0===w?b:d(_())}function v(){var e=_(),n=f(e);if(h=arguments,m=this,x=e,n){if(void 0===w)return o(x);if(D)return clearTimeout(w),w=setTimeout(s,t),r(x)}return void 0===w&&(w=setTimeout(s,t)),b}var h,m,y,b,w,x=0,O=0,E=!1,D=!1,M=!0;if("function"!=typeof e)throw new TypeError(c);return t=a(t)||0,i(n)&&(E=!!n.leading,D="maxWait"in n,y=D?g(a(n.maxWait)||0,t):y,M="trailing"in n?!!n.trailing:M),v.cancel=l,v.flush=p,v}function r(e){var t=i(e)?w.call(e):"";return t==s||t==d}function i(e){var t=typeof e;return!!e&&("object"==t||"function"==t)}function o(e){return!!e&&"object"==typeof e}function u(e){return"symbol"==typeof e||o(e)&&w.call(e)==l}function a(e){if("number"==typeof e)return e;if(u(e))return f;if(i(e)){var t=r(e.valueOf)?e.valueOf():e;e=i(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(p,"");var n=h.test(e);return n||m.test(e)?y(e.slice(2),n?2:8):v.test(e)?f:+e}var c="Expected a function",f=NaN,s="[object Function]",d="[object GeneratorFunction]",l="[object Symbol]",p=/^\s+|\s+$/g,v=/^[-+]0x[0-9a-f]+$/i,h=/^0b[01]+$/i,m=/^0o[0-7]+$/i,y=parseInt,b=Object.prototype,w=b.toString,g=Math.max,j=Math.min,_=Date.now;e.exports=n},function(e,t){"use strict";t.__esModule=!0;var n=function(e){if("string"==typeof e)return e;if(e)return e.displayName||e.name||"Component"};t.default=n},function(e,t,n){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}t.__esModule=!0;var i=n(3),o=r(i),u=function(e,t){return t+"("+(0,o.default)(e)+")"};t.default=u},function(t,n){t.exports=e}])});
+!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.WithDimension=t(require("react")):e.WithDimension=t(e.react)}(this,function(e){return function(e){function t(i){if(n[i])return n[i].exports;var r=n[i]={exports:{},id:i,loaded:!1};return e[i].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var r=n(1),o=i(r);t.default=o.default},function(e,t,n){"use strict";function i(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 o(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function u(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 a=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e},c=function(){function e(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(t,n,i){return n&&e(t.prototype,n),i&&e(t,i),t}}(),f=n(5),d=i(f),s=n(4),l=i(s),p=n(2),v=i(p),h=function(){var e=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];return e.getBoundingClientRect?e.getBoundingClientRect().height:e.clientHeight},m=function(){var e=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];return e.getBoundingClientRect?e.getBoundingClientRect().width:e.clientWidth},y=function(e,t){return{containerWidth:e,containerHeight:t}},w={width:"100%",height:"100%",padding:0,border:0},b=function(){var e=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],t=e.transform,n=void 0===t?y:t,i=e.containerStyle,s=void 0===i?w:i,p=e.getHeight,b=void 0===p?h:p,g=e.getWidth,j=void 0===g?m:g,_=e.wait,x=void 0===_?200:_;return function(e){var t,i;return i=t=function(t){function i(){var e,t,n,u;r(this,i);for(var a=arguments.length,c=Array(a),f=0;a>f;f++)c[f]=arguments[f];return t=n=o(this,(e=Object.getPrototypeOf(i)).call.apply(e,[this].concat(c))),n.state={containerWidth:null,containerHeight:null},n.updateDimensions=function(){var e=function(){var e=n.refs.withDimensionContainer;n.setState({containerWidth:j(e),containerHeight:b(e)})};"undefined"!=typeof window&&null!==window&&window.requestAnimationFrame?window.requestAnimationFrame(function(){return e()}):e()},u=t,o(n,u)}return u(i,t),c(i,[{key:"componentDidMount",value:function(){"undefined"!=typeof window&&null!==window&&window.addEventListener&&(this.debouncedUpdate=(0,v.default)(this.updateDimensions,x),this.updateDimensions(),window.addEventListener("resize",this.debouncedUpdate,{passive:!0}))}},{key:"componentWillUnmount",value:function(){"undefined"!=typeof window&&null!==window&&window.removeEventListener&&window.removeEventListener("resize",this.debouncedUpdate,{passive:!0})}},{key:"render",value:function(){return d.default.createElement("div",{ref:"withDimensionContainer",style:s},d.default.createElement(e,a({},n(this.state.containerWidth,this.state.containerHeight),this.props)))}}]),i}(f.Component),t.displayName=(0,l.default)(e,"withDimension"),i}};t.default=b},function(e,t){function n(e,t,n){function i(t){var n=h,i=m;return h=m=void 0,O=t,w=e.apply(i,n)}function o(e){return O=e,b=setTimeout(d,t),E?i(e):w}function u(e){var n=e-x,i=e-O,r=t-n;return W?j(r,y-i):r}function f(e){var n=e-x,i=e-O;return!x||n>=t||0>n||W&&i>=y}function d(){var e=_();return f(e)?s(e):void(b=setTimeout(d,u(e)))}function s(e){return clearTimeout(b),b=void 0,D&&h?i(e):(h=m=void 0,w)}function l(){void 0!==b&&clearTimeout(b),x=O=0,h=m=b=void 0}function p(){return void 0===b?w:s(_())}function v(){var e=_(),n=f(e);if(h=arguments,m=this,x=e,n){if(void 0===b)return o(x);if(W)return clearTimeout(b),b=setTimeout(d,t),i(x)}return void 0===b&&(b=setTimeout(d,t)),w}var h,m,y,w,b,x=0,O=0,E=!1,W=!1,D=!0;if("function"!=typeof e)throw new TypeError(c);return t=a(t)||0,r(n)&&(E=!!n.leading,W="maxWait"in n,y=W?g(a(n.maxWait)||0,t):y,D="trailing"in n?!!n.trailing:D),v.cancel=l,v.flush=p,v}function i(e){var t=r(e)?b.call(e):"";return t==d||t==s}function r(e){var t=typeof e;return!!e&&("object"==t||"function"==t)}function o(e){return!!e&&"object"==typeof e}function u(e){return"symbol"==typeof e||o(e)&&b.call(e)==l}function a(e){if("number"==typeof e)return e;if(u(e))return f;if(r(e)){var t=i(e.valueOf)?e.valueOf():e;e=r(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(p,"");var n=h.test(e);return n||m.test(e)?y(e.slice(2),n?2:8):v.test(e)?f:+e}var c="Expected a function",f=NaN,d="[object Function]",s="[object GeneratorFunction]",l="[object Symbol]",p=/^\s+|\s+$/g,v=/^[-+]0x[0-9a-f]+$/i,h=/^0b[01]+$/i,m=/^0o[0-7]+$/i,y=parseInt,w=Object.prototype,b=w.toString,g=Math.max,j=Math.min,_=Date.now;e.exports=n},function(e,t){"use strict";t.__esModule=!0;var n=function(e){if("string"==typeof e)return e;if(e)return e.displayName||e.name||"Component"};t.default=n},function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}t.__esModule=!0;var r=n(3),o=i(r),u=function(e,t){return t+"("+(0,o.default)(e)+")"};t.default=u},function(t,n){t.exports=e}])});

dist/with-dimension.js

@@ -31,2 +31,31 @@ 'use strict';
 
+var defaultGetHeight = function defaultGetHeight() {
+  var elem = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
+
+  if (elem.getBoundingClientRect) {
+    return elem.getBoundingClientRect().height;
+  }
+  return elem.clientHeight;
+};
+
+var defaultGetWidth = function defaultGetWidth() {
+  var elem = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
+
+  if (elem.getBoundingClientRect) {
+    return elem.getBoundingClientRect().width;
+  }
+  return elem.clientWidth;
+};
+
+var defaultTransform = function defaultTransform(width, height) {
+  return { containerWidth: width, containerHeight: height };
+};
+
+var defaultContainerStyle = {
+  width: '100%',
+  height: '100%',
+  padding: 0,
+  border: 0
+};
+
 var withDimension = function withDimension() {
@@ -36,20 +65,9 @@ var _ref = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
   var _ref$transform = _ref.transform;
-  var transform = _ref$transform === undefined ? function (width, height) {
-    return { containerWidth: width, containerHeight: height };
-  } : _ref$transform;
+  var transform = _ref$transform === undefined ? defaultTransform : _ref$transform;
   var _ref$containerStyle = _ref.containerStyle;
-  var containerStyle = _ref$containerStyle === undefined ? {
-    width: '100%',
-    height: '100%',
-    padding: 0,
-    border: 0
-  } : _ref$containerStyle;
+  var containerStyle = _ref$containerStyle === undefined ? defaultContainerStyle : _ref$containerStyle;
   var _ref$getHeight = _ref.getHeight;
-  var getHeight = _ref$getHeight === undefined ? function (elem) {
-    return elem.getBoundingClientRect().height;
-  } : _ref$getHeight;
+  var getHeight = _ref$getHeight === undefined ? defaultGetHeight : _ref$getHeight;
   var _ref$getWidth = _ref.getWidth;
-  var getWidth = _ref$getWidth === undefined ? function (elem) {
-    return elem.getBoundingClientRect().width;
-  } : _ref$getWidth;
+  var getWidth = _ref$getWidth === undefined ? defaultGetWidth : _ref$getWidth;
   var _ref$wait = _ref.wait;
@@ -78,3 +96,3 @@ var wait = _ref$wait === undefined ? 200 : _ref$wait;
         }, _this.updateDimensions = function () {
-          window.requestAnimationFrame(function () {
+          var update = function update() {
             var elem = _this.refs.withDimensionContainer;
@@ -86,3 +104,11 @@
             });
-          });
+          };
+
+          if (typeof window !== 'undefined' && window !== null && window.requestAnimationFrame) {
+            window.requestAnimationFrame(function () {
+              return update();
+            });
+          } else {
+            update();
+          }
         }, _temp), _possibleConstructorReturn(_this, _ret);
@@ -94,6 +120,6 @@ }
         value: function componentDidMount() {
-          if (window && window.addEventListener) {
+          if (typeof window !== 'undefined' && window !== null && window.addEventListener) {
             this.debouncedUpdate = (0, _lodash2.default)(this.updateDimensions, wait);
             this.updateDimensions();
-            window.addEventListener('resize', this.debouncedUpdate);
+            window.addEventListener('resize', this.debouncedUpdate, { passive: true });
           }
@@ -104,4 +130,4 @@ }
         value: function componentWillUnmount() {
-          if (window && window.removeEventListener) {
-            window.removeEventListener('resize', this.debouncedUpdate);
+          if (typeof window !== 'undefined' && window !== null && window.removeEventListener) {
+            window.removeEventListener('resize', this.debouncedUpdate, { passive: true });
           }
@@ -108,0 +134,0 @@ }

package.json

 {
   "name": "react-with-dimension",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Debounced React high order component to expose container width and height.",
@@ -39,11 +39,11 @@ "main": "dist/index.js",
   "devDependencies": {
-    "babel-cli": "^6.6.5",
-    "babel-core": "^6.7.4",
+    "babel-cli": "^6.10.1",
+    "babel-core": "^6.10.4",
     "babel-eslint": "^6.0.4",
-    "babel-jest": "^12.0.0",
+    "babel-jest": "^13.0.0",
     "babel-loader": "^6.2.4",
-    "babel-preset-es2015": "^6.6.0",
-    "babel-preset-react": "^6.5.0",
+    "babel-preset-es2015": "^6.9.0",
+    "babel-preset-react": "^6.11.1",
     "babel-preset-stage-0": "^6.5.0",
-    "enzyme": "^2.2.0",
+    "enzyme": "^2.4.0",
     "eslint": "^2.9.0",
@@ -54,7 +54,7 @@ "eslint-config-airbnb": "^9.0.1",
     "eslint-plugin-react": "^5.0.1",
-    "jest-cli": "^12.0.0",
+    "jest-cli": "^13.0.0",
     "react": "^15.0.0",
     "react-addons-test-utils": "^15.0.0",
     "react-dom": "^15.0.0",
-    "webpack": "^1.12.14"
+    "webpack": "^1.13.1"
   },
@@ -61,0 +61,0 @@ "jest": {

README.md

 # react-with-dimension
+[![npm version](https://img.shields.io/npm/v/react-with-dimension.svg?style=flat-square)](https://www.npmjs.com/package/react-with-dimension)
+[![dependency status](https://img.shields.io/david/team-magneto/react-with-dimension.svg?style=flat-square)](https://david-dm.org/team-magneto/react-with-dimension)
+[![build status](https://img.shields.io/travis/team-magneto/react-with-dimension.svg?style=flat-square)](https://travis-ci.org/team-magneto/react-with-dimension)
 
@@ -3,0 +6,0 @@ Debounced React high order component to expose container width and height.

src/with-dimension.js

@@ -5,12 +5,30 @@ import React, { Component } from 'react'
 
+const defaultGetHeight = (elem = {}) => {
+  if (elem.getBoundingClientRect) {
+    return elem.getBoundingClientRect().height
+  }
+  return elem.clientHeight
+}
+
+const defaultGetWidth = (elem = {}) => {
+  if (elem.getBoundingClientRect) {
+    return elem.getBoundingClientRect().width
+  }
+  return elem.clientWidth
+}
+
+const defaultTransform = (width, height) => ({ containerWidth: width, containerHeight: height })
+
+const defaultContainerStyle = {
+  width: '100%',
+  height: '100%',
+  padding: 0,
+  border: 0,
+}
+
 const withDimension = ({
-  transform = ((width, height) => ({ containerWidth: width, containerHeight: height })),
-  containerStyle = ({
-    width: '100%',
-    height: '100%',
-    padding: 0,
-    border: 0,
-  }),
-  getHeight = ((elem) => elem.getBoundingClientRect().height),
-  getWidth = ((elem) => elem.getBoundingClientRect().width),
+  transform = defaultTransform,
+  containerStyle = defaultContainerStyle,
+  getHeight = defaultGetHeight,
+  getWidth = defaultGetWidth,
   wait = 200,
@@ -26,6 +44,6 @@ } = {}) => (BaseComponent) => class extends Component {
   componentDidMount() {
-    if (window && window.addEventListener) {
+    if (typeof window !== 'undefined' && window !== null && window.addEventListener) {
       this.debouncedUpdate = debounce(this.updateDimensions, wait)
       this.updateDimensions()
-      window.addEventListener('resize', this.debouncedUpdate)
+      window.addEventListener('resize', this.debouncedUpdate, { passive: true })
     }
@@ -35,4 +53,4 @@ }
   componentWillUnmount() {
-    if (window && window.removeEventListener) {
-      window.removeEventListener('resize', this.debouncedUpdate)
+    if (typeof window !== 'undefined' && window !== null && window.removeEventListener) {
+      window.removeEventListener('resize', this.debouncedUpdate, { passive: true })
     }
@@ -51,3 +69,3 @@ }
 
-    if (window.requestAnimationFrame) {
+    if (typeof window !== 'undefined' && window !== null && window.requestAnimationFrame) {
       window.requestAnimationFrame(() => update())
@@ -54,0 +72,0 @@ } else {

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

22695

increased by11.38%

Number of package files

14

increased by7.69%

Lines of code

269

increased by13.98%

Number of lines in readme file

55

increased by5.77%

No dependency changes