react-lazy-load-image-component 1.5.6 → 1.6.1

package/.github/workflows/run-tests.yml

@@ -0,0 +1,38 @@
+name: Run Tests
+
+on:
+  push:
+    branches:
+      - master
+  pull_request:
+    branches:
+      - master
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run tests
+        run: npm run test
+
+      - name: Check test status
+        run: |
+          if [ $? -ne 0 ]; then
+            echo "Tests failed. Failing the workflow."
+            exit 1
+          else
+            echo "Tests passed."
+          fi
+

package/CONTRIBUTING.md

@@ -0,0 +1,72 @@
+# Contributing to react-lazy-load-image-component
+
+Thank you for considering contributing to react-lazy-load-image-component! We appreciate your support and welcome any contributions you can make to enhance the package.
+
+The following guidelines will help you understand how to contribute effectively:
+
+## Ways to Contribute
+
+There are several ways you can contribute to the project:
+
+1. Report Issues
+2. Suggest Enhancements
+3. Answer Open Issues
+4. Submit Pull Requests
+
+## Reporting Issues
+
+If you encounter any issues or bugs while using react-lazy-load-image-component, please help us improve by reporting them. To report an issue, follow these steps:
+
+1. Check if the issue has already been reported by searching the [GitHub Issues](https://github.com/Aljullu/react-lazy-load-image-component/issues) of the repository.
+2. If the issue hasn't been reported, click on the "New Issue" button.
+3. Provide a clear and descriptive title for the issue.
+4. Describe the steps to reproduce the issue, including any relevant code snippets or error messages.
+5. Explain the expected behavior and the actual behavior you observed.
+6. Add any additional information, such as screenshots or environment details, that may be helpful.
+7. Finally, submit the issue and await further instructions or clarifications.
+
+## Suggesting Enhancements
+
+We welcome suggestions for enhancing react-lazy-load-image-component. If you have an idea for a new feature, or you believe an existing feature can be improved, please follow these steps:
+
+1. Check the [GitHub Issues](https://github.com/Aljullu/react-lazy-load-image-component/issues) of the repository to see if a similar suggestion has already been made.
+2. If your suggestion hasn't been proposed yet, click on the "New Issue" button.
+3. Provide a clear and descriptive title for the enhancement.
+4. Describe the current limitations or problems you're experiencing that your suggested enhancement aims to address.
+5. Clearly explain how your suggested enhancement would improve the package.
+6. Include any relevant code examples, if applicable.
+7. Submit the enhancement suggestion and await further discussion or feedback.
+
+## Answering Open Issues
+
+You can contribute to react-lazy-load-image-component by helping to answer open issues in the GitHub repository. This includes:
+
+- Helping users solve their problems or find workarounds.
+- Replicating reported bugs and providing additional information or insights.
+- Sharing your knowledge and expertise to assist other users.
+
+To contribute in this way, follow these steps:
+
+1. Visit the [GitHub Issues](https://github.com/Aljullu/react-lazy-load-image-component/issues) page of the repository.
+2. Look for open issues that you can provide assistance with.
+3. Read through the issue description and any existing comments to understand the problem or question.
+4. If you can reproduce the issue, follow the steps provided and document your findings in a comment.
+5. Offer suggestions, workarounds, or explanations to help resolve the issue.
+6. Engage in respectful and constructive conversations with the issue reporter and other contributors.
+
+## Submitting Pull Requests
+
+We encourage you to contribute directly to the codebase of react-lazy-load-image-component by submitting pull requests (PRs). Follow these steps to submit a PR:
+
+1. Fork the repository to your GitHub account.
+2. Create a new branch with a descriptive name for your changes.
+3. Implement your changes or new features. When developing, you can use `npm run start` and `npm run build` to build your changes.
+4. Include tests that cover your changes and update the documentation, if applicable.
+5. Make sure the codebase passes all existing tests (run `npm run test`) and lint checks (`npm run lint`).
+6. Commit your changes with a clear and concise commit message.
+7. Push your branch to your forked repository.
+8. Open a PR against the `master` branch of the original repository.
+9. Provide a detailed description of your changes in the PR, including the problem or feature addressed.
+10. Engage in any further discussion or feedback requested on the PR.
+
+Once your PR is reviewed and approved, it will be merged into the main codebase, and your contributions will become part of react-lazy-load-image-component!

package/README.md

@@ -7,10 +7,9 @@ React Lazy Load Image Component
 
 React Component to lazy load images and other components/elements. Supports IntersectionObserver and includes a HOC to track window scroll position to improve performance.
 
-"[_An easy-to-use performant solution to lazy load images in React_](https://blog.albertjuhe.com/2018/03/22/an-easy-to-use-performant-solution-to-lazy-load-images-in-react/)"
+"[_An easy-to-use performant solution to lazy load images in React_](https://medium.com/@albertjuhe/an-easy-to-use-performant-solution-to-lazy-load-images-in-react-e6752071020c)"
 
 [![Build Status](https://travis-ci.org/Aljullu/react-lazy-load-image-component.svg?branch=master)](https://travis-ci.org/Aljullu/react-lazy-load-image-component)
-[![Dependency Status](https://img.shields.io/david/Aljullu/react-lazy-load-image-component.svg)](http://david-dm.org/Aljullu/react-lazy-load-image-component)
 [![Download counter](https://img.shields.io/npm/dt/react-lazy-load-image-component.svg)](https://www.npmjs.com/package/react-lazy-load-image-component)
 [![License](https://img.shields.io/npm/l/react-lazy-load-image-component.svg)](https://www.npmjs.com/package/react-lazy-load-image-component)
 
@@ -24,7 +23,7 @@ React Component to lazy load images and other components/elements. Supports Inte
 * A custom placeholder component or image can be specified.
 * Built-in on-visible effects (blur, black and white and opacity transitions).
 * threshold is set to 100px by default and can be modified.
-* `beforeLoad` and `afterLoad` events.
+* `beforeLoad` and `onLoad` events.
 * `debounce` and `throttle` included by default and configurable.
 * Uses IntersectionObserver for browsers that support it.
 * Server Side Rendering (SSR) compatible.
@@ -66,7 +65,8 @@ export default MyImage;
 
 | Prop | Type | Default | Description |
 |:---|:---|:---|:---|
-| afterLoad | `Function` |  | Function called after the image has been completely loaded. |
+| onLoad | `Function` |  | Function called when the image has been loaded. This is the same function as the `onLoad` of an `<img>` which contains an event object. |
+| afterLoad | `Function` |  | Deprecated, use `onLoad` instead. This prop is only for backward compatibility. |
 | beforeLoad | `Function` |  | Function called right before the placeholder is replaced with the image element. |
 | delayMethod | `String` | `throttle` | Method from lodash to use to delay the scroll/resize events. It can be `throttle` or `debounce`. |
 | delayTime | `Number` | 300 | Time in ms sent to the delayMethod. |
@@ -96,6 +96,10 @@ const MyImage = ({ image }) => (
   <LazyLoadImage
     alt={image.alt}
     effect="blur"
+    wrapperProps={{
+        // If you need to, you can tweak the effect transition using the wrapper style.
+        style: {transitionDelay: "1s"},
+    }}
     src={image.src} />
 );
 ```
@@ -114,6 +118,7 @@ The current available effects are:
 
 ![Screenshot of the opacity effect](https://user-images.githubusercontent.com/3616980/37790755-b48a704a-2e07-11e8-91c3-fcd43a91e7b1.gif)
 
+All the effects have a transition duration of 0.3 seconds by default, without transition delay and the default transition timing function. All those values can be modified overriding the wrapper style as shown in the code example above.
 
 ## `LazyLoadComponent` usage
 
@@ -188,7 +193,8 @@ You must set the prop `scrollPosition` to the lazy load components. This way, th
 | Prop | Type | Default | Description |
 |:---|:---|:---|:---|
 | scrollPosition | `Object` |  | Object containing `x` and `y` with the curent window scroll position. Required. |
-| afterLoad | `Function` |  | Function called after the image has been rendered. |
+| onLoad | `Function` |  | Function called when the image has been loaded. This is the same function as the `onLoad` of an `<img>` which contains an event object. |
+| afterLoad | `Function` |  | Deprecated, use `onLoad` instead. This prop is only for backward compatibility. |
 | beforeLoad | `Function` |  | Function called right before the image is rendered. |
 | placeholder | `ReactClass` | `<span>` | React element to use as a placeholder. |
 | threshold | `Number` | 100 | Threshold in pixels. So the image starts loading before it appears in the viewport. |

package/package.json

@@ -1,11 +1,10 @@
 {
 	"name": "react-lazy-load-image-component",
-	"version": "1.5.6",
-	"description": " React Component to lazy load images using a HOC to track window scroll position.",
+	"version": "1.6.1",
+	"description": "React Component to lazy load images using a HOC to track window scroll position.",
 	"main": "build/index.js",
 	"peerDependencies": {
-		"react": "^15.x.x || ^16.x.x || ^17.x.x || ^18.x.x",
-		"react-dom": "^15.x.x || ^16.x.x || ^17.x.x || ^18.x.x"
+		"react": "^15.x.x || ^16.x.x || ^17.x.x || ^18.x.x"
 	},
 	"dependencies": {
 		"lodash.debounce": "^4.0.8",
@@ -31,7 +30,6 @@
 		"path": "^0.12.7",
 		"prettier": "^2.3.2",
 		"react": "^16.2.0",
-		"react-dom": "^16.2.0",
 		"style-loader": "^3.2.1",
 		"webpack": "^5.50.0",
 		"webpack-cli": "^4.7.2"

package/src/components/LazyLoadImage.jsx

@@ -17,7 +17,10 @@ class LazyLoadImage extends React.Component {
 			return null;
 		}
 
-		return () => {
+		return e => {
+			// We keep support for afterLoad for backwards compatibility,
+			// but `onLoad` is the preferred prop.
+			this.props.onLoad(e);
 			this.props.afterLoad();
 
 			this.setState({
@@ -44,7 +47,7 @@ class LazyLoadImage extends React.Component {
 			...imgProps
 		} = this.props;
 
-		return <img onLoad={this.onImageLoad()} {...imgProps} />;
+		return <img {...imgProps} onLoad={this.onImageLoad()} />;
 	}
 
 	getLazyLoadImage() {
@@ -146,7 +149,8 @@ class LazyLoadImage extends React.Component {
 }
 
 LazyLoadImage.propTypes = {
-	afterLoad: PropTypes.func,
+	onLoad: PropTypes.func,
+	afterLoad: PropTypes.func, // Deprecated, use onLoad instead
 	beforeLoad: PropTypes.func,
 	delayMethod: PropTypes.string,
 	delayTime: PropTypes.number,
@@ -160,7 +164,8 @@ LazyLoadImage.propTypes = {
 };
 
 LazyLoadImage.defaultProps = {
-	afterLoad: () => ({}),
+	onLoad: () => {},
+	afterLoad: () => ({}), // Deprecated, use onLoad instead
 	beforeLoad: () => ({}),
 	delayMethod: 'throttle',
 	delayTime: 300,

package/src/components/LazyLoadImage.spec.js

@@ -67,9 +67,10 @@ describe('LazyLoadImage', function() {
 		expect(img.src).toEqual(props.src);
 	});
 
-	it('updates state and calls afterLoad when img triggers onLoad', function() {
+	it('updates state and calls onLoad and afterLoad when img triggers onLoad', function() {
 		const afterLoad = jest.fn();
-		const lazyLoadImage = mount(<LazyLoadImage afterLoad={afterLoad} />);
+		const onLoad = jest.fn();
+		const lazyLoadImage = mount(<LazyLoadImage onLoad={onLoad} afterLoad={afterLoad} />);
 
 		const img = findRenderedDOMComponentWithTag(
 			lazyLoadImage.instance(),
@@ -80,6 +81,7 @@ describe('LazyLoadImage', function() {
 
 		expect(lazyLoadImage.instance().state.loaded);
 		expect(afterLoad).toHaveBeenCalledTimes(1);
+		expect(onLoad).toHaveBeenCalledTimes(1);
 	});
 
 	it('sets loaded class to wrapper when img triggers onLoad', function() {

package/src/components/PlaceholderWithoutTracking.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { PropTypes } from 'prop-types';
 import isIntersectionObserverAvailable from '../utils/intersection-observer';
 
@@ -64,7 +63,7 @@ class PlaceholderWithoutTracking extends React.Component {
 
 	getPlaceholderBoundingBox(scrollPosition = this.props.scrollPosition) {
 		const boundingRect = this.placeholder.getBoundingClientRect();
-		const style = ReactDOM.findDOMNode(this.placeholder).style;
+		const style = this.placeholder.style;
 		const margin = {
 			left: parseInt(style.getPropertyValue('margin-left'), 10) || 0,
 			top: parseInt(style.getPropertyValue('margin-top'), 10) || 0,

package/src/hoc/trackWindowScroll.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import ReactDom from 'react-dom';
 import { PropTypes } from 'prop-types';
 import debounce from 'lodash.debounce';
 import throttle from 'lodash.throttle';
@@ -55,7 +54,7 @@ const trackWindowScroll = BaseComponent => {
 			}
 
 			const scrollElement = getScrollAncestor(
-				ReactDom.findDOMNode(this.baseComponentRef.current)
+				this.baseComponentRef.current
 			);
 
 			if (scrollElement !== this.scrollElement) {
@@ -70,7 +69,7 @@ const trackWindowScroll = BaseComponent => {
 			}
 
 			this.scrollElement = getScrollAncestor(
-				ReactDom.findDOMNode(this.baseComponentRef.current)
+				this.baseComponentRef.current
 			);
 
 			this.scrollElement.addEventListener('scroll', this.delayedScroll, {

package/build/index.js

@@ -1 +0,0 @@
-(()=>{var e={296:(e,t,r)=>{var o=/^\s+|\s+$/g,n=/^[-+]0x[0-9a-f]+$/i,i=/^0b[01]+$/i,c=/^0o[0-7]+$/i,s=parseInt,u="object"==typeof r.g&&r.g&&r.g.Object===Object&&r.g,l="object"==typeof self&&self&&self.Object===Object&&self,a=u||l||Function("return this")(),f=Object.prototype.toString,p=Math.max,y=Math.min,d=function(){return a.Date.now()};function b(e){var t=typeof e;return!!e&&("object"==t||"function"==t)}function h(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return!!e&&"object"==typeof e}(e)&&"[object Symbol]"==f.call(e)}(e))return NaN;if(b(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=b(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(o,"");var r=i.test(e);return r||c.test(e)?s(e.slice(2),r?2:8):n.test(e)?NaN:+e}e.exports=function(e,t,r){var o,n,i,c,s,u,l=0,a=!1,f=!1,v=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function m(t){var r=o,i=n;return o=n=void 0,l=t,c=e.apply(i,r)}function O(e){return l=e,s=setTimeout(g,t),a?m(e):c}function w(e){var r=e-u;return void 0===u||r>=t||r<0||f&&e-l>=i}function g(){var e=d();if(w(e))return P(e);s=setTimeout(g,function(e){var r=t-(e-u);return f?y(r,i-(e-l)):r}(e))}function P(e){return s=void 0,v&&o?m(e):(o=n=void 0,c)}function j(){var e=d(),r=w(e);if(o=arguments,n=this,u=e,r){if(void 0===s)return O(u);if(f)return s=setTimeout(g,t),m(u)}return void 0===s&&(s=setTimeout(g,t)),c}return t=h(t)||0,b(r)&&(a=!!r.leading,i=(f="maxWait"in r)?p(h(r.maxWait)||0,t):i,v="trailing"in r?!!r.trailing:v),j.cancel=function(){void 0!==s&&clearTimeout(s),l=0,o=u=n=s=void 0},j.flush=function(){return void 0===s?c:P(d())},j}},96:(e,t,r)=>{var o="Expected a function",n=/^\s+|\s+$/g,i=/^[-+]0x[0-9a-f]+$/i,c=/^0b[01]+$/i,s=/^0o[0-7]+$/i,u=parseInt,l="object"==typeof r.g&&r.g&&r.g.Object===Object&&r.g,a="object"==typeof self&&self&&self.Object===Object&&self,f=l||a||Function("return this")(),p=Object.prototype.toString,y=Math.max,d=Math.min,b=function(){return f.Date.now()};function h(e){var t=typeof e;return!!e&&("object"==t||"function"==t)}function v(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return!!e&&"object"==typeof e}(e)&&"[object Symbol]"==p.call(e)}(e))return NaN;if(h(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=h(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(n,"");var r=c.test(e);return r||s.test(e)?u(e.slice(2),r?2:8):i.test(e)?NaN:+e}e.exports=function(e,t,r){var n=!0,i=!0;if("function"!=typeof e)throw new TypeError(o);return h(r)&&(n="leading"in r?!!r.leading:n,i="trailing"in r?!!r.trailing:i),function(e,t,r){var n,i,c,s,u,l,a=0,f=!1,p=!1,m=!0;if("function"!=typeof e)throw new TypeError(o);function O(t){var r=n,o=i;return n=i=void 0,a=t,s=e.apply(o,r)}function w(e){return a=e,u=setTimeout(P,t),f?O(e):s}function g(e){var r=e-l;return void 0===l||r>=t||r<0||p&&e-a>=c}function P(){var e=b();if(g(e))return j(e);u=setTimeout(P,function(e){var r=t-(e-l);return p?d(r,c-(e-a)):r}(e))}function j(e){return u=void 0,m&&n?O(e):(n=i=void 0,s)}function T(){var e=b(),r=g(e);if(n=arguments,i=this,l=e,r){if(void 0===u)return w(l);if(p)return u=setTimeout(P,t),O(l)}return void 0===u&&(u=setTimeout(P,t)),s}return t=v(t)||0,h(r)&&(f=!!r.leading,c=(p="maxWait"in r)?y(v(r.maxWait)||0,t):c,m="trailing"in r?!!r.trailing:m),T.cancel=function(){void 0!==u&&clearTimeout(u),a=0,n=l=i=u=void 0},T.flush=function(){return void 0===u?s:j(b())},T}(e,t,{leading:n,maxWait:t,trailing:i})}},703:(e,t,r)=>{"use strict";var o=r(414);function n(){}function i(){}i.resetWarningCache=n,e.exports=function(){function e(e,t,r,n,i,c){if(c!==o){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 s.name="Invariant Violation",s}}function t(){return e}e.isRequired=e;var r={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:i,resetWarningCache:n};return r.PropTypes=r,r}},697:(e,t,r)=>{e.exports=r(703)()},414:e=>{"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"}},t={};function r(o){var n=t[o];if(void 0!==n)return n.exports;var i=t[o]={exports:{}};return e[o](i,i.exports,r),i.exports}r.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return r.d(t,{a:t}),t},r.d=(e,t)=>{for(var o in t)r.o(t,o)&&!r.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};(()=>{"use strict";r.r(o),r.d(o,{LazyLoadComponent:()=>J,LazyLoadImage:()=>ue,trackWindowScroll:()=>C});const e=require("react");var t=r.n(e),n=r(697);const i=require("react-dom");var c=r.n(i);function s(){return"undefined"!=typeof window&&"IntersectionObserver"in window&&"isIntersecting"in window.IntersectionObserverEntry.prototype}function u(e){return(u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function l(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,o)}return r}function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function f(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function p(e,t){return(p=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function y(e,t){if(t&&("object"===u(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}function d(e){return(d=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}var b=function(e){e.forEach((function(e){e.isIntersecting&&e.target.onVisible()}))},h={},v=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&p(e,t)}(v,e);var r,o,n,i,u=(n=v,i=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}(),function(){var e,t=d(n);if(i){var r=d(this).constructor;e=Reflect.construct(t,arguments,r)}else e=t.apply(this,arguments);return y(this,e)});function v(e){var t;if(function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,v),(t=u.call(this,e)).supportsObserver=!e.scrollPosition&&e.useIntersectionObserver&&s(),t.supportsObserver){var r=e.threshold;t.observer=function(e){return h[e]=h[e]||new IntersectionObserver(b,{rootMargin:e+"px"}),h[e]}(r)}return t}return r=v,(o=[{key:"componentDidMount",value:function(){this.placeholder&&this.observer&&(this.placeholder.onVisible=this.props.onVisible,this.observer.observe(this.placeholder)),this.supportsObserver||this.updateVisibility()}},{key:"componentWillUnmount",value:function(){this.observer&&this.placeholder&&this.observer.unobserve(this.placeholder)}},{key:"componentDidUpdate",value:function(){this.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=c().findDOMNode(this.placeholder).style,o={left:parseInt(r.getPropertyValue("margin-left"),10)||0,top:parseInt(r.getPropertyValue("margin-top"),10)||0};return{bottom:e.y+t.bottom+o.top,left:e.x+t.left+o.left,right:e.x+t.right+o.left,top:e.y+t.top+o.top}}},{key:"isPlaceholderInViewport",value:function(){if("undefined"==typeof window||!this.placeholder)return!1;var e=this.props,t=e.scrollPosition,r=e.threshold,o=this.getPlaceholderBoundingBox(t),n=t.y+window.innerHeight,i=t.x,c=t.x+window.innerWidth,s=t.y;return Boolean(s-r<=o.bottom&&n+r>=o.top&&i-r<=o.right&&c+r>=o.left)}},{key:"updateVisibility",value:function(){this.isPlaceholderInViewport()&&this.props.onVisible()}},{key:"render",value:function(){var e=this,r=this.props,o=r.className,n=r.height,i=r.placeholder,c=r.style,s=r.width;if(i&&"function"!=typeof i.type)return t().cloneElement(i,{ref:function(t){return e.placeholder=t}});var u=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?l(Object(r),!0).forEach((function(t){a(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):l(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}({display:"inline-block"},c);return void 0!==s&&(u.width=s),void 0!==n&&(u.height=n),t().createElement("span",{className:o,ref:function(t){return e.placeholder=t},style:u},i)}}])&&f(r.prototype,o),v}(t().Component);v.propTypes={onVisible:n.PropTypes.func.isRequired,className:n.PropTypes.string,height:n.PropTypes.oneOfType([n.PropTypes.number,n.PropTypes.string]),placeholder:n.PropTypes.element,threshold:n.PropTypes.number,useIntersectionObserver:n.PropTypes.bool,scrollPosition:n.PropTypes.shape({x:n.PropTypes.number.isRequired,y:n.PropTypes.number.isRequired}),width:n.PropTypes.oneOfType([n.PropTypes.number,n.PropTypes.string])},v.defaultProps={className:"",placeholder:null,threshold:100,useIntersectionObserver:!0};const m=v;var O=r(296),w=r.n(O),g=r(96),P=r.n(g),j=function(e){var t=getComputedStyle(e,null);return t.getPropertyValue("overflow")+t.getPropertyValue("overflow-y")+t.getPropertyValue("overflow-x")};const T=function(e){if(!(e instanceof HTMLElement))return window;for(var t=e;t&&t instanceof HTMLElement;){if(/(scroll|auto)/.test(j(t)))return t;t=t.parentNode}return window};function S(e){return(S="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}var E=["delayMethod","delayTime"];function _(){return(_=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e}).apply(this,arguments)}function I(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function L(e,t){return(L=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function x(e,t){if(t&&("object"===S(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return R(e)}function R(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function k(e){return(k=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}var D=function(){return"undefined"==typeof window?0:window.scrollX||window.pageXOffset},N=function(){return"undefined"==typeof window?0:window.scrollY||window.pageYOffset};const C=function(e){var r=function(r){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&L(e,t)}(a,r);var o,n,i,u,l=(i=a,u=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}(),function(){var e,t=k(i);if(u){var r=k(this).constructor;e=Reflect.construct(t,arguments,r)}else e=t.apply(this,arguments);return x(this,e)});function a(e){var r;if(function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,a),(r=l.call(this,e)).useIntersectionObserver=e.useIntersectionObserver&&s(),r.useIntersectionObserver)return x(r);var o=r.onChangeScroll.bind(R(r));return"debounce"===e.delayMethod?r.delayedScroll=w()(o,e.delayTime):"throttle"===e.delayMethod&&(r.delayedScroll=P()(o,e.delayTime)),r.state={scrollPosition:{x:D(),y:N()}},r.baseComponentRef=t().createRef(),r}return o=a,(n=[{key:"componentDidMount",value:function(){this.addListeners()}},{key:"componentWillUnmount",value:function(){this.removeListeners()}},{key:"componentDidUpdate",value:function(){"undefined"==typeof window||this.useIntersectionObserver||T(c().findDOMNode(this.baseComponentRef.current))!==this.scrollElement&&(this.removeListeners(),this.addListeners())}},{key:"addListeners",value:function(){"undefined"==typeof window||this.useIntersectionObserver||(this.scrollElement=T(c().findDOMNode(this.baseComponentRef.current)),this.scrollElement.addEventListener("scroll",this.delayedScroll,{passive:!0}),window.addEventListener("resize",this.delayedScroll,{passive:!0}),this.scrollElement!==window&&window.addEventListener("scroll",this.delayedScroll,{passive:!0}))}},{key:"removeListeners",value:function(){"undefined"==typeof window||this.useIntersectionObserver||(this.scrollElement.removeEventListener("scroll",this.delayedScroll),window.removeEventListener("resize",this.delayedScroll),this.scrollElement!==window&&window.removeEventListener("scroll",this.delayedScroll))}},{key:"onChangeScroll",value:function(){this.useIntersectionObserver||this.setState({scrollPosition:{x:D(),y:N()}})}},{key:"render",value:function(){var r=this.props,o=(r.delayMethod,r.delayTime,function(e,t){if(null==e)return{};var r,o,n=function(e,t){if(null==e)return{};var r,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(r,E)),n=this.useIntersectionObserver?null:this.state.scrollPosition;return t().createElement(e,_({forwardRef:this.baseComponentRef,scrollPosition:n},o))}}])&&I(o.prototype,n),a}(t().Component);return r.propTypes={delayMethod:n.PropTypes.oneOf(["debounce","throttle"]),delayTime:n.PropTypes.number,useIntersectionObserver:n.PropTypes.bool},r.defaultProps={delayMethod:"throttle",delayTime:300,useIntersectionObserver:!0},r};function M(e){return(M="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function B(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function V(e,t){return(V=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function W(e,t){if(t&&("object"===M(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}function z(e){return(z=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}var $=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&V(e,t)}(s,e);var r,o,n,i,c=(n=s,i=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}(),function(){var e,t=z(n);if(i){var r=z(this).constructor;e=Reflect.construct(t,arguments,r)}else e=t.apply(this,arguments);return W(this,e)});function s(e){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,s),c.call(this,e)}return r=s,(o=[{key:"render",value:function(){return t().createElement(m,this.props)}}])&&B(r.prototype,o),s}(t().Component);const U=C($);function q(e){return(q="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function F(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function H(e,t){return(H=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function Y(e,t){if(t&&("object"===q(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return X(e)}function X(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function A(e){return(A=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}var G=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&H(e,t)}(u,e);var r,o,n,i,c=(n=u,i=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}(),function(){var e,t=A(n);if(i){var r=A(this).constructor;e=Reflect.construct(t,arguments,r)}else e=t.apply(this,arguments);return Y(this,e)});function u(e){var t;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,u),t=c.call(this,e);var r=e.afterLoad,o=e.beforeLoad,n=e.scrollPosition,i=e.visibleByDefault;return t.state={visible:i},i&&(o(),r()),t.onVisible=t.onVisible.bind(X(t)),t.isScrollTracked=Boolean(n&&Number.isFinite(n.x)&&n.x>=0&&Number.isFinite(n.y)&&n.y>=0),t}return r=u,(o=[{key:"componentDidUpdate",value:function(e,t){t.visible!==this.state.visible&&this.props.afterLoad()}},{key:"onVisible",value:function(){this.props.beforeLoad(),this.setState({visible:!0})}},{key:"render",value:function(){if(this.state.visible)return this.props.children;var e=this.props,r=e.className,o=e.delayMethod,n=e.delayTime,i=e.height,c=e.placeholder,u=e.scrollPosition,l=e.style,a=e.threshold,f=e.useIntersectionObserver,p=e.width;return this.isScrollTracked||f&&s()?t().createElement(m,{className:r,height:i,onVisible:this.onVisible,placeholder:c,scrollPosition:u,style:l,threshold:a,useIntersectionObserver:f,width:p}):t().createElement(U,{className:r,delayMethod:o,delayTime:n,height:i,onVisible:this.onVisible,placeholder:c,style:l,threshold:a,width:p})}}])&&F(r.prototype,o),u}(t().Component);G.propTypes={afterLoad:n.PropTypes.func,beforeLoad:n.PropTypes.func,useIntersectionObserver:n.PropTypes.bool,visibleByDefault:n.PropTypes.bool},G.defaultProps={afterLoad:function(){return{}},beforeLoad:function(){return{}},useIntersectionObserver:!0,visibleByDefault:!1};const J=G;function K(e){return(K="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}var Q=["afterLoad","beforeLoad","delayMethod","delayTime","effect","placeholder","placeholderSrc","scrollPosition","threshold","useIntersectionObserver","visibleByDefault","wrapperClassName","wrapperProps"];function Z(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,o)}return r}function ee(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?Z(Object(r),!0).forEach((function(t){te(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):Z(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function te(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function re(){return(re=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e}).apply(this,arguments)}function oe(e,t){for(var r=0;r<t.length;r++){var o=t[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function ne(e,t){return(ne=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function ie(e,t){if(t&&("object"===K(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}function ce(e){return(ce=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}var se=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&ne(e,t)}(s,e);var r,o,n,i,c=(n=s,i=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}(),function(){var e,t=ce(n);if(i){var r=ce(this).constructor;e=Reflect.construct(t,arguments,r)}else e=t.apply(this,arguments);return ie(this,e)});function s(e){var t;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,s),(t=c.call(this,e)).state={loaded:!1},t}return r=s,(o=[{key:"onImageLoad",value:function(){var e=this;return this.state.loaded?null:function(){e.props.afterLoad(),e.setState({loaded:!0})}}},{key:"getImg",value:function(){var e=this.props,r=(e.afterLoad,e.beforeLoad,e.delayMethod,e.delayTime,e.effect,e.placeholder,e.placeholderSrc,e.scrollPosition,e.threshold,e.useIntersectionObserver,e.visibleByDefault,e.wrapperClassName,e.wrapperProps,function(e,t){if(null==e)return{};var r,o,n=function(e,t){if(null==e)return{};var r,o,n={},i=Object.keys(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(o=0;o<i.length;o++)r=i[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(e,Q));return t().createElement("img",re({onLoad:this.onImageLoad()},r))}},{key:"getLazyLoadImage",value:function(){var e=this.props,r=e.beforeLoad,o=e.className,n=e.delayMethod,i=e.delayTime,c=e.height,s=e.placeholder,u=e.scrollPosition,l=e.style,a=e.threshold,f=e.useIntersectionObserver,p=e.visibleByDefault,y=e.width;return t().createElement(J,{beforeLoad:r,className:o,delayMethod:n,delayTime:i,height:c,placeholder:s,scrollPosition:u,style:l,threshold:a,useIntersectionObserver:f,visibleByDefault:p,width:y},this.getImg())}},{key:"getWrappedLazyLoadImage",value:function(e){var r=this.props,o=r.effect,n=r.height,i=r.placeholderSrc,c=r.width,s=r.wrapperClassName,u=r.wrapperProps,l=this.state.loaded,a=l?" lazy-load-image-loaded":"",f=l||!i?{}:{backgroundImage:"url(".concat(i,")"),backgroundSize:"100% 100%"};return t().createElement("span",re({className:s+" lazy-load-image-background "+o+a,style:ee(ee({},f),{},{color:"transparent",display:"inline-block",height:n,width:c})},u),e)}},{key:"render",value:function(){var e=this.props,t=e.effect,r=e.placeholderSrc,o=e.visibleByDefault,n=e.wrapperClassName,i=e.wrapperProps,c=this.getLazyLoadImage();return(t||r)&&!o||n||i?this.getWrappedLazyLoadImage(c):c}}])&&oe(r.prototype,o),s}(t().Component);se.propTypes={afterLoad:n.PropTypes.func,beforeLoad:n.PropTypes.func,delayMethod:n.PropTypes.string,delayTime:n.PropTypes.number,effect:n.PropTypes.string,placeholderSrc:n.PropTypes.string,threshold:n.PropTypes.number,useIntersectionObserver:n.PropTypes.bool,visibleByDefault:n.PropTypes.bool,wrapperClassName:n.PropTypes.string,wrapperProps:n.PropTypes.object},se.defaultProps={afterLoad:function(){return{}},beforeLoad:function(){return{}},delayMethod:"throttle",delayTime:300,effect:"",placeholderSrc:null,threshold:100,useIntersectionObserver:!0,visibleByDefault:!1,wrapperClassName:""};const ue=se})(),module.exports=o})();