New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
react-lazy-load-image-component
Advanced tools
react-lazy-load-image-component - npm Package Compare versions
Comparing version 1.4.3 to 1.5.0-beta.0
@@ -100,4 +100,4 @@ module.exports = (function(e) { | ||
| i = r(1), | ||
| s = u(r(4)), | ||
| a = u(r(12)), | ||
| a = u(r(4)), | ||
| s = u(r(12)), | ||
| l = u(r(2)); | ||
@@ -131,6 +131,6 @@ function u(e) { | ||
| i = e.scrollPosition, | ||
| s = e.visibleByDefault; | ||
| a = e.visibleByDefault; | ||
| return ( | ||
| (r.state = { visible: s }), | ||
| s && (o(), n()), | ||
| (r.state = { visible: a }), | ||
| a && (o(), n()), | ||
| (r.onVisible = r.onVisible.bind(r)), | ||
@@ -199,3 +199,3 @@ (r.isScrollTracked = Boolean( | ||
| (d && (0, l.default)()) | ||
| ? o.default.createElement(s.default, { | ||
| ? o.default.createElement(a.default, { | ||
| className: t, | ||
@@ -211,3 +211,3 @@ height: i, | ||
| }) | ||
| : o.default.createElement(a.default, { | ||
| : o.default.createElement(s.default, { | ||
| className: t, | ||
@@ -276,4 +276,4 @@ delayMethod: r, | ||
| i = u(r(0)), | ||
| s = u(r(5)), | ||
| a = r(1), | ||
| a = u(r(5)), | ||
| s = r(1), | ||
| l = u(r(2)); | ||
@@ -283,11 +283,25 @@ function u(e) { | ||
| } | ||
| var c = (function(e) { | ||
| function t(e) { | ||
| !(function(e, t) { | ||
| if (!(e instanceof t)) | ||
| throw new TypeError( | ||
| 'Cannot call a class as a function' | ||
| ); | ||
| })(this, t); | ||
| var r = (function(e, t) { | ||
| var c = function(e) { | ||
| e.forEach(function(e) { | ||
| e.isIntersecting && e.target.onVisible(); | ||
| }); | ||
| }, | ||
| f = {}, | ||
| p = function(e) { | ||
| return ( | ||
| (f[e] = | ||
| f[e] || | ||
| new IntersectionObserver(c, { rootMargin: e + 'px' })), | ||
| f[e] | ||
| ); | ||
| }, | ||
| d = (function(e) { | ||
| function t(e) { | ||
| !(function(e, t) { | ||
| if (!(e instanceof t)) | ||
| throw new TypeError( | ||
| 'Cannot call a class as a function' | ||
| ); | ||
| })(this, t); | ||
| var r = (function(e, t) { | ||
| if (!e) | ||
@@ -304,198 +318,185 @@ throw new ReferenceError( | ||
| (t.__proto__ || Object.getPrototypeOf(t)).call(this, e) | ||
| ), | ||
| n = | ||
| !e.scrollPosition && | ||
| e.useIntersectionObserver && | ||
| (0, l.default)(); | ||
| if (((r.LAZY_LOAD_OBSERVER = { supportsObserver: n }), n)) { | ||
| var o = e.threshold; | ||
| r.LAZY_LOAD_OBSERVER.observer = new IntersectionObserver( | ||
| r.checkIntersections, | ||
| { rootMargin: o + 'px' } | ||
| ); | ||
| if ( | ||
| ((r.supportsObserver = | ||
| !e.scrollPosition && | ||
| e.useIntersectionObserver && | ||
| (0, l.default)()), | ||
| r.supportsObserver) | ||
| ) { | ||
| var n = e.threshold; | ||
| r.observer = p(n); | ||
| } | ||
| return r; | ||
| } | ||
| return r; | ||
| } | ||
| return ( | ||
| (function(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, | ||
| return ( | ||
| (function(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)); | ||
| })(t, e), | ||
| o(t, [ | ||
| { | ||
| key: 'componentDidMount', | ||
| value: function() { | ||
| this.placeholder && | ||
| this.observer && | ||
| ((this.placeholder.onVisible = this.props.onVisible), | ||
| this.observer.observe(this.placeholder)), | ||
| this.supportsObserver || | ||
| this.updateVisibility(); | ||
| }, | ||
| }, | ||
| })), | ||
| t && | ||
| (Object.setPrototypeOf | ||
| ? Object.setPrototypeOf(e, t) | ||
| : (e.__proto__ = t)); | ||
| })(t, e), | ||
| o(t, [ | ||
| { | ||
| key: 'checkIntersections', | ||
| value: function(e) { | ||
| e.forEach(function(e) { | ||
| e.isIntersecting && e.target.onVisible(); | ||
| }); | ||
| { | ||
| key: 'componentWillUnmount', | ||
| value: function() { | ||
| this.observer && | ||
| this.observer.unobserve(this.placeholder); | ||
| }, | ||
| }, | ||
| }, | ||
| { | ||
| key: 'componentDidMount', | ||
| value: function() { | ||
| this.placeholder && | ||
| this.LAZY_LOAD_OBSERVER && | ||
| this.LAZY_LOAD_OBSERVER.observer && | ||
| ((this.placeholder.onVisible = this.props.onVisible), | ||
| this.LAZY_LOAD_OBSERVER.observer.observe( | ||
| this.placeholder | ||
| )), | ||
| this.LAZY_LOAD_OBSERVER && | ||
| !this.LAZY_LOAD_OBSERVER.supportsObserver && | ||
| { | ||
| key: 'componentDidUpdate', | ||
| value: function() { | ||
| this.supportsObserver || | ||
| this.updateVisibility(); | ||
| }, | ||
| }, | ||
| }, | ||
| { | ||
| key: 'componentWillUnmount', | ||
| value: function() { | ||
| this.LAZY_LOAD_OBSERVER && | ||
| this.LAZY_LOAD_OBSERVER.observer && | ||
| this.LAZY_LOAD_OBSERVER.observer.unobserve( | ||
| this.placeholder | ||
| ); | ||
| }, | ||
| }, | ||
| { | ||
| key: 'componentDidUpdate', | ||
| value: function() { | ||
| this.LAZY_LOAD_OBSERVER && | ||
| !this.LAZY_LOAD_OBSERVER.supportsObserver && | ||
| this.updateVisibility(); | ||
| }, | ||
| }, | ||
| { | ||
| key: 'getPlaceholderBoundingBox', | ||
| value: function() { | ||
| var e = | ||
| arguments.length > 0 && | ||
| void 0 !== arguments[0] | ||
| ? arguments[0] | ||
| : this.props.scrollPosition, | ||
| t = this.placeholder.getBoundingClientRect(), | ||
| r = s.default.findDOMNode(this.placeholder) | ||
| .style, | ||
| n = { | ||
| left: | ||
| parseInt( | ||
| r.getPropertyValue('margin-left'), | ||
| 10 | ||
| ) || 0, | ||
| top: | ||
| parseInt( | ||
| r.getPropertyValue('margin-top'), | ||
| 10 | ||
| ) || 0, | ||
| { | ||
| key: 'getPlaceholderBoundingBox', | ||
| value: function() { | ||
| var e = | ||
| arguments.length > 0 && | ||
| void 0 !== arguments[0] | ||
| ? arguments[0] | ||
| : this.props.scrollPosition, | ||
| t = this.placeholder.getBoundingClientRect(), | ||
| r = a.default.findDOMNode(this.placeholder) | ||
| .style, | ||
| n = { | ||
| left: | ||
| parseInt( | ||
| r.getPropertyValue( | ||
| 'margin-left' | ||
| ), | ||
| 10 | ||
| ) || 0, | ||
| top: | ||
| parseInt( | ||
| r.getPropertyValue( | ||
| 'margin-top' | ||
| ), | ||
| 10 | ||
| ) || 0, | ||
| }; | ||
| return { | ||
| bottom: e.y + t.bottom + n.top, | ||
| left: e.x + t.left + n.left, | ||
| right: e.x + t.right + n.left, | ||
| top: e.y + t.top + n.top, | ||
| }; | ||
| return { | ||
| bottom: e.y + t.bottom + n.top, | ||
| left: e.x + t.left + n.left, | ||
| right: e.x + t.right + n.left, | ||
| top: e.y + t.top + n.top, | ||
| }; | ||
| }, | ||
| }, | ||
| }, | ||
| { | ||
| key: 'isPlaceholderInViewport', | ||
| value: function() { | ||
| if ( | ||
| 'undefined' == typeof window || | ||
| !this.placeholder | ||
| ) | ||
| return !1; | ||
| var e = this.props, | ||
| t = e.scrollPosition, | ||
| r = e.threshold, | ||
| n = this.getPlaceholderBoundingBox(t), | ||
| o = t.y + window.innerHeight, | ||
| i = t.x, | ||
| s = t.x + window.innerWidth, | ||
| a = t.y; | ||
| return Boolean( | ||
| a - r <= n.bottom && | ||
| o + r >= n.top && | ||
| i - r <= n.right && | ||
| s + r >= n.left | ||
| ); | ||
| { | ||
| key: 'isPlaceholderInViewport', | ||
| value: function() { | ||
| if ( | ||
| 'undefined' == typeof window || | ||
| !this.placeholder | ||
| ) | ||
| return !1; | ||
| var e = this.props, | ||
| t = e.scrollPosition, | ||
| r = e.threshold, | ||
| n = this.getPlaceholderBoundingBox(t), | ||
| o = t.y + window.innerHeight, | ||
| i = t.x, | ||
| a = t.x + window.innerWidth, | ||
| s = t.y; | ||
| return Boolean( | ||
| s - r <= n.bottom && | ||
| o + r >= n.top && | ||
| i - r <= n.right && | ||
| a + r >= n.left | ||
| ); | ||
| }, | ||
| }, | ||
| }, | ||
| { | ||
| key: 'updateVisibility', | ||
| value: function() { | ||
| this.isPlaceholderInViewport() && | ||
| this.props.onVisible(); | ||
| { | ||
| key: 'updateVisibility', | ||
| value: function() { | ||
| this.isPlaceholderInViewport() && | ||
| this.props.onVisible(); | ||
| }, | ||
| }, | ||
| }, | ||
| { | ||
| key: 'render', | ||
| value: function() { | ||
| var e = this, | ||
| t = this.props, | ||
| r = t.className, | ||
| o = t.height, | ||
| s = t.placeholder, | ||
| a = t.style, | ||
| l = t.width; | ||
| if (s && 'function' != typeof s.type) | ||
| return i.default.cloneElement(s, { | ||
| ref: function(t) { | ||
| return (e.placeholder = t); | ||
| }, | ||
| }); | ||
| var u = n({ display: 'inline-block' }, a); | ||
| return ( | ||
| void 0 !== l && (u.width = l), | ||
| void 0 !== o && (u.height = o), | ||
| i.default.createElement( | ||
| 'span', | ||
| { | ||
| className: r, | ||
| { | ||
| key: 'render', | ||
| value: function() { | ||
| var e = this, | ||
| t = this.props, | ||
| r = t.className, | ||
| o = t.height, | ||
| a = t.placeholder, | ||
| s = t.style, | ||
| l = t.width; | ||
| if (a && 'function' != typeof a.type) | ||
| return i.default.cloneElement(a, { | ||
| ref: function(t) { | ||
| return (e.placeholder = t); | ||
| }, | ||
| style: u, | ||
| }, | ||
| s | ||
| ) | ||
| ); | ||
| }); | ||
| var u = n({ display: 'inline-block' }, s); | ||
| return ( | ||
| void 0 !== l && (u.width = l), | ||
| void 0 !== o && (u.height = o), | ||
| i.default.createElement( | ||
| 'span', | ||
| { | ||
| className: r, | ||
| ref: function(t) { | ||
| return (e.placeholder = t); | ||
| }, | ||
| style: u, | ||
| }, | ||
| a | ||
| ) | ||
| ); | ||
| }, | ||
| }, | ||
| }, | ||
| ]), | ||
| t | ||
| ); | ||
| })(i.default.Component); | ||
| (c.propTypes = { | ||
| onVisible: a.PropTypes.func.isRequired, | ||
| className: a.PropTypes.string, | ||
| height: a.PropTypes.oneOfType([ | ||
| a.PropTypes.number, | ||
| a.PropTypes.string, | ||
| ]), | ||
| t | ||
| ); | ||
| })(i.default.Component); | ||
| (d.propTypes = { | ||
| onVisible: s.PropTypes.func.isRequired, | ||
| className: s.PropTypes.string, | ||
| height: s.PropTypes.oneOfType([ | ||
| s.PropTypes.number, | ||
| s.PropTypes.string, | ||
| ]), | ||
| placeholder: a.PropTypes.element, | ||
| threshold: a.PropTypes.number, | ||
| useIntersectionObserver: a.PropTypes.bool, | ||
| scrollPosition: a.PropTypes.shape({ | ||
| x: a.PropTypes.number.isRequired, | ||
| y: a.PropTypes.number.isRequired, | ||
| placeholder: s.PropTypes.element, | ||
| threshold: s.PropTypes.number, | ||
| useIntersectionObserver: s.PropTypes.bool, | ||
| scrollPosition: s.PropTypes.shape({ | ||
| x: s.PropTypes.number.isRequired, | ||
| y: s.PropTypes.number.isRequired, | ||
| }), | ||
| width: a.PropTypes.oneOfType([ | ||
| a.PropTypes.number, | ||
| a.PropTypes.string, | ||
| width: s.PropTypes.oneOfType([ | ||
| s.PropTypes.number, | ||
| s.PropTypes.string, | ||
| ]), | ||
| }), | ||
| (c.defaultProps = { | ||
| (d.defaultProps = { | ||
| className: '', | ||
@@ -506,3 +507,3 @@ placeholder: null, | ||
| }), | ||
| (t.default = c); | ||
| (t.default = d); | ||
| }, | ||
@@ -541,4 +542,4 @@ function(e, t) { | ||
| i = p(r(0)), | ||
| s = p(r(5)), | ||
| a = r(1), | ||
| a = p(r(5)), | ||
| s = r(1), | ||
| l = p(r(13)), | ||
@@ -642,3 +643,3 @@ u = p(r(14)), | ||
| ((0, f.default)( | ||
| s.default.findDOMNode( | ||
| a.default.findDOMNode( | ||
| this.baseComponentRef.current | ||
@@ -657,3 +658,3 @@ ) | ||
| ((this.scrollElement = (0, f.default)( | ||
| s.default.findDOMNode( | ||
| a.default.findDOMNode( | ||
| this.baseComponentRef.current | ||
@@ -748,5 +749,5 @@ ) | ||
| (t.propTypes = { | ||
| delayMethod: a.PropTypes.oneOf(['debounce', 'throttle']), | ||
| delayTime: a.PropTypes.number, | ||
| useIntersectionObserver: a.PropTypes.bool, | ||
| delayMethod: s.PropTypes.oneOf(['debounce', 'throttle']), | ||
| delayTime: s.PropTypes.number, | ||
| useIntersectionObserver: s.PropTypes.bool, | ||
| }), | ||
@@ -778,6 +779,6 @@ (t.defaultProps = { | ||
| (t.trackWindowScroll = t.LazyLoadComponent = t.LazyLoadImage = void 0); | ||
| var n = s(r(9)), | ||
| o = s(r(3)), | ||
| i = s(r(6)); | ||
| function s(e) { | ||
| var n = a(r(9)), | ||
| o = a(r(3)), | ||
| i = a(r(6)); | ||
| function a(e) { | ||
| return e && e.__esModule ? e : { default: e }; | ||
@@ -818,4 +819,4 @@ } | ||
| i = l(r(0)), | ||
| s = r(1), | ||
| a = l(r(3)); | ||
| a = r(1), | ||
| s = l(r(3)); | ||
| function l(e) { | ||
@@ -897,2 +898,3 @@ return e && e.__esModule ? e : { default: e }; | ||
| e.wrapperClassName, | ||
| e.wrapperProps, | ||
| (function(e, t) { | ||
@@ -921,2 +923,3 @@ var r = {}; | ||
| 'wrapperClassName', | ||
| 'wrapperProps', | ||
| ])); | ||
@@ -937,3 +940,3 @@ return i.default.createElement( | ||
| o = e.delayTime, | ||
| s = e.height, | ||
| a = e.height, | ||
| l = e.placeholder, | ||
@@ -947,3 +950,3 @@ u = e.scrollPosition, | ||
| return i.default.createElement( | ||
| a.default, | ||
| s.default, | ||
| { | ||
@@ -954,3 +957,3 @@ beforeLoad: t, | ||
| delayTime: o, | ||
| height: s, | ||
| height: a, | ||
| placeholder: l, | ||
@@ -973,27 +976,31 @@ scrollPosition: u, | ||
| r = t.effect, | ||
| n = t.height, | ||
| o = t.placeholderSrc, | ||
| o = t.height, | ||
| a = t.placeholderSrc, | ||
| s = t.width, | ||
| a = t.wrapperClassName, | ||
| l = this.state.loaded, | ||
| u = l ? ' lazy-load-image-loaded' : ''; | ||
| l = t.wrapperClassName, | ||
| u = t.wrapperProps, | ||
| c = this.state.loaded, | ||
| f = c ? ' lazy-load-image-loaded' : ''; | ||
| return i.default.createElement( | ||
| 'span', | ||
| { | ||
| className: | ||
| a + | ||
| ' lazy-load-image-background ' + | ||
| r + | ||
| u, | ||
| style: { | ||
| backgroundImage: | ||
| l || !o ? '' : 'url(' + o + ')', | ||
| backgroundSize: | ||
| l || !o ? '' : '100% 100%', | ||
| color: 'transparent', | ||
| display: 'inline-block', | ||
| height: n, | ||
| width: s, | ||
| n( | ||
| { | ||
| className: | ||
| l + | ||
| ' lazy-load-image-background ' + | ||
| r + | ||
| f, | ||
| style: { | ||
| backgroundImage: | ||
| c || !a ? '' : 'url(' + a + ')', | ||
| backgroundSize: | ||
| c || !a ? '' : '100% 100%', | ||
| color: 'transparent', | ||
| display: 'inline-block', | ||
| height: o, | ||
| width: s, | ||
| }, | ||
| }, | ||
| }, | ||
| u | ||
| ), | ||
| e | ||
@@ -1010,6 +1017,8 @@ ); | ||
| n = e.visibleByDefault, | ||
| o = this.getLazyLoadImage(); | ||
| return (!t && !r) || n | ||
| ? o | ||
| : this.getWrappedLazyLoadImage(o); | ||
| o = e.wrapperClassName, | ||
| i = e.wrapperProps, | ||
| a = this.getLazyLoadImage(); | ||
| return ((t || r) && !n) || o || i | ||
| ? this.getWrappedLazyLoadImage(a) | ||
| : a; | ||
| }, | ||
@@ -1022,12 +1031,13 @@ }, | ||
| (u.propTypes = { | ||
| afterLoad: s.PropTypes.func, | ||
| beforeLoad: s.PropTypes.func, | ||
| delayMethod: s.PropTypes.string, | ||
| delayTime: s.PropTypes.number, | ||
| effect: s.PropTypes.string, | ||
| placeholderSrc: s.PropTypes.string, | ||
| threshold: s.PropTypes.number, | ||
| useIntersectionObserver: s.PropTypes.bool, | ||
| visibleByDefault: s.PropTypes.bool, | ||
| wrapperClassName: s.PropTypes.string, | ||
| afterLoad: a.PropTypes.func, | ||
| beforeLoad: a.PropTypes.func, | ||
| delayMethod: a.PropTypes.string, | ||
| delayTime: a.PropTypes.number, | ||
| effect: a.PropTypes.string, | ||
| placeholderSrc: a.PropTypes.string, | ||
| threshold: a.PropTypes.number, | ||
| useIntersectionObserver: a.PropTypes.bool, | ||
| visibleByDefault: a.PropTypes.bool, | ||
| wrapperClassName: a.PropTypes.string, | ||
| wrapperProps: a.PropTypes.object, | ||
| }), | ||
@@ -1059,8 +1069,8 @@ (u.defaultProps = { | ||
| (e.exports = function() { | ||
| function e(e, t, r, o, i, s) { | ||
| if (s !== n) { | ||
| var a = new Error( | ||
| function e(e, t, r, o, i, a) { | ||
| if (a !== n) { | ||
| var s = new Error( | ||
| 'Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types' | ||
| ); | ||
| throw ((a.name = 'Invariant Violation'), a); | ||
| throw ((s.name = 'Invariant Violation'), s); | ||
| } | ||
@@ -1118,6 +1128,6 @@ } | ||
| })(), | ||
| o = a(r(0)), | ||
| i = a(r(4)), | ||
| s = a(r(6)); | ||
| function a(e) { | ||
| o = s(r(0)), | ||
| i = s(r(4)), | ||
| a = s(r(6)); | ||
| function s(e) { | ||
| return e && e.__esModule ? e : { default: e }; | ||
@@ -1183,3 +1193,3 @@ } | ||
| })(o.default.Component); | ||
| t.default = (0, s.default)(l); | ||
| t.default = (0, a.default)(l); | ||
| }, | ||
@@ -1192,4 +1202,4 @@ function(e, t, r) { | ||
| i = /^\s+|\s+$/g, | ||
| s = /^[-+]0x[0-9a-f]+$/i, | ||
| a = /^0b[01]+$/i, | ||
| a = /^[-+]0x[0-9a-f]+$/i, | ||
| s = /^0b[01]+$/i, | ||
| l = /^0o[0-7]+$/i, | ||
@@ -1234,6 +1244,6 @@ u = parseInt, | ||
| e = e.replace(i, ''); | ||
| var r = a.test(e); | ||
| var r = s.test(e); | ||
| return r || l.test(e) | ||
| ? u(e.slice(2), r ? 2 : 8) | ||
| : s.test(e) | ||
| : a.test(e) | ||
| ? n | ||
@@ -1245,4 +1255,4 @@ : +e; | ||
| i, | ||
| a, | ||
| s, | ||
| a, | ||
| l, | ||
@@ -1255,14 +1265,14 @@ u, | ||
| if ('function' != typeof e) throw new TypeError(r); | ||
| function O(t) { | ||
| function w(t) { | ||
| var r = o, | ||
| n = i; | ||
| return (o = i = void 0), (c = t), (a = e.apply(n, r)); | ||
| return (o = i = void 0), (c = t), (s = e.apply(n, r)); | ||
| } | ||
| function w(e) { | ||
| function O(e) { | ||
| var r = e - u; | ||
| return void 0 === u || r >= t || r < 0 || (p && e - c >= s); | ||
| return void 0 === u || r >= t || r < 0 || (p && e - c >= a); | ||
| } | ||
| function g() { | ||
| var e = b(); | ||
| if (w(e)) return _(e); | ||
| if (O(e)) return P(e); | ||
| l = setTimeout( | ||
@@ -1272,12 +1282,12 @@ g, | ||
| var r = t - (e - u); | ||
| return p ? h(r, s - (e - c)) : r; | ||
| return p ? h(r, a - (e - c)) : r; | ||
| })(e) | ||
| ); | ||
| } | ||
| function _(e) { | ||
| return (l = void 0), d && o ? O(e) : ((o = i = void 0), a); | ||
| function P(e) { | ||
| return (l = void 0), d && o ? w(e) : ((o = i = void 0), s); | ||
| } | ||
| function P() { | ||
| function T() { | ||
| var e = b(), | ||
| r = w(e); | ||
| r = O(e); | ||
| if (((o = arguments), (i = this), (u = e), r)) { | ||
@@ -1289,8 +1299,8 @@ if (void 0 === l) | ||
| (l = setTimeout(g, t)), | ||
| f ? O(e) : a | ||
| f ? w(e) : s | ||
| ); | ||
| })(u); | ||
| if (p) return (l = setTimeout(g, t)), O(u); | ||
| if (p) return (l = setTimeout(g, t)), w(u); | ||
| } | ||
| return void 0 === l && (l = setTimeout(g, t)), a; | ||
| return void 0 === l && (l = setTimeout(g, t)), s; | ||
| } | ||
@@ -1301,7 +1311,7 @@ return ( | ||
| ((f = !!n.leading), | ||
| (s = (p = 'maxWait' in n) | ||
| (a = (p = 'maxWait' in n) | ||
| ? y(m(n.maxWait) || 0, t) | ||
| : s), | ||
| : a), | ||
| (d = 'trailing' in n ? !!n.trailing : d)), | ||
| (P.cancel = function() { | ||
| (T.cancel = function() { | ||
| void 0 !== l && clearTimeout(l), | ||
@@ -1311,6 +1321,6 @@ (c = 0), | ||
| }), | ||
| (P.flush = function() { | ||
| return void 0 === l ? a : _(b()); | ||
| (T.flush = function() { | ||
| return void 0 === l ? s : P(b()); | ||
| }), | ||
| P | ||
| T | ||
| ); | ||
@@ -1326,4 +1336,4 @@ }; | ||
| i = /^\s+|\s+$/g, | ||
| s = /^[-+]0x[0-9a-f]+$/i, | ||
| a = /^0b[01]+$/i, | ||
| a = /^[-+]0x[0-9a-f]+$/i, | ||
| s = /^0b[01]+$/i, | ||
| l = /^0o[0-7]+$/i, | ||
@@ -1347,4 +1357,4 @@ u = parseInt, | ||
| i, | ||
| a, | ||
| s, | ||
| a, | ||
| l, | ||
@@ -1360,11 +1370,11 @@ u, | ||
| n = i; | ||
| return (o = i = void 0), (c = t), (a = e.apply(n, r)); | ||
| return (o = i = void 0), (c = t), (s = e.apply(n, r)); | ||
| } | ||
| function w(e) { | ||
| function O(e) { | ||
| var r = e - u; | ||
| return void 0 === u || r >= t || r < 0 || (p && e - c >= s); | ||
| return void 0 === u || r >= t || r < 0 || (p && e - c >= a); | ||
| } | ||
| function g() { | ||
| var e = b(); | ||
| if (w(e)) return _(e); | ||
| if (O(e)) return P(e); | ||
| l = setTimeout( | ||
@@ -1374,12 +1384,12 @@ g, | ||
| var r = t - (e - u); | ||
| return p ? h(r, s - (e - c)) : r; | ||
| return p ? h(r, a - (e - c)) : r; | ||
| })(e) | ||
| ); | ||
| } | ||
| function _(e) { | ||
| return (l = void 0), d && o ? v(e) : ((o = i = void 0), a); | ||
| function P(e) { | ||
| return (l = void 0), d && o ? v(e) : ((o = i = void 0), s); | ||
| } | ||
| function P() { | ||
| function T() { | ||
| var e = b(), | ||
| r = w(e); | ||
| r = O(e); | ||
| if (((o = arguments), (i = this), (u = e), r)) { | ||
@@ -1391,3 +1401,3 @@ if (void 0 === l) | ||
| (l = setTimeout(g, t)), | ||
| f ? v(e) : a | ||
| f ? v(e) : s | ||
| ); | ||
@@ -1397,13 +1407,13 @@ })(u); | ||
| } | ||
| return void 0 === l && (l = setTimeout(g, t)), a; | ||
| return void 0 === l && (l = setTimeout(g, t)), s; | ||
| } | ||
| return ( | ||
| (t = O(t) || 0), | ||
| (t = w(t) || 0), | ||
| m(n) && | ||
| ((f = !!n.leading), | ||
| (s = (p = 'maxWait' in n) | ||
| ? y(O(n.maxWait) || 0, t) | ||
| : s), | ||
| (a = (p = 'maxWait' in n) | ||
| ? y(w(n.maxWait) || 0, t) | ||
| : a), | ||
| (d = 'trailing' in n ? !!n.trailing : d)), | ||
| (P.cancel = function() { | ||
| (T.cancel = function() { | ||
| void 0 !== l && clearTimeout(l), | ||
@@ -1413,6 +1423,6 @@ (c = 0), | ||
| }), | ||
| (P.flush = function() { | ||
| return void 0 === l ? a : _(b()); | ||
| (T.flush = function() { | ||
| return void 0 === l ? s : P(b()); | ||
| }), | ||
| P | ||
| T | ||
| ); | ||
@@ -1424,3 +1434,3 @@ } | ||
| } | ||
| function O(e) { | ||
| function w(e) { | ||
| if ('number' == typeof e) return e; | ||
@@ -1445,6 +1455,6 @@ if ( | ||
| e = e.replace(i, ''); | ||
| var r = a.test(e); | ||
| var r = s.test(e); | ||
| return r || l.test(e) | ||
| ? u(e.slice(2), r ? 2 : 8) | ||
| : s.test(e) | ||
| : a.test(e) | ||
| ? n | ||
@@ -1451,0 +1461,0 @@ : +e; |
| { | ||
| "name": "react-lazy-load-image-component", | ||
| "version": "1.4.3", | ||
| "version": "1.5.0-beta.0", | ||
| "description": " React Component to lazy load images using a HOC to track window scroll position. ", | ||
@@ -5,0 +5,0 @@ "main": "build/index.js", |
@@ -80,2 +80,3 @@ <div style="text-align:center;"> | ||
| | wrapperClassName | `String` | | In some occasions (for example, when using a placeholderSrc) a wrapper span tag is rendered. This prop allows setting a class to that element. | | ||
| | wrapperProps | `Object` | null | Props that should be passed to the wrapper span when it is rendered (for example, when using placeholderSrc or effect) | | ||
| | ... | | | Any other image attribute | | ||
@@ -150,3 +151,2 @@ | ||
| ## Using `trackWindowScroll` HOC to improve performance | ||
@@ -198,2 +198,3 @@ | ||
| | visibleByDefault | `Boolean` | false | Whether the image must be visible from the beginning. | | ||
| | wrapperProps | `Object` | null | Props that should be passed to the wrapper span when it is rendered (for example, when using placeholderSrc or effect) | | ||
| | ... | | | Any other image attribute | | ||
@@ -200,0 +201,0 @@ |
@@ -69,2 +69,3 @@ /* eslint max-len: 0 */ | ||
| this.observe = jest.fn(); // eslint-disable-line babel/no-invalid-this | ||
| this.unobserve = jest.fn(); // eslint-disable-line babel/no-invalid-this | ||
| }); | ||
@@ -97,2 +98,3 @@ | ||
| this.observe = jest.fn(); // eslint-disable-line babel/no-invalid-this | ||
| this.unobserve = jest.fn(); // eslint-disable-line babel/no-invalid-this | ||
| }); | ||
@@ -99,0 +101,0 @@ |
@@ -43,2 +43,3 @@ import React from 'react'; | ||
| wrapperClassName, | ||
| wrapperProps, | ||
| ...imgProps | ||
@@ -93,2 +94,3 @@ } = this.props; | ||
| wrapperClassName, | ||
| wrapperProps, | ||
| } = this.props; | ||
@@ -119,2 +121,3 @@ const { loaded } = this.state; | ||
| }} | ||
| {...wrapperProps} | ||
| > | ||
@@ -127,7 +130,14 @@ {lazyLoadImage} | ||
| render() { | ||
| const { effect, placeholderSrc, visibleByDefault } = this.props; | ||
| const { | ||
| effect, | ||
| placeholderSrc, | ||
| visibleByDefault, | ||
| wrapperClassName, | ||
| wrapperProps, | ||
| } = this.props; | ||
| const lazyLoadImage = this.getLazyLoadImage(); | ||
| const needsWrapper = (effect || placeholderSrc) && !visibleByDefault; | ||
| if ((!effect && !placeholderSrc) || visibleByDefault) { | ||
| if (!needsWrapper && !wrapperClassName && !wrapperProps) { | ||
| return lazyLoadImage; | ||
@@ -151,2 +161,3 @@ } | ||
| wrapperClassName: PropTypes.string, | ||
| wrapperProps: PropTypes.object, | ||
| }; | ||
@@ -153,0 +164,0 @@ |
@@ -6,2 +6,22 @@ import React from 'react'; | ||
| const checkIntersections = entries => { | ||
| entries.forEach(entry => { | ||
| if (entry.isIntersecting) { | ||
| entry.target.onVisible(); | ||
| } | ||
| }); | ||
| }; | ||
| const LAZY_LOAD_OBSERVERS = {}; | ||
| const getObserver = threshold => { | ||
| LAZY_LOAD_OBSERVERS[threshold] = | ||
| LAZY_LOAD_OBSERVERS[threshold] || | ||
| new IntersectionObserver(checkIntersections, { | ||
| rootMargin: threshold + 'px', | ||
| }); | ||
| return LAZY_LOAD_OBSERVERS[threshold]; | ||
| }; | ||
| class PlaceholderWithoutTracking extends React.Component { | ||
@@ -11,3 +31,3 @@ constructor(props) { | ||
| const supportsObserver = | ||
| this.supportsObserver = | ||
| !props.scrollPosition && | ||
@@ -17,36 +37,16 @@ props.useIntersectionObserver && | ||
| this.LAZY_LOAD_OBSERVER = { supportsObserver }; | ||
| if (supportsObserver) { | ||
| if (this.supportsObserver) { | ||
| const { threshold } = props; | ||
| this.LAZY_LOAD_OBSERVER.observer = new IntersectionObserver( | ||
| this.checkIntersections, | ||
| { rootMargin: threshold + 'px' } | ||
| ); | ||
| this.observer = getObserver(threshold); | ||
| } | ||
| } | ||
| checkIntersections(entries) { | ||
| entries.forEach(entry => { | ||
| if (entry.isIntersecting) { | ||
| entry.target.onVisible(); | ||
| } | ||
| }); | ||
| } | ||
| componentDidMount() { | ||
| if ( | ||
| this.placeholder && | ||
| this.LAZY_LOAD_OBSERVER && | ||
| this.LAZY_LOAD_OBSERVER.observer | ||
| ) { | ||
| if (this.placeholder && this.observer) { | ||
| this.placeholder.onVisible = this.props.onVisible; | ||
| this.LAZY_LOAD_OBSERVER.observer.observe(this.placeholder); | ||
| this.observer.observe(this.placeholder); | ||
| } | ||
| if ( | ||
| this.LAZY_LOAD_OBSERVER && | ||
| !this.LAZY_LOAD_OBSERVER.supportsObserver | ||
| ) { | ||
| if (!this.supportsObserver) { | ||
| this.updateVisibility(); | ||
@@ -57,4 +57,4 @@ } | ||
| componentWillUnmount() { | ||
| if (this.LAZY_LOAD_OBSERVER && this.LAZY_LOAD_OBSERVER.observer) { | ||
| this.LAZY_LOAD_OBSERVER.observer.unobserve(this.placeholder); | ||
| if (this.observer) { | ||
| this.observer.unobserve(this.placeholder); | ||
| } | ||
@@ -64,6 +64,3 @@ } | ||
| componentDidUpdate() { | ||
| if ( | ||
| this.LAZY_LOAD_OBSERVER && | ||
| !this.LAZY_LOAD_OBSERVER.supportsObserver | ||
| ) { | ||
| if (!this.supportsObserver) { | ||
| this.updateVisibility(); | ||
@@ -70,0 +67,0 @@ } |
@@ -200,2 +200,3 @@ /* eslint require-jsdoc: 0 */ | ||
| this.observe = jest.fn(); // eslint-disable-line babel/no-invalid-this | ||
| this.unobserve = jest.fn(); // eslint-disable-line babel/no-invalid-this | ||
| }); | ||
@@ -215,2 +216,3 @@ const onVisible = jest.fn(); | ||
| this.observe = jest.fn(); // eslint-disable-line babel/no-invalid-this | ||
| this.unobserve = jest.fn(); // eslint-disable-line babel/no-invalid-this | ||
| }); | ||
@@ -217,0 +219,0 @@ const offset = 100000; |
Sorry, the diff of this file is not supported yet
New alerts
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.94%
88949
- Lines of code
- increased by0.73%
2624
- Number of lines in readme file
- increased by0.39%
258
Worsened metrics
- Number of low quality alerts
- increased by100%
2
No dependency changes