Skip to content

Commit a267ac9

Browse files
javierbytejavierbyte
committed
Prettier linting and fix
1 parent eb01417 commit a267ac9

File tree

3 files changed

+94
-87
lines changed

3 files changed

+94
-87
lines changed

‎src/App.js‎

Lines changed: 69 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,119 +1,129 @@
1-
const React = require('react')
2-
const tinycolor = require('tinycolor2')
1+
const React = require('react');
2+
const tinycolor = require('tinycolor2');
33

4-
const _ = require('lodash')
5-
const Dropzone = require('react-dropzone')
4+
const _ = require('lodash');
5+
const Dropzone = require('react-dropzone');
66

7-
const {base64ImageToRGBMatrix} = require('base64-image-utils')
7+
const { base64ImageToRGBMatrix } = require('base64-image-utils');
88

9-
function compressColor (rgb) {
10-
const hex = tinycolor(rgb).toHexString()
9+
function compressColor(rgb) {
10+
const hex = tinycolor(rgb).toHexString();
1111

1212
switch (hex) { // based on CSS3 supported color names http://www.w3.org/TR/css3-color/
13-
case '#c0c0c0': return 'silver'
14-
case '#808080': return 'gray'
15-
case '#800000': return 'maroon'
16-
case '#ff0000': return 'red'
17-
case '#800080': return 'purple'
18-
case '#008000': return 'green'
19-
case '#808000': return 'olive'
20-
case '#000080': return 'navy'
21-
case '#008080': return 'teal'
13+
case '#c0c0c0':
14+
return 'silver';
15+
case '#808080':
16+
return 'gray';
17+
case '#800000':
18+
return 'maroon';
19+
case '#ff0000':
20+
return 'red';
21+
case '#800080':
22+
return 'purple';
23+
case '#008000':
24+
return 'green';
25+
case '#808000':
26+
return 'olive';
27+
case '#000080':
28+
return 'navy';
29+
case '#008080':
30+
return 'teal';
2231
}
23-
return hex[1] === hex[2] && hex[3] === hex[4] && hex[5] === hex[6] ? '#' + hex[1] + hex[3] + hex[5] : hex
32+
return hex[1] === hex[2] && hex[3] === hex[4] && hex[5] === hex[6] ? '#' + hex[1] + hex[3] + hex[5] : hex;
2433
}
2534

2635
var App = React.createClass({
27-
28-
getInitialState () {
36+
getInitialState() {
2937
return {
3038
rgbArray: null,
3139
loadingImage: false
32-
}
40+
};
3341
},
3442

35-
onDrop (files) {
36-
var file = files[0]
37-
var fr = new window.FileReader()
43+
onDrop(files) {
44+
var file = files[0];
45+
var fr = new window.FileReader();
3846

3947
if (window.ga) {
40-
window.ga('send', 'event', 'button', 'click', 'img2css execute')
48+
window.ga('send', 'event', 'button', 'click', 'img2css execute');
4149
}
4250

4351
this.setState({
4452
loadingImage: true
45-
})
53+
});
4654

47-
fr.onload = (data) => {
48-
const base64 = data.currentTarget.result
55+
fr.onload = data => {
56+
const base64 = data.currentTarget.result;
4957

5058
if (base64.length > 100000) {
51-
let confirmation = window.confirm('Your image is really big, do you really want to try to convert it?')
59+
let confirmation = window.confirm('Your image is really big, do you really want to try to convert it?');
5260

5361
if (!confirmation) {
5462
this.setState({
5563
loadingImage: false
56-
})
57-
return
64+
});
65+
return;
5866
}
5967
}
6068

6169
base64ImageToRGBMatrix(base64, (err, data) => {
62-
if (err) return console.error(err)
70+
if (err) return console.error(err);
6371

6472
this.setState({
6573
rgbMatrix: data,
6674
loadingImage: false
67-
})
68-
})
69-
}
70-
fr.readAsDataURL(file)
75+
});
76+
});
77+
};
78+
fr.readAsDataURL(file);
7179
},
7280

73-
render () {
74-
var {rgbMatrix, loadingImage} = this.state
81+
render() {
82+
var { rgbMatrix, loadingImage } = this.state;
7583

7684
var masterShadow = _.map(rgbMatrix, (row, rowIndex) => {
7785
return _.map(row, (col, colIndex) => {
78-
var color = compressColor(`rgb(${col.r},${col.g},${col.b})`)
86+
var color = compressColor(`rgb(${col.r},${col.g},${col.b})`);
7987

80-
return `${color} ${colIndex ? colIndex + 'px' : 0} ${rowIndex ? rowIndex + 'px' : 0}`
81-
}).join(',')
82-
}).join(',')
88+
return `${color} ${colIndex ? colIndex + 'px' : 0} ${rowIndex ? rowIndex + 'px' : 0}`;
89+
}).join(',');
90+
}).join(',');
8391

