Skip to content

Commit 4345db4

Browse files
AljulluAljullu
authored
Add Prettier (#54)
1 parent a833244 commit 4345db4

15 files changed

+1264
-1119
lines changed

‎.eslintrc

+9-3
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@
9292
"func-style": 0,
9393
"id-length": 0,
9494
"id-match": 1,
95-
"indent": [1, 2, { "SwitchCase": 1 }],
95+
"indent": [1, "tab", { "SwitchCase": 1 }],
9696
"jsx-quotes": 1,
9797
"key-spacing": 1,
9898
"line-comment-position": 0,
@@ -129,10 +129,16 @@
129129
"one-var-declaration-per-line": 0,
130130
"one-var": 0,
131131
"operator-assignment": 1,
132-
"operator-linebreak": [1, "after"],
132+
"operator-linebreak": [1, "after",
133+
{
134+
"overrides": {
135+
"?": "before",
136+
":": "before"
137+
}
138+
}],
133139
"padded-blocks": [1, "never"],
134140
"quote-props": [1, "as-needed"],
135-
"quotes": [1, 'single'],
141+
"quotes": [1, "single", { "avoidEscape": true }],
136142
"require-jsdoc": 0,
137143
"semi-spacing": 1,
138144
"semi": 1,

‎.prettierrc

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
printWidth: 80
2+
tabWidth: 4
3+
useTabs: true
4+
semi: true
5+
singleQuote: true
6+
quoteProps: "as-needed"
7+
jsxSingleQuote: false
8+
trailingComma: es5
9+
jsxBracketSameLine: false
10+
bracketSpacing: true
11+
arrowParens: avoid
12+
endOfLine: "lf"

‎package.json

+75-66
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,77 @@
11
{
2-
"name": "react-lazy-load-image-component",
3-
"version": "1.4.0-beta.1",
4-
"description": " React Component to lazy load images using a HOC to track window scroll position. ",
5-
"main": "build/index.js",
6-
"peerDependencies": {
7-
"react": "^15.x.x || ^16.x.x",
8-
"react-dom": "^15.x.x || ^16.x.x"
9-
},
10-
"dependencies": {
11-
"lodash.debounce": "^4.0.8",
12-
"lodash.throttle": "^4.1.1"
13-
},
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-
"jest": "^23.5.0",
31-
"path": "^0.12.7",
32-
"react": "^16.2.0",
33-
"react-dom": "^16.2.0",
34-
"style-loader": "^0.20.3",
35-
"webpack": "^4.17.1",
36-
"webpack-cli": "^3.1.2"
37-
},
38-
"scripts": {
39-
"test": "jest",
40-
"start": "webpack --watch",
41-
"build": "webpack"
42-
},
43-
"jest": {
44-
"verbose": true,
45-
"testURL": "http://localhost/"
46-
},
47-
"repository": {
48-
"type": "git",
49-
"url": "git+https://github.com/Aljullu/react-lazy-load-image-component.git"
50-
},
51-
"keywords": [
52-
"react",
53-
"react-component",
54-
"lazyload",
55-
"lazyloading",
56-
"lazy-loading",
57-
"lazyload-images"
58-
],
59-
"author": {
60-
"name": "Albert Juhé Lluveras",
61-
"email": "[email protected]"
62-
},
63-
"license": "MIT",
64-
"bugs": {
65-
"url": "https://github.com/Aljullu/react-lazy-load-image-component/issues"
66-
},
67-
"homepage": "https://github.com/Aljullu/react-lazy-load-image-component#readme"
2+
"name": "react-lazy-load-image-component",
3+
"version": "1.4.0-beta.1",
4+
"description": " React Component to lazy load images using a HOC to track window scroll position. ",
5+
"main": "build/index.js",
6+
"peerDependencies": {
7+
"react": "^15.x.x || ^16.x.x",
8+
"react-dom": "^15.x.x || ^16.x.x"
9+
},
10+
"dependencies": {
11+
"lodash.debounce": "^4.0.8",
12+
"lodash.throttle": "^4.1.1"
13+
},
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",
32+
"path": "^0.12.7",
33+
"prettier": "^1.19.1",
34+
"react": "^16.2.0",
35+
"react-dom": "^16.2.0",
36+
"style-loader": "^0.20.3",
37+
"webpack": "^4.17.1",
38+
"webpack-cli": "^3.1.2"
39+
},
40+
"scripts": {
41+
"test": "jest",
42+
"start": "webpack --watch",
43+
"build": "webpack",
44+
"prettier": "prettier --write \"**/*.{js,jsx,json}\"",
45+
"lint": "eslint src --ext=js,jsx"
46+
},
47+
"jest": {
48+
"verbose": true,
49+
"testURL": "http://localhost/"
50+
},
51+
"repository": {
52+
"type": "git",
53+
"url": "git+https://github.com/Aljullu/react-lazy-load-image-component.git"
54+
},
55+
"keywords": [
56+
"react",
57+
"react-component",
58+
"lazyload",
59+
"lazyloading",
60+
"lazy-loading",
61+
"lazyload-images"
62+
],
63+
"author": {
64+
"name": "Albert Juhé Lluveras",
65+
"email": "[email protected]"
66+
},
67+
"license": "MIT",
68+
"bugs": {
69+
"url": "https://github.com/Aljullu/react-lazy-load-image-component/issues"
70+
},
71+
"homepage": "https://github.com/Aljullu/react-lazy-load-image-component#readme",
72+
"husky": {
73+
"hooks": {
74+
"pre-commit": "npm run prettier && npm run lint"
75+
}
76+
}
6877
}

‎src/components/LazyLoadComponent.jsx

