Skip to content

Commit 6f7e55f

Browse files
danilowozdanilowoz
committed
Prettier and add esnext field, close #8 
1 parent 58bca3f commit 6f7e55f

File tree

10 files changed

+181
-168
lines changed

10 files changed

+181
-168
lines changed

‎package-lock.json‎

Lines changed: 18 additions & 18 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
},
99
"author": "Danilo Woznica",
1010
"license": "MIT",
11+
"jsnext:main": "index",
1112
"bugs": {
1213
"url": "https://github.com/danilowoz/react-content-loader/issues"
1314
},
@@ -35,6 +36,7 @@
3536
"build-storybook": "build-storybook"
3637
},
3738
"devDependencies": {
39+
"@storybook/react": "^3.1.9",
3840
"babel-cli": "^6.6.4",
3941
"babel-core": "^6.7.4",
4042
"babel-eslint": "^6.0.2",
@@ -52,13 +54,13 @@
5254
"jsdom": "^8.1.0",
5355
"mocha": "^2.4.5",
5456
"nodemon": "^1.9.1",
57+
"prettier": "^1.6.1",
5558
"prop-types": "^15.5.10",
5659
"react": "^15.0.0",
5760
"react-addons-test-utils": "^15.0.0",
5861
"react-dom": "^15.0.0",
5962
"sinon": "^1.17.3",
60-
"uuid": "^3.0.1",
61-
"@storybook/react": "^3.1.9"
63+
"uuid": "^3.0.1"
6264
},
6365
"peerDependencies": {
6466
"react": "~0.14.8 || ^15.0.0",

‎src/Wrap.js‎

Lines changed: 50 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,58 @@
11
import React from 'react'
2-
import uuid from 'uuid';
2+
import uuid from 'uuid'
33

4-
const Wrap = (props) => {
4+
const Wrap = props => {
5+
let idClip = uuid.v1()
6+
let idGradient = uuid.v1()
57

6-
let idClip = uuid.v1()
7-
let idGradient = uuid.v1()
8+
return (
9+
<svg
10+
viewBox={`0 0 ${props.width} ${props.height}`}
11+
version="1.1"
12+
style={props.style}
13+
preserveAspectRatio="xMidYMid meet"
14+
>
15+
<rect
16+
style={{ fill: `url(#${idGradient})` }}
17+
clipPath={`url(#${idClip})`}
18+
x="0"
19+
y="0"
20+
width={props.width}
21+
height={props.height}
22+
/>
823

9-
return (
10-
<svg viewBox={`0 0 ${props.width} ${props.height}`} version="1.1" style={props.style} preserveAspectRatio="xMidYMid meet">
11-
<rect style={{fill: `url(#${idGradient})`}} clipPath={`url(#${idClip})`} x="0" y="0" width={props.width} height={props.height} />
24+
<defs>
25+
<clipPath id={`${idClip}`}>{props.children}</clipPath>
1226

13-
<defs>
14-
<clipPath id={`${idClip}`}>
15-
{ props.children }
16-
</clipPath>
17-
18-
<linearGradient id={`${idGradient}`}>
19-
<stop offset="0%" stopColor={props.primaryColor}>
20-
<animate attributeName="offset" values="-2; 1" dur={`${props.speed}s`} repeatCount="indefinite" />
21-
</stop>
22-
<stop offset="50%" stopColor={props.secondaryColor}>
23-
<animate attributeName="offset" values="-1.5; 1.5" dur={`${props.speed}s`} repeatCount="indefinite" />
24-
</stop>
25-
<stop offset="100%" stopColor={props.primaryColor}>
26-
<animate attributeName="offset" values="-1; 2" dur={`${props.speed}s`} repeatCount="indefinite" />
27-
</stop>
28-
</linearGradient>
29-
</defs>
30-
</svg>
31-
)
27+
<linearGradient id={`${idGradient}`}>
28+
<stop offset="0%" stopColor={props.primaryColor}>
29+
<animate
30+
attributeName="offset"
31+
values="-2; 1"
32+
dur={`${props.speed}s`}
33+
repeatCount="indefinite"
34+
/>
35+
</stop>
36+
<stop offset="50%" stopColor={props.secondaryColor}>
37+
<animate
38+
attributeName="offset"
39+
values="-1.5; 1.5"
40+
dur={`${props.speed}s`}
41+
repeatCount="indefinite"
42+
/>
43+
</stop>
44+
<stop offset="100%" stopColor={props.primaryColor}>
45+
<animate
46+
attributeName="offset"
47+
values="-1; 2"
48+
dur={`${props.speed}s`}
49+
repeatCount="indefinite"
50+
/>
51+
</stop>
52+
</linearGradient>
53+
</defs>
54+
</svg>
55+
)
3256
}
3357

3458
export default Wrap

‎src/custom/Circle.js‎

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

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

8-
export default Circle
8+
export default Circle

‎src/custom/Rect.js‎

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

3-
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} />
3+
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} />
66
}
77

