lixibox-react-on-screen/dist/ReactOnScreen.js

A wrapper component to track if your react component is visible on screen

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("prop-types"),require("react"),require("lodash.throttle"),require("shallowequal")):"function"==typeof define&&define.amd?define(["prop-types","react","lodash.throttle","shallowequal"],t):"object"==typeof exports?exports.ReactOnScreen=t(require("prop-types"),require("react"),require("lodash.throttle"),require("shallowequal")):e.ReactOnScreen=t(e["prop-types"],e.react,e["lodash.throttle"],e.shallowequal)}(window,function(e,t,o,r){return function(e){var t={};function o(r){if(t[r])return t[r].exports;var n=t[r]={i:r,l:!1,exports:{}};return e[r].call(n.exports,n,n.exports,o),n.l=!0,n.exports}return o.m=e,o.c=t,o.d=function(e,t,r){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(o.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)o.d(r,n,function(t){return e[t]}.bind(null,n));return r},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s=4)}([function(t,o){t.exports=e},function(e,o){e.exports=t},function(e,t){e.exports=o},function(e,t){e.exports=r},function(e,t,o){"use strict";o.r(t);var r=o(1),n=o.n(r),i=o(0),s=o.n(i),l=o(2),a=o.n(l),u=o(3),p=o.n(u);function c(){return(c=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var r in o)Object.prototype.hasOwnProperty.call(o,r)&&(e[r]=o[r])}return e}).apply(this,arguments)}var f=function(e){function t(o){var r;return(r=e.call(this,o)||this).isVisible=function(e,t,o){var n=e.top,i=e.left,s=e.bottom,l=e.right,a=e.width,u=e.height,p=Math.floor(n),c=Math.floor(i),f=Math.floor(s),d=Math.floor(l),h=Math.floor(a),b=Math.floor(u),y=r.props,v=y.offset,m=y.partialVisibility;if(p+d+f+c===0)return!1;var g=0-v,w=0-v,C=t+v,O=o+v;return m?p+b>=g&&c+h>=w&&f-b<=O&&d-h<=C:p>=g&&c>=w&&f<=O&&d<=C},r.isComponentVisible=function(){setTimeout(function(){if(r.nodeRef&&r.nodeRef.getBoundingClientRect){var e=document.documentElement,t=r.props.once,o=r.nodeRef.getBoundingClientRect(),n=window.innerWidth||e.clientWidth,i=window.innerHeight||e.clientHeight,s=r.isVisible(o,n,i);s&&t&&r.removeListener(),r.setState({isVisible:s})}},0)},r.setNodeRef=function(e){return r.nodeRef=e},r.ownProps=Object.keys(t.propTypes),r.state={isVisible:!1},r.throttleCb=a()(r.isComponentVisible,r.props.throttleInterval),o.nodeRef&&r.setNodeRef(o.nodeRef),r}!function(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}(t,e);var o=t.prototype;return o.componentDidMount=function(){this.attachListener(),this.isComponentVisible()},o.componentDidUpdate=function(e){p()(this.getChildProps(this.props),this.getChildProps(e))||this.isComponentVisible()},o.componentWillUnmount=function(){this.removeListener()},o.attachListener=function(){window.addEventListener("scroll",this.throttleCb),window.addEventListener("resize",this.throttleCb)},o.removeListener=function(){window.removeEventListener("scroll",this.throttleCb),window.removeEventListener("resize",this.throttleCb)},o.getChildProps=function(e){var t=this;void 0===e&&(e=this.props);var o={};return Object.keys(e).forEach(function(r){-1===t.ownProps.indexOf(r)&&(o[r]=e[r])}),o},o.getChildren=function(){var e=this;return"function"==typeof this.props.children?this.props.children(c({},this.getChildProps(),{isVisible:this.state.isVisible})):n.a.Children.map(this.props.children,function(t){return n.a.cloneElement(t,c({},e.getChildProps(),{isVisible:e.state.isVisible}))})},o.render=function(){var e=this.props,t=e.className,o=e.style,r=e.nodeRef,i=e.tag,s=c({},t&&{className:t},o&&{style:o});return n.a.createElement(i,c({ref:!r&&this.setNodeRef},s),this.getChildren())},t}(r.PureComponent);f.propTypes={once:s.a.bool,throttleInterval:function(e,t,o){var r=e[t];return!Number.isInteger(r)||r<0?new Error("The "+t+" prop you provided to "+o+" is not a valid integer >= 0."):null},children:s.a.oneOfType([s.a.func,s.a.element,s.a.arrayOf(s.a.element)]),style:s.a.object,className:s.a.string,offset:s.a.number,partialVisibility:s.a.bool,nodeRef:s.a.object,tag:s.a.string},f.defaultProps={once:!1,throttleInterval:150,offset:0,partialVisibility:!1,tag:"div"};t.default=f}])});
//# sourceMappingURL=ReactOnScreen.js.map