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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,41 +1,40 @@
1
1
  {
2
2
  "name": "react-lazy-load-image-component",
3
- "version": "1.5.0",
4
- "description": " React Component to lazy load images using a HOC to track window scroll position. ",
3
+ "version": "1.5.3",
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",
8
- "react-dom": "^15.x.x || ^16.x.x"
7
+ "react": "^15.x.x || ^16.x.x || ^17.x.x",
8
+ "react-dom": "^15.x.x || ^16.x.x || ^17.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-cli": "^6.24.1",
16
- "babel-core": "^6.26.0",
17
- "babel-eslint": "^8.2.2",
18
- "babel-jest": "^22.4.1",
19
- "babel-loader": "^7.1.4",
20
- "babel-plugin-transform-object-rest-spread": "^6.26.0",
21
- "babel-preset-env": "^1.6.1",
22
- "babel-preset-react": "^6.24.1",
23
- "css-loader": "^0.28.10",
24
- "enzyme": "^3.4.4",
25
- "enzyme-adapter-react-16": "^1.2.0",
26
- "eslint": "^4.18.2",
27
- "eslint-loader": "^2.0.0",
28
- "eslint-plugin-babel": "^4.1.2",
29
- "eslint-plugin-react": "^7.11.1",
30
- "husky": "^3.1.0",
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": "^1.19.1",
32
+ "prettier": "^2.3.2",
34
33
  "react": "^16.2.0",
35
34
  "react-dom": "^16.2.0",
36
- "style-loader": "^0.20.3",
37
- "webpack": "^4.17.1",
38
- "webpack-cli": "^3.1.2"
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 getScrollElement from '../utils/get-scroll-element';
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 = getScrollElement(
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 = getScrollElement(
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 == 'undefined' || this.useIntersectionObserver) {
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
- ref={this.baseComponentRef}
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
- enforce: 'pre',
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
- loaders: ['style-loader', 'css-loader'],
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;