react-within-viewport - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1

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 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)}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(5),d=i(c),s=n(4),l=i(s),p=n(2),v=i(p),w=function(){var t=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],e=t.transform,n=void 0===e?function(t){return{inViewport:t}}:e,i=t.containerStyle,s=void 0===i?{width:"100%",height:"100%",padding:0,border:0}:i,p=t.getHeight,w=void 0===p?function(t){return t.getBoundingClientRect().height}:p,h=t.getWidth,y=void 0===h?function(t){return t.getBoundingClientRect().width}:h,g=t.getTop,m=void 0===g?function(t){return t.getBoundingClientRect().top}:g,b=t.getLeft,O=void 0===b?function(t){return t.getBoundingClientRect().left}:b,j=t.getViewportHeight,_=void 0===j?function(t,e){return t.innerHeight||e.clientHeight}:j,x=t.getViewportWidth,T=void 0===x?function(t,e){return t.innerWidth||e.clientWidth}:x,W=t.defaultAnswer,E=void 0===W?!0:W,L=t.wait,H=void 0===L?200:L;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,f=Array(a),c=0;a>c;c++)f[c]=arguments[c];return e=n=r(this,(t=Object.getPrototypeOf(i)).call.apply(t,[this].concat(f))),n.state={containerWidth:null,containerHeight:null,containerTopOffset:null,containerLeftOffset:null,windowWidth:null,windowHeight:null,updated:!1},n.updateState=function(){var t=function(){var t=n.refs.withinViewportContainer;n.setState({containerWidth:y(t),containerHeight:w(t),containerTopOffset:m(t),containerLeftOffset:O(t),windowWidth:T(window,document),windowHeight:_(window,document),updated:!0})};window.requestAnimationFrame?window.requestAnimationFrame(function(){return t()}):t()},n.inViewport=function(){return n.state.updated?(n.state.containerTopOffset<0&&n.state.containerHeight+n.state.containerTopOffset>0||n.state.containerTopOffset>=0&&n.state.containerTopOffset<n.state.windowHeight)&&(n.state.containerLeftOffset<0&&n.state.containerWidth+n.state.containerLeftOffset>0||n.state.containerLeftOffset>=0&&n.state.containerLeftOffset<n.state.windowWidth):E},u=e,r(n,u)}return u(i,e),f(i,[{key:"componentDidMount",value:function(){window&&window.addEventListener&&(this.debouncedUpdate=(0,v.default)(this.updateState,H),window.addEventListener("resize",this.debouncedUpdate),window.addEventListener("scroll",this.debouncedUpdate),this.updateState())}},{key:"componentWillUnmount",value:function(){window&&window.removeEventListener&&(window.removeEventListener("resize",this.debouncedUpdate),window.removeEventListener("scroll",this.debouncedUpdate))}},{key:"render",value:function(){return d.default.createElement("div",{ref:"withinViewportContainer",style:s},d.default.createElement(t,a({},n(this.inViewport()),this.props)))}}]),i}(c.Component),e.displayName=(0,l.default)(t,"withinViewport"),i}};e.default=w},function(t,e){function n(t,e,n){function i(e){var n=w,i=h;return w=h=void 0,x=e,g=t.apply(i,n)}function r(t){return x=t,m=setTimeout(d,e),T?i(t):g}function u(t){var n=t-_,i=t-x,o=e-n;return W?O(o,y-i):o}function c(t){var n=t-_,i=t-x;return!_||n>=e||0>n||W&&i>=y}function d(){var t=j();return c(t)?s(t):void(m=setTimeout(d,u(t)))}function s(t){return clearTimeout(m),m=void 0,E&&w?i(t):(w=h=void 0,g)}function l(){void 0!==m&&clearTimeout(m),_=x=0,w=h=m=void 0}function p(){return void 0===m?g:s(j())}function v(){var t=j(),n=c(t);if(w=arguments,h=this,_=t,n){if(void 0===m)return r(_);if(W)return clearTimeout(m),m=setTimeout(d,e),i(_)}return void 0===m&&(m=setTimeout(d,e)),g}var w,h,y,g,m,_=0,x=0,T=!1,W=!1,E=!0;if("function"!=typeof t)throw new TypeError(f);return e=a(e)||0,o(n)&&(T=!!n.leading,W="maxWait"in n,y=W?b(a(n.maxWait)||0,e):y,E="trailing"in n?!!n.trailing:E),v.cancel=l,v.flush=p,v}function i(t){var e=o(t)?m.call(t):"";return e==d||e==s}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)==l}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)?y(t.slice(2),n?2:8):v.test(t)?c:+t}var f="Expected a function",c=NaN,d="[object Function]",s="[object GeneratorFunction]",l="[object Symbol]",p=/^\s+|\s+$/g,v=/^[-+]0x[0-9a-f]+$/i,w=/^0b[01]+$/i,h=/^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 o=n(3),r=i(o),u=function(t,e){return e+"("+(0,r.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)}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),v=i(p),h=n(3),w=i(h),y=function(){var t=arguments.length<=0||void 0===arguments[0]?{}:arguments[0],e=t.transform,n=void 0===e?function(t){return{inViewport:t}}: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,m=void 0===y?function(t){return t.getBoundingClientRect().width}:y,g=t.getTop,b=void 0===g?function(t){return t.getBoundingClientRect().top}:g,O=t.getLeft,j=void 0===O?function(t){return t.getBoundingClientRect().left}:O,_=t.getViewportHeight,x=void 0===_?function(t,e){return t.innerHeight||e.clientHeight}:_,T=t.getViewportWidth,V=void 0===T?function(t,e){return t.innerWidth||e.clientWidth}:T,W=t.defaultAnswer,E=void 0===W?!0:W,L=t.wait,M=void 0===L?200:L,S=t.onViewportEnter,C=void 0===S?function(){}:S,R=t.onViewportLeave,H=void 0===R?function(){}:R;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,f=Array(a),c=0;a>c;c++)f[c]=arguments[c];return e=n=r(this,(t=Object.getPrototypeOf(i)).call.apply(t,[this].concat(f))),n.state={containerWidth:null,containerHeight:null,containerTopOffset:null,containerLeftOffset:null,windowWidth:null,windowHeight:null,updated:null},n.updateResize=function(){var t=function(){var t=n.refs.withinViewportContainer;n.setState({containerWidth:m(t),containerHeight:h(t),windowWidth:V(window,document),windowHeight:x(window,document),updated:!0})};window.requestAnimationFrame?window.requestAnimationFrame(function(){return t()}):t()},n.updateScroll=function(){var t=function(){var t=n.refs.withinViewportContainer;n.setState({containerTopOffset:b(t),containerLeftOffset:j(t),updated:!0})};window.requestAnimationFrame?window.requestAnimationFrame(function(){return t()}):t()},n.inViewport=function(){var t=arguments.length<=0||void 0===arguments[0]?n.state:arguments[0];return t.updated?(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):E},u=e,r(n,u)}return u(i,e),f(i,[{key:"componentDidMount",value:function(){window&&window.addEventListener&&(this.debouncedUpdateResize=(0,w.default)(this.updateResize,M),this.debouncedUpdateScroll=(0,w.default)(this.updateScroll,M),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.updated&&i===!1&&H(),null===e.updated&&i===!0&&C(),n===!0&&i===!1&&H(),n===!1&&i===!0&&C()}},{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,v.default)(this.props,t)||!(0,v.default)(this.inViewport(this.state),this.inViewport(e))}},{key:"render",value:function(){return d.default.createElement("div",{ref:"withinViewportContainer",style:l},d.default.createElement(t,a({},n(this.inViewport()),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),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=h,i=w;return h=w=void 0,x=e,m=t.apply(i,n)}function r(t){return x=t,g=setTimeout(d,e),T?i(t):m}function u(t){var n=t-_,i=t-x,o=e-n;return V?O(o,y-i):o}function c(t){var n=t-_,i=t-x;return!_||n>=e||0>n||V&&i>=y}function d(){var t=j();return c(t)?l(t):void(g=setTimeout(d,u(t)))}function l(t){return clearTimeout(g),g=void 0,W&&h?i(t):(h=w=void 0,m)}function s(){void 0!==g&&clearTimeout(g),_=x=0,h=w=g=void 0}function p(){return void 0===g?m:l(j())}function v(){var t=j(),n=c(t);if(h=arguments,w=this,_=t,n){if(void 0===g)return r(_);if(V)return clearTimeout(g),g=setTimeout(d,e),i(_)}return void 0===g&&(g=setTimeout(d,e)),m}var h,w,y,m,g,_=0,x=0,T=!1,V=!1,W=!0;if("function"!=typeof t)throw new TypeError(f);return e=a(e)||0,o(n)&&(T=!!n.leading,V="maxWait"in n,y=V?b(a(n.maxWait)||0,e):y,W="trailing"in n?!!n.trailing:W),v.cancel=s,v.flush=p,v}function i(t){var e=o(t)?g.call(t):"";return e==d||e==l}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)&&g.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=h.test(t);return n||w.test(t)?y(t.slice(2),n?2:8):v.test(t)?c:+t}var f="Expected a function",c=NaN,d="[object Function]",l="[object GeneratorFunction]",s="[object Symbol]",p=/^\s+|\s+$/g,v=/^[-+]0x[0-9a-f]+$/i,h=/^0b[01]+$/i,w=/^0o[0-7]+$/i,y=parseInt,m=Object.prototype,g=m.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

@@ -19,2 +19,6 @@ 'use strict';
 
+var _shallowEqual = require('recompose/shallowEqual');
+
+var _shallowEqual2 = _interopRequireDefault(_shallowEqual);
+
 var _lodash = require('lodash.debounce');
@@ -74,2 +78,6 @@
   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 function (BaseComponent) {
@@ -99,4 +107,4 @@ var _class, _temp2;
           windowHeight: null,
-          updated: false
-        }, _this.updateState = function () {
+          updated: null
+        }, _this.updateResize = function () {
           var update = function update() {
@@ -108,4 +116,2 @@ var elem = _this.refs.withinViewportContainer;
               containerHeight: getHeight(elem),
-              containerTopOffset: getTop(elem),
-              containerLeftOffset: getLeft(elem),
               windowWidth: getViewportWidth(window, document),
@@ -124,5 +130,25 @@ windowHeight: getViewportHeight(window, document),
           }
+        }, _this.updateScroll = function () {
+          var update = function update() {
+            var elem = _this.refs.withinViewportContainer;
+
+            _this.setState({
+              containerTopOffset: getTop(elem),
+              containerLeftOffset: getLeft(elem),
+              updated: true
+            });
+          };
+
+          if (window.requestAnimationFrame) {
+            window.requestAnimationFrame(function () {
+              return update();
+            });
+          } else {
+            update();
+          }
         }, _this.inViewport = function () {
-          if (_this.state.updated) {
-            return (_this.state.containerTopOffset < 0 && _this.state.containerHeight + _this.state.containerTopOffset > 0 || _this.state.containerTopOffset >= 0 && _this.state.containerTopOffset < _this.state.windowHeight) && (_this.state.containerLeftOffset < 0 && _this.state.containerWidth + _this.state.containerLeftOffset > 0 || _this.state.containerLeftOffset >= 0 && _this.state.containerLeftOffset < _this.state.windowWidth);
+          var state = arguments.length <= 0 || arguments[0] === undefined ? _this.state : arguments[0];
+
+          if (state.updated) {
+            return (state.containerTopOffset < 0 && state.containerHeight + state.containerTopOffset > 0 || state.containerTopOffset >= 0 && state.containerTopOffset < state.windowHeight) && (state.containerLeftOffset < 0 && state.containerWidth + state.containerLeftOffset > 0 || state.containerLeftOffset >= 0 && state.containerLeftOffset < state.windowWidth);
           }
@@ -137,17 +163,43 @@ return defaultAnswer;
           if (window && window.addEventListener) {
-            this.debouncedUpdate = (0, _lodash2.default)(this.updateState, wait);
-            window.addEventListener('resize', this.debouncedUpdate);
-            window.addEventListener('scroll', this.debouncedUpdate);
-            this.updateState();
+            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);
+            this.updateResize();
+            this.updateScroll();
           }
         }
       }, {
+        key: 'componentDidUpdate',
+        value: function componentDidUpdate(prevProps, prevState) {
+          var was = this.inViewport(prevState);
+          var is = this.inViewport(this.state);
+
+          if (prevState.updated === null && is === false) {
+            onViewportLeave();
+          }
+          if (prevState.updated === null && is === true) {
+            onViewportEnter();
+          }
+          if (was === true && is === false) {
+            onViewportLeave();
+          }
+          if (was === false && is === true) {
+            onViewportEnter();
+          }
+        }
+      }, {
         key: 'componentWillUnmount',
         value: function componentWillUnmount() {
           if (window && window.removeEventListener) {
-            window.removeEventListener('resize', this.debouncedUpdate);
-            window.removeEventListener('scroll', this.debouncedUpdate);
+            window.removeEventListener('resize', this.debouncedUpdateResize);
+            window.removeEventListener('scroll', this.debouncedUpdateScroll);
           }
         }
       }, {
+        key: 'shouldComponentUpdate',
+        value: function shouldComponentUpdate(nextProps, nextState) {
+          return !(0, _shallowEqual2.default)(this.props, nextProps) || !(0, _shallowEqual2.default)(this.inViewport(this.state), this.inViewport(nextState));
+        }
+      }, {
         key: 'render',
@@ -154,0 +206,0 @@ value: function render() {

package.json

 {
   "name": "react-within-viewport",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Debounced React high order component to flag when it's container is inside the viewport.",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

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

32221

increased by11.13%

Lines of code

479

increased by10.62%

No dependency changes