react-within-viewport - npm Package Compare versions

Comparing version 1.2.1 to 1.2.2

dist/bundle.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):"object"==typeof exports?exports.WithinViewport=e(require("react")):t.WithinViewport=e(t.react)}(this,function(t){return function(t){function e(i){if(n[i])return n[i].exports;var r=n[i]={exports:{},id:i,loaded:!1};return t[i].call(r.exports,r,r.exports,e),r.loaded=!0,r.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0});var r=n(1),o=i(r);e.default=o.default},function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{"default":t}}function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function o(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function u(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}Object.defineProperty(e,"__esModule",{value:!0});var a=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t},f=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),c=n(7),d=i(c),l=n(6),s=i(l),p=n(5),w=i(p),h=n(3),v=i(h),y=function(){var t=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],e=t.transform,n=void 0===e?function(t){var e=t.inViewport;return{inViewport:e}}:e,i=t.containerStyle,l=void 0===i?{width:"100%",height:"100%",padding:0,border:0}:i,p=t.getHeight,h=void 0===p?function(t){return t.getBoundingClientRect().height}:p,y=t.getWidth,g=void 0===y?function(t){return t.getBoundingClientRect().width}:y,m=t.getTop,b=void 0===m?function(t){return t.getBoundingClientRect().top}:m,O=t.getLeft,j=void 0===O?function(t){return t.getBoundingClientRect().left}:O,_=t.getViewportHeight,V=void 0===_?function(t,e){return t.innerHeight||e.clientHeight}:_,x=t.getViewportWidth,T=void 0===x?function(t,e){return t.innerWidth||e.clientWidth}:x,W=t.defaultAnswer,L=void 0===W?!0:W,E=t.wait,R=void 0===E?200:E,H=t.onViewportEnter,M=void 0===H?function(){}:H,S=t.onViewportLeave,C=void 0===S?function(){}:S;return function(t){var e,i;return i=e=function(e){function i(){var t,e,n,u;r(this,i);for(var f=arguments.length,c=Array(f),d=0;f>d;d++)c[d]=arguments[d];return e=n=o(this,(t=Object.getPrototypeOf(i)).call.apply(t,[this].concat(c))),n.state={containerWidth:null,containerHeight:null,containerTopOffset:null,containerLeftOffset:null,windowWidth:null,windowHeight:null,ready:!1},n.updateResize=function(){var t=function(){var t=n.refs.withinViewportContainer,e={containerWidth:g(t),containerHeight:h(t),windowWidth:T(window,document),windowHeight:V(window,document)};n.setState(a({},e,{ready:n.isReady(a({},n.state,e))}))};window.requestAnimationFrame?window.requestAnimationFrame(function(){return t()}):t()},n.updateScroll=function(){var t=function(){var t=n.refs.withinViewportContainer,e={containerTopOffset:b(t),containerLeftOffset:j(t)};n.setState(a({},e,{ready:n.isReady(a({},n.state,e))}))};window.requestAnimationFrame?window.requestAnimationFrame(function(){return t()}):t()},n.isReady=function(){var t=arguments.length<=0||void 0===arguments[0]?n.state:arguments[0];return null!==t.containerWidth&&null!==t.containerHeight&&null!==t.containerTopOffset&&null!==t.containerLeftOffset&&null!==t.windowHeight&&null!==t.windowWidth},n.inViewport=function(){var t=arguments.length<=0||void 0===arguments[0]?n.state:arguments[0];return t.ready?(t.containerTopOffset<0&&t.containerHeight+t.containerTopOffset>0||t.containerTopOffset>=0&&t.containerTopOffset<t.windowHeight)&&(t.containerLeftOffset<0&&t.containerWidth+t.containerLeftOffset>0||t.containerLeftOffset>=0&&t.containerLeftOffset<t.windowWidth):L},u=e,o(n,u)}return u(i,e),f(i,[{key:"componentDidMount",value:function(){window&&window.addEventListener&&(this.debouncedUpdateResize=(0,v.default)(this.updateResize,R),this.debouncedUpdateScroll=(0,v.default)(this.updateScroll,R),window.addEventListener("resize",this.debouncedUpdateResize),window.addEventListener("scroll",this.debouncedUpdateScroll),this.updateResize(),this.updateScroll())}},{key:"componentDidUpdate",value:function(t,e){var n=this.inViewport(e),i=this.inViewport(this.state);null===e.ready&&i===!1&&C(),null===e.ready&&i===!0&&M(),n===!0&&i===!1&&C(),n===!1&&i===!0&&M()}},{key:"componentWillUnmount",value:function(){window&&window.removeEventListener&&(window.removeEventListener("resize",this.debouncedUpdateResize),window.removeEventListener("scroll",this.debouncedUpdateScroll))}},{key:"shouldComponentUpdate",value:function(t,e){return!(0,w.default)(this.props,t)||!(0,w.default)(n(a({inViewport:this.inViewport(this.state)},this.state)),n(a({inViewport:this.inViewport(e)},e)))}},{key:"render",value:function(){return d.default.createElement("div",{ref:"withinViewportContainer",style:l},d.default.createElement(t,a({},n(a({inViewport:this.inViewport()},this.state)),this.props)))}}]),i}(c.Component),e.displayName=(0,s.default)(t,"withinViewport"),i}};e.default=y},function(t,e){"use strict";function n(t,e){return t===e?0!==t||1/t===1/e:t!==t&&e!==e}function i(t,e){if(n(t,e))return!0;if("object"!=typeof t||null===t||"object"!=typeof e||null===e)return!1;var i=Object.keys(t),o=Object.keys(e);if(i.length!==o.length)return!1;for(var u=0;u<i.length;u++)if(!r.call(e,i[u])||!n(t[i[u]],e[i[u]]))return!1;return!0}var r=Object.prototype.hasOwnProperty;t.exports=i},function(t,e){function n(t,e,n){function i(e){var n=h,i=v;return h=v=void 0,V=e,g=t.apply(i,n)}function o(t){return V=t,m=setTimeout(d,e),x?i(t):g}function u(t){var n=t-_,i=t-V,r=e-n;return T?O(r,y-i):r}function c(t){var n=t-_,i=t-V;return!_||n>=e||0>n||T&&i>=y}function d(){var t=j();return c(t)?l(t):void(m=setTimeout(d,u(t)))}function l(t){return clearTimeout(m),m=void 0,W&&h?i(t):(h=v=void 0,g)}function s(){void 0!==m&&clearTimeout(m),_=V=0,h=v=m=void 0}function p(){return void 0===m?g:l(j())}function w(){var t=j(),n=c(t);if(h=arguments,v=this,_=t,n){if(void 0===m)return o(_);if(T)return clearTimeout(m),m=setTimeout(d,e),i(_)}return void 0===m&&(m=setTimeout(d,e)),g}var h,v,y,g,m,_=0,V=0,x=!1,T=!1,W=!0;if("function"!=typeof t)throw new TypeError(f);return e=a(e)||0,r(n)&&(x=!!n.leading,T="maxWait"in n,y=T?b(a(n.maxWait)||0,e):y,W="trailing"in n?!!n.trailing:W),w.cancel=s,w.flush=p,w}function i(t){var e=r(t)?m.call(t):"";return e==d||e==l}function r(t){var e=typeof t;return!!t&&("object"==e||"function"==e)}function o(t){return!!t&&"object"==typeof t}function u(t){return"symbol"==typeof t||o(t)&&m.call(t)==s}function a(t){if("number"==typeof t)return t;if(u(t))return c;if(r(t)){var e=i(t.valueOf)?t.valueOf():t;t=r(e)?e+"":e}if("string"!=typeof t)return 0===t?t:+t;t=t.replace(p,"");var n=h.test(t);return n||v.test(t)?y(t.slice(2),n?2:8):w.test(t)?c:+t}var f="Expected a function",c=NaN,d="[object Function]",l="[object GeneratorFunction]",s="[object Symbol]",p=/^\s+|\s+$/g,w=/^[-+]0x[0-9a-f]+$/i,h=/^0b[01]+$/i,v=/^0o[0-7]+$/i,y=parseInt,g=Object.prototype,m=g.toString,b=Math.max,O=Math.min,j=Date.now;t.exports=n},function(t,e){"use strict";e.__esModule=!0;var n=function(t){if("string"==typeof t)return t;if(t)return t.displayName||t.name||"Component"};e.default=n},function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{"default":t}}e.__esModule=!0;var r=n(2),o=i(r);e.default=o.default},function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{"default":t}}e.__esModule=!0;var r=n(4),o=i(r),u=function(t,e){return e+"("+(0,o.default)(t)+")"};e.default=u},function(e,n){e.exports=t}])});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("react")):"function"==typeof define&&define.amd?define(["react"],e):"object"==typeof exports?exports.WithinViewport=e(require("react")):t.WithinViewport=e(t.react)}(this,function(t){return function(t){function e(i){if(n[i])return n[i].exports;var o=n[i]={exports:{},id:i,loaded:!1};return t[i].call(o.exports,o,o.exports,e),o.loaded=!0,o.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0});var o=n(1),r=i(o);e.default=r.default},function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{"default":t}}function o(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function r(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e}function u(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)}function a(){}Object.defineProperty(e,"__esModule",{value:!0});var f=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t},c=function(){function t(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,n,i){return n&&t(e.prototype,n),i&&t(e,i),e}}(),l=n(7),d=i(l),s=n(6),p=i(s),v=n(5),w=i(v),h=n(3),g=i(h),y=function(){var t=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];return t&&t.getBoundingClientRect?t.getBoundingClientRect().height:t?t.clientHeight:null},m=function(){var t=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];return t&&t.getBoundingClientRect?t.getBoundingClientRect().width:t?t.clientWidth:null},b=function(){var t=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];return t&&t.getBoundingClientRect?t.getBoundingClientRect().top:t?t.clientTop:null},O=function(){var t=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];return t&&t.getBoundingClientRect?t.getBoundingClientRect().left:t?t.clientLeft:null},j=function(){var t=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],e=arguments.length<=1||void 0===arguments[1]?{}:arguments[1];return t||e?t.innerHeight||e.clientHeight:null},_=function(){var t=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],e=arguments.length<=1||void 0===arguments[1]?{}:arguments[1];return t||e?t.innerWidth||e.clientWidth:null},V=function(t){var e=t.inViewport;return{inViewport:e}},T={width:"100%",height:"100%",padding:0,border:0},x=function(){var t=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],e=t.transform,n=void 0===e?V:e,i=t.containerStyle,s=void 0===i?T:i,v=t.getHeight,h=void 0===v?y:v,x=t.getWidth,R=void 0===x?m:x,W=t.getTop,L=void 0===W?b:W,C=t.getLeft,E=void 0===C?O:C,H=t.getViewportHeight,M=void 0===H?j:H,S=t.getViewportWidth,U=void 0===S?_:S,k=t.defaultAnswer,z=void 0===k?!0:k,B=t.wait,P=void 0===B?200:B,q=t.onViewportEnter,A=void 0===q?a:q,F=t.onViewportLeave,N=void 0===F?a:F;return function(t){var e,i;return i=e=function(e){function i(){var t,e,n,u;o(this,i);for(var a=arguments.length,c=Array(a),l=0;a>l;l++)c[l]=arguments[l];return e=n=r(this,(t=Object.getPrototypeOf(i)).call.apply(t,[this].concat(c))),n.state={containerWidth:null,containerHeight:null,containerTopOffset:null,containerLeftOffset:null,windowWidth:null,windowHeight:null,ready:!1},n.updateResize=function(){if(n.mounted){var t=function(){var t=n.refs.withinViewportContainer,e={containerWidth:R(t),containerHeight:h(t),windowWidth:U(window,document),windowHeight:M(window,document)};n.setState(f({},e,{ready:n.isReady(f({},n.state,e))}))};"undefined"!=typeof window&&null!==window&&window.requestAnimationFrame?window.requestAnimationFrame(function(){return t()}):t()}},n.updateScroll=function(){if(n.mounted){var t=function(){var t=n.refs.withinViewportContainer,e={containerTopOffset:L(t),containerLeftOffset:E(t)};n.setState(f({},e,{ready:n.isReady(f({},n.state,e))}))};"undefined"!=typeof window&&null!==window&&window.requestAnimationFrame?window.requestAnimationFrame(function(){return t()}):t()}},n.isReady=function(){var t=arguments.length<=0||void 0===arguments[0]?n.state:arguments[0];return null!==t.containerWidth&&null!==t.containerHeight&&null!==t.containerTopOffset&&null!==t.containerLeftOffset&&null!==t.windowHeight&&null!==t.windowWidth},n.inViewport=function(){var t=arguments.length<=0||void 0===arguments[0]?n.state:arguments[0];return t.ready?(t.containerTopOffset<0&&t.containerHeight+t.containerTopOffset>0||t.containerTopOffset>=0&&t.containerTopOffset<t.windowHeight)&&(t.containerLeftOffset<0&&t.containerWidth+t.containerLeftOffset>0||t.containerLeftOffset>=0&&t.containerLeftOffset<t.windowWidth):z},u=e,r(n,u)}return u(i,e),c(i,[{key:"componentDidMount",value:function(){"undefined"!=typeof window&&null!==window&&window.addEventListener&&(this.mounted=!0,this.debouncedUpdateResize=(0,g.default)(this.updateResize,P),this.debouncedUpdateScroll=(0,g.default)(this.updateScroll,P),window.addEventListener("resize",this.debouncedUpdateResize,{passive:!0}),window.addEventListener("scroll",this.debouncedUpdateScroll,{passive:!0}),this.updateResize(),this.updateScroll())}},{key:"componentDidUpdate",value:function(t,e){var n=this.inViewport(e),i=this.inViewport(this.state);null===e.ready&&i===!1&&N(),null===e.ready&&i===!0&&A(),n===!0&&i===!1&&N(),n===!1&&i===!0&&A()}},{key:"componentWillUnmount",value:function(){"undefined"!=typeof window&&null!==window&&window.removeEventListener&&(this.mounted=!1,window.removeEventListener("resize",this.debouncedUpdateResize),window.removeEventListener("scroll",this.debouncedUpdateScroll))}},{key:"shouldComponentUpdate",value:function(t,e){return!(0,w.default)(this.props,t)||!(0,w.default)(n(f({inViewport:this.inViewport(this.state)},this.state)),n(f({inViewport:this.inViewport(e)},e)))}},{key:"render",value:function(){return d.default.createElement("div",{ref:"withinViewportContainer",style:s},d.default.createElement(t,f({},n(f({inViewport:this.inViewport()},this.state)),this.props)))}}]),i}(l.Component),e.displayName=(0,p.default)(t,"withinViewport"),i}};e.default=x},function(t,e){"use strict";function n(t,e){return t===e?0!==t||1/t===1/e:t!==t&&e!==e}function i(t,e){if(n(t,e))return!0;if("object"!=typeof t||null===t||"object"!=typeof e||null===e)return!1;var i=Object.keys(t),r=Object.keys(e);if(i.length!==r.length)return!1;for(var u=0;u<i.length;u++)if(!o.call(e,i[u])||!n(t[i[u]],e[i[u]]))return!1;return!0}var o=Object.prototype.hasOwnProperty;t.exports=i},function(t,e){function n(t,e,n){function i(e){var n=w,i=h;return w=h=void 0,V=e,y=t.apply(i,n)}function r(t){return V=t,m=setTimeout(l,e),T?i(t):y}function u(t){var n=t-_,i=t-V,o=e-n;return x?O(o,g-i):o}function c(t){var n=t-_,i=t-V;return!_||n>=e||0>n||x&&i>=g}function l(){var t=j();return c(t)?d(t):void(m=setTimeout(l,u(t)))}function d(t){return clearTimeout(m),m=void 0,R&&w?i(t):(w=h=void 0,y)}function s(){void 0!==m&&clearTimeout(m),_=V=0,w=h=m=void 0}function p(){return void 0===m?y:d(j())}function v(){var t=j(),n=c(t);if(w=arguments,h=this,_=t,n){if(void 0===m)return r(_);if(x)return clearTimeout(m),m=setTimeout(l,e),i(_)}return void 0===m&&(m=setTimeout(l,e)),y}var w,h,g,y,m,_=0,V=0,T=!1,x=!1,R=!0;if("function"!=typeof t)throw new TypeError(f);return e=a(e)||0,o(n)&&(T=!!n.leading,x="maxWait"in n,g=x?b(a(n.maxWait)||0,e):g,R="trailing"in n?!!n.trailing:R),v.cancel=s,v.flush=p,v}function i(t){var e=o(t)?m.call(t):"";return e==l||e==d}function o(t){var e=typeof t;return!!t&&("object"==e||"function"==e)}function r(t){return!!t&&"object"==typeof t}function u(t){return"symbol"==typeof t||r(t)&&m.call(t)==s}function a(t){if("number"==typeof t)return t;if(u(t))return c;if(o(t)){var e=i(t.valueOf)?t.valueOf():t;t=o(e)?e+"":e}if("string"!=typeof t)return 0===t?t:+t;t=t.replace(p,"");var n=w.test(t);return n||h.test(t)?g(t.slice(2),n?2:8):v.test(t)?c:+t}var f="Expected a function",c=NaN,l="[object Function]",d="[object GeneratorFunction]",s="[object Symbol]",p=/^\s+|\s+$/g,v=/^[-+]0x[0-9a-f]+$/i,w=/^0b[01]+$/i,h=/^0o[0-7]+$/i,g=parseInt,y=Object.prototype,m=y.toString,b=Math.max,O=Math.min,j=Date.now;t.exports=n},function(t,e){"use strict";e.__esModule=!0;var n=function(t){if("string"==typeof t)return t;if(t)return t.displayName||t.name||"Component"};e.default=n},function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{"default":t}}e.__esModule=!0;var o=n(2),r=i(o);e.default=r.default},function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{"default":t}}e.__esModule=!0;var o=n(4),r=i(o),u=function(t,e){return e+"("+(0,r.default)(t)+")"};e.default=u},function(e,n){e.exports=t}])});

