react-lazy-load-image-component 1.5.1 → 1.5.4
Sign up to get free protection for your applications and to get access to all the features.
- package/.babelrc +5 -4
- package/.eslintrc +2 -2
- package/build/index.js +1 -1462
- package/package.json +26 -26
- package/src/hoc/trackWindowScroll.js +5 -5
- package/src/utils/get-scroll-ancestor.ts +35 -0
- package/webpack.config.js +20 -11
- package/src/utils/get-scroll-element.js +0 -39
package/package.json
CHANGED
@@ -1,41 +1,40 @@
|
|
1
1
|
{
|
2
2
|
"name": "react-lazy-load-image-component",
|
3
|
-
"version": "1.5.
|
4
|
-
"description": " React Component to lazy load images using a HOC to track window scroll position.
|
3
|
+
"version": "1.5.4",
|
4
|
+
"description": " React Component to lazy load images using a HOC to track window scroll position.",
|
5
5
|
"main": "build/index.js",
|
6
6
|
"peerDependencies": {
|
7
|
-
"react": "^15.x.x || ^16.x.x || ^17.x.x",
|
8
|
-
"react-dom": "^15.x.x || ^16.x.x || ^17.x.x"
|
7
|
+
"react": "^15.x.x || ^16.x.x || ^17.x.x || ^18.x.x",
|
8
|
+
"react-dom": "^15.x.x || ^16.x.x || ^17.x.x || ^18.x.x"
|
9
9
|
},
|
10
10
|
"dependencies": {
|
11
11
|
"lodash.debounce": "^4.0.8",
|
12
12
|
"lodash.throttle": "^4.1.1"
|
13
13
|
},
|
14
14
|
"devDependencies": {
|
15
|
-
"babel
|
16
|
-
"babel-
|
17
|
-
"babel-
|
18
|
-
"babel-
|
19
|
-
"babel-
|
20
|
-
"babel-
|
21
|
-
"babel-
|
22
|
-
"
|
23
|
-
"
|
24
|
-
"enzyme": "^
|
25
|
-
"
|
26
|
-
"eslint": "^
|
27
|
-
"eslint-
|
28
|
-
"eslint-plugin
|
29
|
-
"
|
30
|
-
"
|
31
|
-
"jest": "^23.5.0",
|
15
|
+
"@babel/core": "^7.15.0",
|
16
|
+
"@babel/eslint-parser": "^7.15.0",
|
17
|
+
"@babel/preset-env": "^7.15.0",
|
18
|
+
"@babel/preset-react": "^7.14.5",
|
19
|
+
"@babel/preset-typescript": "^7.15.0",
|
20
|
+
"babel-jest": "^27.0.6",
|
21
|
+
"babel-loader": "^8.2.2",
|
22
|
+
"css-loader": "^6.2.0",
|
23
|
+
"enzyme": "^3.11.0",
|
24
|
+
"enzyme-adapter-react-16": "^1.15.6",
|
25
|
+
"eslint": "^7.32.0",
|
26
|
+
"eslint-plugin-babel": "^5.3.1",
|
27
|
+
"eslint-plugin-react": "^7.24.0",
|
28
|
+
"eslint-webpack-plugin": "^3.0.1",
|
29
|
+
"husky": "^7.0.1",
|
30
|
+
"jest": "^27.0.6",
|
32
31
|
"path": "^0.12.7",
|
33
|
-
"prettier": "^
|
32
|
+
"prettier": "^2.3.2",
|
34
33
|
"react": "^16.2.0",
|
35
34
|
"react-dom": "^16.2.0",
|
36
|
-
"style-loader": "^
|
37
|
-
"webpack": "^
|
38
|
-
"webpack-cli": "^
|
35
|
+
"style-loader": "^3.2.1",
|
36
|
+
"webpack": "^5.50.0",
|
37
|
+
"webpack-cli": "^4.7.2"
|
39
38
|
},
|
40
39
|
"scripts": {
|
41
40
|
"test": "jest",
|
@@ -46,7 +45,8 @@
|
|
46
45
|
},
|
47
46
|
"jest": {
|
48
47
|
"verbose": true,
|
49
|
-
"testURL": "http://localhost/"
|
48
|
+
"testURL": "http://localhost/",
|
49
|
+
"testEnvironment": "jsdom"
|
50
50
|
},
|
51
51
|
"repository": {
|
52
52
|
"type": "git",
|
@@ -4,7 +4,7 @@ import { PropTypes } from 'prop-types';
|
|
4
4
|
import debounce from 'lodash.debounce';
|
5
5
|
import throttle from 'lodash.throttle';
|
6
6
|
import isIntersectionObserverAvailable from '../utils/intersection-observer';
|
7
|
-
import
|
7
|
+
import getScrollAncestor from '../utils/get-scroll-ancestor';
|
8
8
|
|
9
9
|
const getScrollX = () =>
|
10
10
|
typeof window === 'undefined' ? 0 : window.scrollX || window.pageXOffset;
|
@@ -54,7 +54,7 @@ const trackWindowScroll = BaseComponent => {
|
|
54
54
|
return;
|
55
55
|
}
|
56
56
|
|
57
|
-
const scrollElement =
|
57
|
+
const scrollElement = getScrollAncestor(
|
58
58
|
ReactDom.findDOMNode(this.baseComponentRef.current)
|
59
59
|
);
|
60
60
|
|
@@ -69,7 +69,7 @@ const trackWindowScroll = BaseComponent => {
|
|
69
69
|
return;
|
70
70
|
}
|
71
71
|
|
72
|
-
this.scrollElement =
|
72
|
+
this.scrollElement = getScrollAncestor(
|
73
73
|
ReactDom.findDOMNode(this.baseComponentRef.current)
|
74
74
|
);
|
75
75
|
|
@@ -88,7 +88,7 @@ const trackWindowScroll = BaseComponent => {
|
|
88
88
|
}
|
89
89
|
|
90
90
|
removeListeners() {
|
91
|
-
if (typeof window
|
91
|
+
if (typeof window === 'undefined' || this.useIntersectionObserver) {
|
92
92
|
return;
|
93
93
|
}
|
94
94
|
|
@@ -124,7 +124,7 @@ const trackWindowScroll = BaseComponent => {
|
|
124
124
|
|
125
125
|
return (
|
126
126
|
<BaseComponent
|
127
|
-
|
127
|
+
forwardRef={this.baseComponentRef}
|
128
128
|
scrollPosition={scrollPosition}
|
129
129
|
{...props}
|
130
130
|
/>
|
@@ -0,0 +1,35 @@
|
|
1
|
+
// Adapted from https://github.com/loktar00/react-lazy-load/blob/master/src/utils/parentScroll.js
|
2
|
+
|
3
|
+
const getElementOverflowValues = (element: HTMLElement) : string => {
|
4
|
+
const computedStyle = getComputedStyle(element, null);
|
5
|
+
|
6
|
+
return (
|
7
|
+
computedStyle.getPropertyValue('overflow') +
|
8
|
+
computedStyle.getPropertyValue('overflow-y') +
|
9
|
+
computedStyle.getPropertyValue('overflow-x')
|
10
|
+
);
|
11
|
+
};
|
12
|
+
|
13
|
+
const getScrollAncestor = (element: Node) : HTMLElement | Window => {
|
14
|
+
if (!(element instanceof HTMLElement)) {
|
15
|
+
return window;
|
16
|
+
}
|
17
|
+
|
18
|
+
let parent : Node = element;
|
19
|
+
|
20
|
+
while (parent) {
|
21
|
+
if (!(parent instanceof HTMLElement)) {
|
22
|
+
break;
|
23
|
+
}
|
24
|
+
|
25
|
+
if (/(scroll|auto)/.test(getElementOverflowValues(parent))) {
|
26
|
+
return parent;
|
27
|
+
}
|
28
|
+
|
29
|
+
parent = parent.parentNode;
|
30
|
+
}
|
31
|
+
|
32
|
+
return window;
|
33
|
+
};
|
34
|
+
|
35
|
+
export default getScrollAncestor;
|
package/webpack.config.js
CHANGED
@@ -1,5 +1,5 @@
|
|
1
|
-
const webpack = require('webpack');
|
2
1
|
const path = require('path');
|
2
|
+
const ESLintPlugin = require('eslint-webpack-plugin');
|
3
3
|
|
4
4
|
module.exports = {
|
5
5
|
mode: 'production',
|
@@ -12,26 +12,26 @@ module.exports = {
|
|
12
12
|
module: {
|
13
13
|
rules: [
|
14
14
|
{
|
15
|
-
|
16
|
-
test: /\.jsx?$/,
|
17
|
-
loaders: ['eslint-loader'],
|
18
|
-
include: path.resolve(__dirname, 'src'),
|
19
|
-
exclude: /(node_modules|bower_components|build)/,
|
20
|
-
},
|
21
|
-
{
|
22
|
-
test: /\.jsx?$/,
|
15
|
+
test: /\.(j|t)sx?$/,
|
23
16
|
include: path.resolve(__dirname, 'src'),
|
24
17
|
exclude: /(node_modules|bower_components|build)/,
|
25
18
|
use: {
|
26
19
|
loader: 'babel-loader',
|
27
20
|
options: {
|
28
|
-
presets: ['env'],
|
21
|
+
presets: ['@babel/preset-env'],
|
29
22
|
},
|
30
23
|
},
|
31
24
|
},
|
32
25
|
{
|
33
26
|
test: /\.css$/,
|
34
|
-
|
27
|
+
use: [
|
28
|
+
{
|
29
|
+
loader: 'style-loader',
|
30
|
+
},
|
31
|
+
{
|
32
|
+
loader: 'css-loader',
|
33
|
+
},
|
34
|
+
],
|
35
35
|
exclude: /node_modules/,
|
36
36
|
},
|
37
37
|
],
|
@@ -40,4 +40,13 @@ module.exports = {
|
|
40
40
|
react: 'commonjs react',
|
41
41
|
'react-dom': 'commonjs react-dom',
|
42
42
|
},
|
43
|
+
plugins: [
|
44
|
+
new ESLintPlugin({
|
45
|
+
context: path.resolve(__dirname, 'src'),
|
46
|
+
extensions: ['js', 'jsx', 'ts', 'tsx'],
|
47
|
+
}),
|
48
|
+
],
|
49
|
+
resolve: {
|
50
|
+
extensions: ['.ts', '.tsx', '.js', '.jsx'],
|
51
|
+
},
|
43
52
|
};
|
@@ -1,39 +0,0 @@
|
|
1
|
-
// copyright https://github.com/loktar00/react-lazy-load/blob/master/src/utils/parentScroll.js
|
2
|
-
|
3
|
-
const style = (element, prop) =>
|
4
|
-
typeof getComputedStyle === 'undefined'
|
5
|
-
? element.style[prop]
|
6
|
-
: getComputedStyle(element, null).getPropertyValue(prop);
|
7
|
-
|
8
|
-
const overflow = element =>
|
9
|
-
style(element, 'overflow') +
|
10
|
-
style(element, 'overflow-y') +
|
11
|
-
style(element, 'overflow-x');
|
12
|
-
|
13
|
-
const scrollParent = element => {
|
14
|
-
if (!(element instanceof HTMLElement)) {
|
15
|
-
return window;
|
16
|
-
}
|
17
|
-
|
18
|
-
let parent = element;
|
19
|
-
|
20
|
-
while (parent) {
|
21
|
-
if (
|
22
|
-
parent === document.body ||
|
23
|
-
parent === document.documentElement ||
|
24
|
-
!parent.parentNode
|
25
|
-
) {
|
26
|
-
break;
|
27
|
-
}
|
28
|
-
|
29
|
-
if (/(scroll|auto)/.test(overflow(parent))) {
|
30
|
-
return parent;
|
31
|
-
}
|
32
|
-
|
33
|
-
parent = parent.parentNode;
|
34
|
-
}
|
35
|
-
|
36
|
-
return window;
|
37
|
-
};
|
38
|
-
|
39
|
-
export default scrollParent;
|