Skip to content

Commit eac753d

Browse files
danilowozdanilowoz
authored
Lint (#3)
1 parent c04399b commit eac753d

File tree

8 files changed

+94
-95
lines changed

8 files changed

+94
-95
lines changed

‎package.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,12 @@
1313
},
1414
"homepage": "https://github.com/danilowoz/react-content-loader",
1515
"keywords": [
16-
"react-component",
1716
"react",
17+
"facebook-style",
1818
"loader",
19-
"content"
19+
"loading",
20+
"content",
21+
"svg"
2022
],
2123
"options": {
2224
"mocha": "--require scripts/mocha_runner src/**/__tests__/**/*.js"

‎src/Wrap.js‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
import React from 'react'
22

3-
const Wrap = (props) => {
3+
const generateId = () => {
4+
const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
5+
let text = ''
46

5-
const generateId = () => {
6-
const possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"
7-
let text = ""
7+
for (let i = 0; i < 10; i++)
8+
text += possible.charAt(Math.floor(Math.random() * possible.length))
89

9-
for( let i = 0; i < 10; i++ )
10-
text += possible.charAt(Math.floor(Math.random() * possible.length))
10+
return text
11+
}
1112

12-
return text
13-
}
13+
const Wrap = (props) => {
1414

1515
let idClip = generateId()
1616
let idGradient = generateId()
1717

18-
return(
18+
return (
1919
<svg viewBox={`0 0 400 ${props.height}`} version="1.1" style={props.style} preserveAspectRatio="xMidYMid meet">
2020
<rect style={{fill: `url(#${idGradient})`}} clipPath={`url(#${idClip})`} x="0" y="0" width="400" height={props.height} />
2121

@@ -41,3 +41,4 @@ const Wrap = (props) => {
4141
}
4242

4343
export default Wrap
44+
export { generateId }

‎src/custom/Circle.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from 'react';
22

33
const Circle = (props) => {
4-
const { x = 0, y = 0, radius = 50 } = props
5-
return <circle cx={x} cy={y} r={radius} />
4+
const { x = 0, y = 0, radius = 50 } = props
5+
return <circle cx={x} cy={y} r={radius} />
66
}
77

88
export default Circle

‎src/custom/Rect.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from 'react';
22

33
const Rect = (props) => {
4-
const { x = 0, y = 0, radius = 0, width = 50, height = 50 } = props
5-
return <rect x={x} y={y} rx={radius} ry={radius} width={width} height={height} />
4+
const { x = 0, y = 0, radius = 0, width = 50, height = 50 } = props
5+
return <rect x={x} y={y} rx={radius} ry={radius} width={width} height={height} />
66
}
77

88
export default Rect

‎src/index.js‎

Lines changed: 42 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -11,66 +11,62 @@ import Circle from './custom/Circle'
1111

1212
class ContentLoader extends Component {
1313

14-
constructor(props) {
15-
super(props)
16-
17-
this.state = {
18-
style: props.style,
19-
type: props.type || 'facebook',
20-
speed: props.speed || 2,
21-
height: props.height ||130,
22-
primaryColor: props.primaryColor || '#f0f0f0',
23-
secondaryColor: props.secondaryColor || '#e0e0e0'
14+
constructor(props) {
15+
super(props)
16+
17+
this.state = {
18+
style: props.style,
19+
type: props.type || 'facebook',
20+
speed: props.speed || 2,
21+
height: props.height ||130,
22+
primaryColor: props.primaryColor || '#f0f0f0',
23+
secondaryColor: props.secondaryColor || '#e0e0e0'
24+
}
2425
}
25-
}
2626

27-
render() {
27+
render() {
2828

29-
if( this.props.children ) {
29+
if (this.props.children) {
3030

31-
return(
32-
<Wrap {...this.state}>
33-
{ this.props.children }
34-
</Wrap>
35-
)
31+
return (
32+
<Wrap {...this.state}>
33+
{ this.props.children }
34+
</Wrap>
35+
)
3636

37-
} else {
37+
}
38+
if (!this.props.children) {
3839

39-
switch(this.state.type.toLowerCase()) {
40+
switch (this.state.type.toLowerCase()) {
4041

41-
case 'instagram':
42-
return <InstagramStyle {...this.state} />
43-
break
42+
case 'instagram':
43+
return <InstagramStyle {...this.state} />
44+
break
4445

45-
case 'code':
46-
return <CodeStyle {...this.state} />
47-
break
46+
case 'code':
47+
return <CodeStyle {...this.state} />
48+
break
4849

49-
default:
50-
case 'facebook':
51-
return <FacebookStyle {...this.state} />
52-
break
53-
}
50+
default:
51+
case 'facebook':
52+
return <FacebookStyle {...this.state} />
53+
break
5454

55-
}
55+
}
56+
57+
}
5658

57-
}
59+
}
5860
}
5961

6062
ContentLoader.propTypes = {
61-
style: React.PropTypes.object,
62-
type: React.PropTypes.string,
63-
speed: React.PropTypes.number,
64-
height: React.PropTypes.number,
65-
primaryColor: React.PropTypes.string,
66-
secondaryColor: React.PropTypes.string
63+
style: React.PropTypes.object,
64+
type: React.PropTypes.string,
65+
speed: React.PropTypes.number,
66+
height: React.PropTypes.number,
67+
primaryColor: React.PropTypes.string,
68+
secondaryColor: React.PropTypes.string
6769
}
6870

6971
export default ContentLoader
70-
export { Rect, Circle }
71-
72-
73-
74-
75-
76-
72+
export { Rect, Circle }

‎src/stylized/CodeStyle.js‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
import React from 'react'
22
import Wrap from '../Wrap'
33

4-
const CodeStyle = (props ) => {
5-
return(
6-
<Wrap {...props}>
7-
<rect x="0" y="0" rx="3" ry="3" width="70" height="10" />
8-
<rect x="80" y="0" rx="3" ry="3" width="100" height="10" />
9-
<rect x="190" y="0" rx="3" ry="3" width="10" height="10" />
4+
const CodeStyle = (props) => {
5+
return (
6+
<Wrap {...props}>
7+
<rect x="0" y="0" rx="3" ry="3" width="70" height="10" />
8+
<rect x="80" y="0" rx="3" ry="3" width="100" height="10" />
9+
<rect x="190" y="0" rx="3" ry="3" width="10" height="10" />
1010

11-
<rect x="15" y="20" rx="3" ry="3" width="130" height="10" />
12-
<rect x="155" y="20" rx="3" ry="3" width="130" height="10" />
11+
<rect x="15" y="20" rx="3" ry="3" width="130" height="10" />
12+
<rect x="155" y="20" rx="3" ry="3" width="130" height="10" />
1313

14-
<rect x="15" y="40" rx="3" ry="3" width="90" height="10" />
15-
<rect x="115" y="40" rx="3" ry="3" width="60" height="10" />
16-
<rect x="185" y="40" rx="3" ry="3" width="60" height="10" />
14+
<rect x="15" y="40" rx="3" ry="3" width="90" height="10" />
15+
<rect x="115" y="40" rx="3" ry="3" width="60" height="10" />
16+
<rect x="185" y="40" rx="3" ry="3" width="60" height="10" />
1717

18-
<rect x="0" y="60" rx="3" ry="3" width="30" height="10" />
19-
</Wrap>
20-
)
18+
<rect x="0" y="60" rx="3" ry="3" width="30" height="10" />
19+
</Wrap>
20+
)
2121
}
2222

2323
export default CodeStyle

‎src/stylized/FacebookStyle.js‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
import React from 'react'
22
import Wrap from '../Wrap'
33

4-
const FacebookStyle = (props ) => {
5-
return(
6-
<Wrap {...props}>
7-
<rect x="0" y="0" rx="5" ry="5" width="70" height="70" />
4+
const FacebookStyle = (props) => {
5+
return (
6+
<Wrap {...props}>
7+
<rect x="0" y="0" rx="5" ry="5" width="70" height="70" />
88

9-
<rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
10-
<rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
9+
<rect x="80" y="17" rx="4" ry="4" width="300" height="13" />
10+
<rect x="80" y="40" rx="3" ry="3" width="250" height="10" />
1111

12-
<rect x="0" y="80" rx="3" ry="3" width="350" height="10" />
13-
<rect x="0" y="100" rx="3" ry="3" width="400" height="10" />
14-
<rect x="0" y="120" rx="3" ry="3" width="360" height="10" />
15-
</Wrap>
16-
)
12+
<rect x="0" y="80" rx="3" ry="3" width="350" height="10" />
13+
<rect x="0" y="100" rx="3" ry="3" width="400" height="10" />
14+
<rect x="0" y="120" rx="3" ry="3" width="360" height="10" />
15+
</Wrap>
16+
)
1717
}
1818

1919
export default FacebookStyle

‎src/stylized/InstagramStyle.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
import React from 'react'
22
import Wrap from '../Wrap'
33

4-
const InstagramStyle = (props ) => {
5-
return(
6-
<Wrap {...props} height="480">
7-
<circle cx="30" cy="30" r="30" />
4+
const InstagramStyle = (props) => {
5+
return (
6+
<Wrap {...props} height="480">
7+
<circle cx="30" cy="30" r="30" />
88

9-
<rect x="75" y="13" rx="4" ry="4" width="100" height="13" />
10-
<rect x="75" y="37" rx="4" ry="4" width="50" height="8" />
11-
<rect x="0" y="70" rx="5" ry="5" width="400" height="400" />
12-
</Wrap>
13-
)
9+
<rect x="75" y="13" rx="4" ry="4" width="100" height="13" />
10+
<rect x="75" y="37" rx="4" ry="4" width="50" height="8" />
11+
<rect x="0" y="70" rx="5" ry="5" width="400" height="400" />
12+
</Wrap>
13+
)
1414
}
1515

1616
export default InstagramStyle

0 commit comments

Comments
 (0)