dist/within-viewport.js

@@ -35,49 +35,113 @@ 'use strict';
 
-var withinViewport = function withinViewport() {
-  var _ref = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
+var defaultGetHeight = function defaultGetHeight() {
+  var elem = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
 
-  var _ref$transform = _ref.transform;
-  var transform = _ref$transform === undefined ? function (_ref2) {
-    var inViewport = _ref2.inViewport;
-    return { inViewport: inViewport };
-  } : _ref$transform;
-  var _ref$containerStyle = _ref.containerStyle;
-  var containerStyle = _ref$containerStyle === undefined ? {
-    width: '100%',
-    height: '100%',
-    padding: 0,
-    border: 0
-  } : _ref$containerStyle;
-  var _ref$getHeight = _ref.getHeight;
-  var getHeight = _ref$getHeight === undefined ? function (elem) {
+  if (elem && elem.getBoundingClientRect) {
     return elem.getBoundingClientRect().height;
-  } : _ref$getHeight;
-  var _ref$getWidth = _ref.getWidth;
-  var getWidth = _ref$getWidth === undefined ? function (elem) {
+  }
+  if (elem) {
+    return elem.clientHeight;
+  }
+  return null;
+};
+
+var defaultGetWidth = function defaultGetWidth() {
+  var elem = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
+
+  if (elem && elem.getBoundingClientRect) {
     return elem.getBoundingClientRect().width;
-  } : _ref$getWidth;
-  var _ref$getTop = _ref.getTop;
-  var getTop = _ref$getTop === undefined ? function (elem) {
+  }
+  if (elem) {
+    return elem.clientWidth;
+  }
+  return null;
+};
+
+var defaultGetTop = function defaultGetTop() {
+  var elem = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
+
+  if (elem && elem.getBoundingClientRect) {
     return elem.getBoundingClientRect().top;
-  } : _ref$getTop;
-  var _ref$getLeft = _ref.getLeft;
-  var getLeft = _ref$getLeft === undefined ? function (elem) {
+  }
+  if (elem) {
+    return elem.clientTop;
+  }
+  return null;
+};
+
+var defaultGetLeft = function defaultGetLeft() {
+  var elem = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
+
+  if (elem && elem.getBoundingClientRect) {
     return elem.getBoundingClientRect().left;
-  } : _ref$getLeft;
-  var _ref$getViewportHeigh = _ref.getViewportHeight;
-  var getViewportHeight = _ref$getViewportHeigh === undefined ? function (_window, _document) {
+  }
+  if (elem) {
+    return elem.clientLeft;
+  }
+  return null;
+};
+
+var defaultGetViewportHeight = function defaultGetViewportHeight() {
+  var _window = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
+
+  var _document = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
+
+  if (_window || _document) {
     return _window.innerHeight || _document.clientHeight;
-  } : _ref$getViewportHeigh;
-  var _ref$getViewportWidth = _ref.getViewportWidth;
-  var getViewportWidth = _ref$getViewportWidth === undefined ? function (_window, _document) {
+  }
+  return null;
+};
+
+var defaultGetViewportWidth = function defaultGetViewportWidth() {
+  var _window = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
+
+  var _document = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
+
+  if (_window || _document) {
     return _window.innerWidth || _document.clientWidth;
-  } : _ref$getViewportWidth;
-  var _ref$defaultAnswer = _ref.defaultAnswer;
-  var defaultAnswer = _ref$defaultAnswer === undefined ? true : _ref$defaultAnswer;
-  var _ref$wait = _ref.wait;
-  var wait = _ref$wait === undefined ? 200 : _ref$wait;
-  var _ref$onViewportEnter = _ref.onViewportEnter;
-  var onViewportEnter = _ref$onViewportEnter === undefined ? function () {} : _ref$onViewportEnter;
-  var _ref$onViewportLeave = _ref.onViewportLeave;
-  var onViewportLeave = _ref$onViewportLeave === undefined ? function () {} : _ref$onViewportLeave;
+  }
+  return null;
+};
+
+var defaultTransform = function defaultTransform(_ref) {
+  var inViewport = _ref.inViewport;
+  return { inViewport: inViewport };
+};
+
+var defaultContainerStyle = {
+  width: '100%',
+  height: '100%',
+  padding: 0,
+  border: 0
+};
+
+function noop() {}
+
+var withinViewport = function withinViewport() {
+  var _ref2 = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];
+
+  var _ref2$transform = _ref2.transform;
+  var transform = _ref2$transform === undefined ? defaultTransform : _ref2$transform;
+  var _ref2$containerStyle = _ref2.containerStyle;
+  var containerStyle = _ref2$containerStyle === undefined ? defaultContainerStyle : _ref2$containerStyle;
+  var _ref2$getHeight = _ref2.getHeight;
+  var getHeight = _ref2$getHeight === undefined ? defaultGetHeight : _ref2$getHeight;
+  var _ref2$getWidth = _ref2.getWidth;
+  var getWidth = _ref2$getWidth === undefined ? defaultGetWidth : _ref2$getWidth;
+  var _ref2$getTop = _ref2.getTop;
+  var getTop = _ref2$getTop === undefined ? defaultGetTop : _ref2$getTop;
+  var _ref2$getLeft = _ref2.getLeft;
+  var getLeft = _ref2$getLeft === undefined ? defaultGetLeft : _ref2$getLeft;
+  var _ref2$getViewportHeig = _ref2.getViewportHeight;
+  var getViewportHeight = _ref2$getViewportHeig === undefined ? defaultGetViewportHeight : _ref2$getViewportHeig;
+  var _ref2$getViewportWidt = _ref2.getViewportWidth;
+  var getViewportWidth = _ref2$getViewportWidt === undefined ? defaultGetViewportWidth : _ref2$getViewportWidt;
+  var _ref2$defaultAnswer = _ref2.defaultAnswer;
+  var defaultAnswer = _ref2$defaultAnswer === undefined ? true : _ref2$defaultAnswer;
+  var _ref2$wait = _ref2.wait;
+  var wait = _ref2$wait === undefined ? 200 : _ref2$wait;
+  var _ref2$onViewportEnter = _ref2.onViewportEnter;
+  var onViewportEnter = _ref2$onViewportEnter === undefined ? noop : _ref2$onViewportEnter;
+  var _ref2$onViewportLeave = _ref2.onViewportLeave;
+  var onViewportLeave = _ref2$onViewportLeave === undefined ? noop : _ref2$onViewportLeave;
   return function (BaseComponent) {
@@ -109,2 +173,6 @@ var _class, _temp2;
         }, _this.updateResize = function () {
+          if (!_this.mounted) {
+            return;
+          }
+
           var update = function update() {
@@ -123,3 +191,3 @@ var elem = _this.refs.withinViewportContainer;
 
-          if (window.requestAnimationFrame) {
+          if (typeof window !== 'undefined' && window !== null && window.requestAnimationFrame) {
             window.requestAnimationFrame(function () {
@@ -132,2 +200,6 @@ return update();
         }, _this.updateScroll = function () {
+          if (!_this.mounted) {
+            return;
+          }
+
           var update = function update() {
@@ -143,3 +215,3 @@ var elem = _this.refs.withinViewportContainer;
 
-          if (window.requestAnimationFrame) {
+          if (typeof window !== 'undefined' && window !== null && window.requestAnimationFrame) {
             window.requestAnimationFrame(function () {
@@ -167,7 +239,8 @@ return update();
         value: function componentDidMount() {
-          if (window && window.addEventListener) {
+          if (typeof window !== 'undefined' && window !== null && window.addEventListener) {
+            this.mounted = true;
             this.debouncedUpdateResize = (0, _lodash2.default)(this.updateResize, wait);
             this.debouncedUpdateScroll = (0, _lodash2.default)(this.updateScroll, wait);
-            window.addEventListener('resize', this.debouncedUpdateResize);
-            window.addEventListener('scroll', this.debouncedUpdateScroll);
+            window.addEventListener('resize', this.debouncedUpdateResize, { passive: true });
+            window.addEventListener('scroll', this.debouncedUpdateScroll, { passive: true });
             this.updateResize();
@@ -199,3 +272,4 @@ this.updateScroll();
         value: function componentWillUnmount() {
-          if (window && window.removeEventListener) {
+          if (typeof window !== 'undefined' && window !== null && window.removeEventListener) {
+            this.mounted = false;
             window.removeEventListener('resize', this.debouncedUpdateResize);
@@ -202,0 +276,0 @@ window.removeEventListener('scroll', this.debouncedUpdateScroll);

package.json

 {
   "name": "react-within-viewport",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "Debounced React high order component to flag when it's container is inside the viewport.",
@@ -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": {

src/within-viewport.js

@@ -6,20 +6,80 @@ import React, { Component } from 'react'
 
+const defaultGetHeight = (elem = {}) => {
+  if (elem && elem.getBoundingClientRect) {
+    return elem.getBoundingClientRect().height
+  }
+  if (elem) {
+    return elem.clientHeight
+  }
+  return null
+}
+
+const defaultGetWidth = (elem = {}) => {
+  if (elem && elem.getBoundingClientRect) {
+    return elem.getBoundingClientRect().width
+  }
+  if (elem) {
+    return elem.clientWidth
+  }
+  return null
+}
+
+const defaultGetTop = (elem = {}) => {
+  if (elem && elem.getBoundingClientRect) {
+    return elem.getBoundingClientRect().top
+  }
+  if (elem) {
+    return elem.clientTop
+  }
+  return null
+}
+
+const defaultGetLeft = (elem = {}) => {
+  if (elem && elem.getBoundingClientRect) {
+    return elem.getBoundingClientRect().left
+  }
+  if (elem) {
+    return elem.clientLeft
+  }
+  return null
+}
+
+const defaultGetViewportHeight = (_window = {}, _document = {}) => {
+  if (_window || _document) {
+    return _window.innerHeight || _document.clientHeight
+  }
+  return null
+}
+
+const defaultGetViewportWidth = (_window = {}, _document = {}) => {
+  if (_window || _document) {
+    return _window.innerWidth || _document.clientWidth
+  }
+  return null
+}
+
+const defaultTransform = ({ inViewport }) => ({ inViewport })
+
+const defaultContainerStyle = {
+  width: '100%',
+  height: '100%',
+  padding: 0,
+  border: 0,
+}
+
+function noop() {}
+
 const withinViewport = ({
-  transform = (({ inViewport }) => ({ inViewport })),
-  containerStyle = ({
-    width: '100%',
-    height: '100%',
-    padding: 0,
-    border: 0,
-  }),
-  getHeight = ((elem) => elem.getBoundingClientRect().height),
-  getWidth = ((elem) => elem.getBoundingClientRect().width),
-  getTop = ((elem) => elem.getBoundingClientRect().top),
-  getLeft = ((elem) => elem.getBoundingClientRect().left),
-  getViewportHeight = ((_window, _document) => _window.innerHeight || _document.clientHeight),
-  getViewportWidth = ((_window, _document) => _window.innerWidth || _document.clientWidth),
+  transform = defaultTransform,
+  containerStyle = defaultContainerStyle,
+  getHeight = defaultGetHeight,
+  getWidth = defaultGetWidth,
+  getTop = defaultGetTop,
+  getLeft = defaultGetLeft,
+  getViewportHeight = defaultGetViewportHeight,
+  getViewportWidth = defaultGetViewportWidth,
   defaultAnswer = true,
   wait = 200,
-  onViewportEnter = () => {},
-  onViewportLeave = () => {},
+  onViewportEnter = noop,
+  onViewportLeave = noop,
 } = {}) => (BaseComponent) => class extends Component {
@@ -39,7 +99,8 @@ static displayName = wrapDisplayName(BaseComponent, 'withinViewport')
   componentDidMount() {
-    if (window && window.addEventListener) {
+    if (typeof window !== 'undefined' && window !== null && window.addEventListener) {
+      this.mounted = true
       this.debouncedUpdateResize = debounce(this.updateResize, wait)
       this.debouncedUpdateScroll = debounce(this.updateScroll, wait)
-      window.addEventListener('resize', this.debouncedUpdateResize)
-      window.addEventListener('scroll', this.debouncedUpdateScroll)
+      window.addEventListener('resize', this.debouncedUpdateResize, { passive: true })
+      window.addEventListener('scroll', this.debouncedUpdateScroll, { passive: true })
       this.updateResize()
@@ -61,3 +122,4 @@ this.updateScroll()
   componentWillUnmount() {
-    if (window && window.removeEventListener) {
+    if (typeof window !== 'undefined' && window !== null && window.removeEventListener) {
+      this.mounted = false
       window.removeEventListener('resize', this.debouncedUpdateResize)
@@ -79,2 +141,4 @@ window.removeEventListener('scroll', this.debouncedUpdateScroll)
   updateResize = () => {
+    if (!this.mounted) { return }
+
     const update = () => {
@@ -93,3 +157,3 @@ const elem = this.refs.withinViewportContainer
 
-    if (window.requestAnimationFrame) {
+    if (typeof window !== 'undefined' && window !== null && window.requestAnimationFrame) {
       window.requestAnimationFrame(() => update())
@@ -102,2 +166,4 @@ } else {
   updateScroll = () => {
+    if (!this.mounted) { return }
+
     const update = () => {
@@ -113,3 +179,3 @@ const elem = this.refs.withinViewportContainer
 
-    if (window.requestAnimationFrame) {
+    if (typeof window !== 'undefined' && window !== null && window.requestAnimationFrame) {
       window.requestAnimationFrame(() => update())
@@ -116,0 +182,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

38993

increased by12.92%

Lines of code

627

increased by21.28%

No dependency changes