react-lazy-load-image-component 1.5.0 → 1.5.3

package/package.json

@@ -1,41 +1,40 @@
 {
 	"name": "react-lazy-load-image-component",
-	"version": "1.5.0",
-	"description": " React Component to lazy load images using a HOC to track window scroll position. ",
+	"version": "1.5.3",
+	"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",
-		"react-dom": "^15.x.x || ^16.x.x"
+		"react": "^15.x.x || ^16.x.x || ^17.x.x",
+		"react-dom": "^15.x.x || ^16.x.x || ^17.x.x"
 	},
 	"dependencies": {
 		"lodash.debounce": "^4.0.8",
 		"lodash.throttle": "^4.1.1"
 	},
 	"devDependencies": {
-		"babel-cli": "^6.24.1",
-		"babel-core": "^6.26.0",
-		"babel-eslint": "^8.2.2",
-		"babel-jest": "^22.4.1",
-		"babel-loader": "^7.1.4",
-		"babel-plugin-transform-object-rest-spread": "^6.26.0",
-		"babel-preset-env": "^1.6.1",
-		"babel-preset-react": "^6.24.1",
-		"css-loader": "^0.28.10",
-		"enzyme": "^3.4.4",
-		"enzyme-adapter-react-16": "^1.2.0",
-		"eslint": "^4.18.2",
-		"eslint-loader": "^2.0.0",
-		"eslint-plugin-babel": "^4.1.2",
-		"eslint-plugin-react": "^7.11.1",
-		"husky": "^3.1.0",
-		"jest": "^23.5.0",
+		"@babel/core": "^7.15.0",
+		"@babel/eslint-parser": "^7.15.0",
+		"@babel/preset-env": "^7.15.0",
+		"@babel/preset-react": "^7.14.5",
+		"@babel/preset-typescript": "^7.15.0",
+		"babel-jest": "^27.0.6",
+		"babel-loader": "^8.2.2",
+		"css-loader": "^6.2.0",
+		"enzyme": "^3.11.0",
+		"enzyme-adapter-react-16": "^1.15.6",
+		"eslint": "^7.32.0",
+		"eslint-plugin-babel": "^5.3.1",
+		"eslint-plugin-react": "^7.24.0",
+		"eslint-webpack-plugin": "^3.0.1",
+		"husky": "^7.0.1",
+		"jest": "^27.0.6",
 		"path": "^0.12.7",
-		"prettier": "^1.19.1",
+		"prettier": "^2.3.2",
 		"react": "^16.2.0",
 		"react-dom": "^16.2.0",
-		"style-loader": "^0.20.3",
-		"webpack": "^4.17.1",
-		"webpack-cli": "^3.1.2"
+		"style-loader": "^3.2.1",
+		"webpack": "^5.50.0",
+		"webpack-cli": "^4.7.2"
 	},
 	"scripts": {
 		"test": "jest",
@@ -46,7 +45,8 @@
 	},
 	"jest": {
 		"verbose": true,
-		"testURL": "http://localhost/"
+		"testURL": "http://localhost/",
+		"testEnvironment": "jsdom"
 	},
 	"repository": {
 		"type": "git",

package/src/hoc/trackWindowScroll.js

@@ -4,7 +4,7 @@ import { PropTypes } from 'prop-types';
 import debounce from 'lodash.debounce';
 import throttle from 'lodash.throttle';
 import isIntersectionObserverAvailable from '../utils/intersection-observer';
-import getScrollElement from '../utils/get-scroll-element';
+import getScrollAncestor from '../utils/get-scroll-ancestor';
 
 const getScrollX = () =>
 	typeof window === 'undefined' ? 0 : window.scrollX || window.pageXOffset;
@@ -54,7 +54,7 @@ const trackWindowScroll = BaseComponent => {
 				return;
 			}
 
-			const scrollElement = getScrollElement(
+			const scrollElement = getScrollAncestor(
 				ReactDom.findDOMNode(this.baseComponentRef.current)
 			);
 
@@ -69,7 +69,7 @@ const trackWindowScroll = BaseComponent => {
 				return;
 			}
 
-			this.scrollElement = getScrollElement(
+			this.scrollElement = getScrollAncestor(
 				ReactDom.findDOMNode(this.baseComponentRef.current)
 			);
 
@@ -88,7 +88,7 @@ const trackWindowScroll = BaseComponent => {
 		}
 
 		removeListeners() {
-			if (typeof window == 'undefined' || this.useIntersectionObserver) {
+			if (typeof window === 'undefined' || this.useIntersectionObserver) {
 				return;
 			}
 
@@ -124,7 +124,7 @@ const trackWindowScroll = BaseComponent => {
 
 			return (
 				<BaseComponent
-					ref={this.baseComponentRef}
+					forwardRef={this.baseComponentRef}
 					scrollPosition={scrollPosition}
 					{...props}
 				/>

package/src/utils/get-scroll-ancestor.ts

@@ -0,0 +1,35 @@
+// Adapted from https://github.com/loktar00/react-lazy-load/blob/master/src/utils/parentScroll.js
+
+const getElementOverflowValues = (element: HTMLElement) : string => {
+	const computedStyle = getComputedStyle(element, null);
+
+	return (
+		computedStyle.getPropertyValue('overflow') +
+		computedStyle.getPropertyValue('overflow-y') +
+		computedStyle.getPropertyValue('overflow-x')
+	);
+};
+
+const getScrollAncestor = (element: Node) : HTMLElement | Window => {
+	if (!(element instanceof HTMLElement)) {
+		return window;
+	}
+
+	let parent : Node = element;
+
+	while (parent) {
+		if (!(parent instanceof HTMLElement)) {
+			break;
+		}
+
+		if (/(scroll|auto)/.test(getElementOverflowValues(parent))) {
+			return parent;
+		}
+
+		parent = parent.parentNode;
+	}
+
+	return window;
+};
+
+export default getScrollAncestor;

package/webpack.config.js

@@ -1,5 +1,5 @@
-const webpack = require('webpack');
 const path = require('path');
+const ESLintPlugin = require('eslint-webpack-plugin');
 
 module.exports = {
 	mode: 'production',
@@ -12,26 +12,26 @@ module.exports = {
 	module: {
 		rules: [
 			{
-				enforce: 'pre',
-				test: /\.jsx?$/,
-				loaders: ['eslint-loader'],
-				include: path.resolve(__dirname, 'src'),
-				exclude: /(node_modules|bower_components|build)/,
-			},
-			{
-				test: /\.jsx?$/,
+				test: /\.(j|t)sx?$/,
 				include: path.resolve(__dirname, 'src'),
 				exclude: /(node_modules|bower_components|build)/,
 				use: {
 					loader: 'babel-loader',
 					options: {
-						presets: ['env'],
+						presets: ['@babel/preset-env'],
 					},
 				},
 			},
 			{
 				test: /\.css$/,
-				loaders: ['style-loader', 'css-loader'],
+				use: [
+					{
+						loader: 'style-loader',
+					},
+					{
+						loader: 'css-loader',
+					},
+				],
 				exclude: /node_modules/,
 			},
 		],
@@ -40,4 +40,13 @@ module.exports = {
 		react: 'commonjs react',
 		'react-dom': 'commonjs react-dom',
 	},
+	plugins: [
+		new ESLintPlugin({
+			context: path.resolve(__dirname, 'src'),
+			extensions: ['js', 'jsx', 'ts', 'tsx'],
+		}),
+	],
+	resolve: {
+		extensions: ['.ts', '.tsx', '.js', '.jsx'],
+	},
 };

package/src/utils/get-scroll-element.js

@@ -1,39 +0,0 @@
-// copyright https://github.com/loktar00/react-lazy-load/blob/master/src/utils/parentScroll.js
-
-const style = (element, prop) =>
-	typeof getComputedStyle === 'undefined'
-		? element.style[prop]
-		: getComputedStyle(element, null).getPropertyValue(prop);
-
-const overflow = element =>
-	style(element, 'overflow') +
-	style(element, 'overflow-y') +
-	style(element, 'overflow-x');
-
-const scrollParent = element => {
-	if (!(element instanceof HTMLElement)) {
-		return window;
-	}
-
-	let parent = element;
-
-	while (parent) {
-		if (
-			parent === document.body ||
-			parent === document.documentElement ||
-			!parent.parentNode
-		) {
-			break;
-		}
-
-		if (/(scroll|auto)/.test(overflow(parent))) {
-			return parent;
-		}
-
-		parent = parent.parentNode;
-	}
-
-	return window;
-};
-
-export default scrollParent;