8492
return (
85-
<div className='padding-horizontal-2x'>
93+
<div className="padding-horizontal-2x">
8694

87-
<Dropzone onDrop={this.onDrop} className='dropZone'>
95+
<Dropzone onDrop={this.onDrop} className="dropZone">
8896
{loadingImage ? 'Processing...' : 'Drop an image here, or click to upload.'}
8997
</Dropzone>
9098

91-
{rgbMatrix && (
99+
{rgbMatrix &&
92100
<div>
93-
<div className='tutorial'>
101+
<div className="tutorial">
94102
This is your pure css (and single div) image! Enjoy! {masterShadow.length.toLocaleString()}b
95103
</div>
96104

97-
<div className='pixel' style={{
98-
height: 1,
99-
width: 1,
100-
boxShadow: masterShadow,
101-
marginBottom: rgbMatrix.length
102-
}} />
103-
104-
<div className='tutorial'>
105+
<div
106+
className="pixel"
107+
style={{
108+
height: 1,
109+
width: 1,
110+
boxShadow: masterShadow,
111+
marginBottom: rgbMatrix.length
112+
}}
113+
/>
114+
115+
<div className="tutorial">
105116
The code:
106117
</div>
107118

108-
<div className='code'>
119+
<div className="code">
109120
{`<div style="height: 1px; width: 1px; box-shadow: ${masterShadow}"></div>`}
110121
</div>
111-
</div>
112-
)}
122+
</div>}
113123

114124
</div>
115-
)
125+
);
116126
}
117-
})
127+
});
118128

119-
module.exports = App
129+
module.exports = App;

‎src/components/ImageAsCanvas.js‎

Lines changed: 21 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,43 @@
1-
import React from 'react'
1+
import React from 'react';
22

33
var ImageAsCanvas = React.createClass({
4-
54
propTypes: {
65
base64image: React.PropTypes.string
76
},
87

9-
shouldComponentUpdate (nextProps) {
10-
return nextProps.base64image !== this.props.base64image
8+
shouldComponentUpdate(nextProps) {
9+
return nextProps.base64image !== this.props.base64image;
1110
},
1211

13-
componentDidMount () {
14-
if (this.props.base64image) this._loadImageToCanvas()
12+
componentDidMount() {
13+
if (this.props.base64image) this._loadImageToCanvas();
1514
},
1615

17-
componentDidUpdate () {
18-
this._loadImageToCanvas()
16+
componentDidUpdate() {
17+
this._loadImageToCanvas();
1918
},
2019

21-
_loadImageToCanvas () {
22-
var img = new window.Image()
20+
_loadImageToCanvas() {
21+
var img = new window.Image();
2322
img.onload = () => {
24-
var canvas = React.findDOMNode(this.refs.canvas)
25-
canvas.width = img.width
26-
canvas.height = img.height
27-
var ctx = canvas.getContext('2d')
28-
ctx.drawImage(img, 0, 0)
23+
var canvas = React.findDOMNode(this.refs.canvas);
24+
canvas.width = img.width;
25+
canvas.height = img.height;
26+
var ctx = canvas.getContext('2d');
27+
ctx.drawImage(img, 0, 0);
2928

30-
console.warn(ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height))
29+
console.warn(ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height));
3130

3231
// do some manipulations...
3332

3433
// canvas.toDataURL('image/png')
35-
}
36-
img.src = this.props.base64image
34+
};
35+
img.src = this.props.base64image;
3736
},
3837

39-
render () {
40-
return (
41-
<canvas ref='canvas' />
42-
)
38+
render() {
39+
return <canvas ref="canvas" />;
4340
}
44-
})
41+
});
4542

46-
module.exports = ImageAsCanvas
43+
module.exports = ImageAsCanvas;

‎src/index.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
const React = require('react')
2-
const ReactDOM = require('react-dom')
3-
const App = require('./App')
1+
const React = require('react');
2+
const ReactDOM = require('react-dom');
3+
const App = require('./App');
44

5-
ReactDOM.render(<App />, document.getElementById('root'))
5+
ReactDOM.render(<App />, document.getElementById('root'));

0 commit comments

Comments
 (0)