+102-82
Original file line numberDiff line numberDiff line change
@@ -6,94 +6,114 @@ import PlaceholderWithTracking from './PlaceholderWithTracking.jsx';
66
import isIntersectionObserverAvailable from '../utils/intersection-observer';
77

88
class LazyLoadComponent extends React.Component {
9-
constructor(props) {
10-
super(props);
11-
12-
const { afterLoad, beforeLoad, scrollPosition, visibleByDefault } = props;
13-
14-
this.state = {
15-
visible: visibleByDefault,
16-
};
17-
18-
if (visibleByDefault) {
19-
beforeLoad();
20-
afterLoad();
21-
}
22-
23-
this.onVisible = this.onVisible.bind(this);
24-
25-
this.isScrollTracked = Boolean(scrollPosition &&
26-
Number.isFinite(scrollPosition.x) && scrollPosition.x >= 0 &&
27-
Number.isFinite(scrollPosition.y) && scrollPosition.y >= 0);
28-
}
29-
30-
componentDidUpdate(prevProps, prevState) {
31-
if (prevState.visible !== this.state.visible) {
32-
this.props.afterLoad();
33-
}
34-
}
35-
36-
onVisible() {
37-
this.props.beforeLoad();
38-
this.setState({
39-
visible: true,
40-
});
41-
}
42-
43-
render() {
44-
if (this.state.visible) {
45-
return this.props.children;
46-
}
47-
48-
const { className, delayMethod, delayTime, height,
49-
placeholder, scrollPosition, style, threshold,
50-
useIntersectionObserver, width } = this.props;
51-
52-
if (
53-
this.isScrollTracked ||
54-
(useIntersectionObserver && isIntersectionObserverAvailable())
55-
) {
56-
return (
57-
<PlaceholderWithoutTracking
58-
className={className}
59-
height={height}
60-
onVisible={this.onVisible}
61-
placeholder={placeholder}
62-
scrollPosition={scrollPosition}
63-
style={style}
64-
threshold={threshold}
65-
useIntersectionObserver={useIntersectionObserver}
66-
width={width} />
67-
);
68-
}
69-
70-
return (
71-
<PlaceholderWithTracking
72-
className={className}
73-
delayMethod={delayMethod}
74-
delayTime={delayTime}
75-
height={height}
76-
onVisible={this.onVisible}
77-
placeholder={placeholder}
78-
style={style}
79-
threshold={threshold}
80-
width={width} />
81-
);
82-
}
9+
constructor(props) {
10+
super(props);
11+
12+
const {
13+
afterLoad,
14+
beforeLoad,
15+
scrollPosition,
16+
visibleByDefault,
17+
} = props;
18+
19+
this.state = {
20+
visible: visibleByDefault,
21+
};
22+
23+
if (visibleByDefault) {
24+
beforeLoad();
25+
afterLoad();
26+
}
27+
28+
this.onVisible = this.onVisible.bind(this);
29+
30+
this.isScrollTracked = Boolean(
31+
scrollPosition &&
32+
Number.isFinite(scrollPosition.x) &&
33+
scrollPosition.x >= 0 &&
34+
Number.isFinite(scrollPosition.y) &&
35+
scrollPosition.y >= 0
36+
);
37+
}
38+
39+
componentDidUpdate(prevProps, prevState) {
40+
if (prevState.visible !== this.state.visible) {
41+
this.props.afterLoad();
42+
}
43+
}
44+
45+
onVisible() {
46+
this.props.beforeLoad();
47+
this.setState({
48+
visible: true,
49+
});
50+
}
51+
52+
render() {
53+
if (this.state.visible) {
54+
return this.props.children;
55+
}
56+
57+
const {
58+
className,
59+
delayMethod,
60+
delayTime,
61+
height,
62+
placeholder,
63+
scrollPosition,
64+
style,
65+
threshold,
66+
useIntersectionObserver,
67+
width,
68+
} = this.props;
69+
70+
if (
71+
this.isScrollTracked ||
72+
(useIntersectionObserver && isIntersectionObserverAvailable())
73+
) {
74+
return (
75+
<PlaceholderWithoutTracking
76+
className={className}
77+
height={height}
78+
onVisible={this.onVisible}
79+
placeholder={placeholder}
80+
scrollPosition={scrollPosition}
81+
style={style}
82+
threshold={threshold}
83+
useIntersectionObserver={useIntersectionObserver}
84+
width={width}
85+
/>
86+
);
87+
}
88+
89+
return (
90+
<PlaceholderWithTracking
91+
className={className}
92+
delayMethod={delayMethod}
93+
delayTime={delayTime}
94+
height={height}
95+
onVisible={this.onVisible}
96+
placeholder={placeholder}
97+
style={style}
98+
threshold={threshold}
99+
width={width}
100+
/>
101+
);
102+
}
83103
}
84104

85105
LazyLoadComponent.propTypes = {
86-
afterLoad: PropTypes.func,
87-
beforeLoad: PropTypes.func,
88-
useIntersectionObserver: PropTypes.bool,
89-
visibleByDefault: PropTypes.bool,
106+
afterLoad: PropTypes.func,
107+
beforeLoad: PropTypes.func,
108+
useIntersectionObserver: PropTypes.bool,
109+
visibleByDefault: PropTypes.bool,
90110
};
91111

92112
LazyLoadComponent.defaultProps = {
93-
afterLoad: () => ({}),
94-
beforeLoad: () => ({}),
95-
useIntersectionObserver: true,
96-
visibleByDefault: false,
113+
afterLoad: () => ({}),
114+
beforeLoad: () => ({}),
115+
useIntersectionObserver: true,
116+
visibleByDefault: false,
97117
};
98118

99119
export default LazyLoadComponent;

0 commit comments

Comments
 (0)