8-
export default Rect
8+
export default Rect

‎src/index.js‎

Lines changed: 54 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -12,79 +12,66 @@ import Rect from './custom/Rect'
1212
import Circle from './custom/Circle'
1313

1414
class ContentLoader extends Component {
15-
16-
constructor(props) {
17-
super(props)
18-
19-
this.state = {
20-
style: props.style,
21-
type: props.type,
22-
speed: props.speed,
23-
width: props.width,
24-
height: props.height,
25-
primaryColor: props.primaryColor,
26-
secondaryColor: props.secondaryColor
27-
}
28-
}
29-
30-
render() {
31-
32-
if (this.props.children) {
33-
34-
return (
35-
<Wrap {...this.state}>
36-
{ this.props.children }
37-
</Wrap>
38-
)
39-
40-
}
41-
42-
if (!this.props.children) {
43-
44-
switch (this.state.type.toLowerCase()) {
45-
46-
case 'instagram':
47-
return <InstagramStyle {...this.state} />
48-
break
49-
50-
case 'code':
51-
return <CodeStyle {...this.state} />
52-
break
53-
54-
case 'list':
55-
return <ListStyle {...this.state} />
56-
break
57-
58-
default:
59-
case 'facebook':
60-
return <FacebookStyle {...this.state} />
61-
break
62-
63-
}
64-
65-
}
66-
67-
}
15+
constructor(props) {
16+
super(props)
17+
18+
this.state = {
19+
style: props.style,
20+
type: props.type,
21+
speed: props.speed,
22+
width: props.width,
23+
height: props.height,
24+
primaryColor: props.primaryColor,
25+
secondaryColor: props.secondaryColor,
26+
}
27+
}
28+
29+
render() {
30+
if (this.props.children) {
31+
return <Wrap {...this.state}>{this.props.children}</Wrap>
32+
}
33+
34+
if (!this.props.children) {
35+
switch (this.state.type.toLowerCase()) {
36+
case 'instagram':
37+
return <InstagramStyle {...this.state} />
38+
break
39+
40+
case 'code':
41+
return <CodeStyle {...this.state} />
42+
break
43+
44+
case 'list':
45+
return <ListStyle {...this.state} />
46+
break
47+
48+
default:
49+
case 'facebook':
50+
return <FacebookStyle {...this.state} />
51+
break
52+
}
53+
}
54+
}
6855
}
6956

7057
ContentLoader.propTypes = {
71-
style: PropTypes.object,
72-
type: PropTypes.string,
73-
speed: PropTypes.number,
74-
width: PropTypes.number,
75-
height: PropTypes.number,
76-
primaryColor: PropTypes.string,
77-
secondaryColor: PropTypes.string
58+
style: PropTypes.object,
59+
type: PropTypes.string,
60+
speed: PropTypes.number,
61+
width: PropTypes.number,
62+
height: PropTypes.number,
63+
primaryColor: PropTypes.string,
64+
secondaryColor: PropTypes.string,
7865
}
7966

8067
ContentLoader.defaultProps = {
81-
type: 'facebook',
82-
speed: 2,
83-
width: 400,
84-
height: 130,
85-
primaryColor: '#f0f0f0',
86-
secondaryColor: '#e0e0e0'
68+
type: 'facebook',
69+
speed: 2,
70+
width: 400,
71+
height: 130,
72+
primaryColor: '#f0f0f0',
73+
secondaryColor: '#e0e0e0',
8774
}
8875

8976
export default ContentLoader
90-
export { Rect, Circle }
77+
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

0 commit comments

Comments
 (0)