Skip to content

Commit

Permalink
add prettier, cleanup project
Browse files Browse the repository at this point in the history
  • Loading branch information
@mosch
mosch committed Mar 9, 2018
1 parent 9cd5a9e commit 23b375e
Show file tree
Hide file tree
Showing 14 changed files with 886 additions and 699 deletions.
1 change: 1 addition & 0 deletions .eslintcache
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{"/Users/mschwoerer/Develop/react-avatar-editor/src/utils/parse-dom.js":{"size":730,"mtime":1501066011000,"hashOfConfig":"3xjyed","results":{"filePath":"/Users/mschwoerer/Develop/react-avatar-editor/src/utils/parse-dom.js","messages":[],"errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0}},"/Users/mschwoerer/Develop/react-avatar-editor/src/utils/parse-dom.test.js":{"size":1164,"mtime":1501066011000,"hashOfConfig":"3xjyed","results":{"filePath":"/Users/mschwoerer/Develop/react-avatar-editor/src/utils/parse-dom.test.js","messages":[],"errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0}},"/Users/mschwoerer/Develop/react-avatar-editor/webpack.config.js":{"size":462,"mtime":1520589179850,"hashOfConfig":"3xjyed","results":{"filePath":"/Users/mschwoerer/Develop/react-avatar-editor/webpack.config.js","messages":[],"errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0}},"/Users/mschwoerer/Develop/react-avatar-editor/src/utils/retrieve-image-url.test.js":{"size":3113,"mtime":1520589196237,"hashOfConfig":"3xjyed","results":{"filePath":"/Users/mschwoerer/Develop/react-avatar-editor/src/utils/retrieve-image-url.test.js","messages":[],"errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0}},"/Users/mschwoerer/Develop/react-avatar-editor/src/utils/load-image-url.js":{"size":579,"mtime":1520589280543,"hashOfConfig":"3xjyed","results":{"filePath":"/Users/mschwoerer/Develop/react-avatar-editor/src/utils/load-image-url.js","messages":[],"errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0}},"/Users/mschwoerer/Develop/react-avatar-editor/src/utils/load-image-file.js":{"size":422,"mtime":1520589296890,"hashOfConfig":"3xjyed","results":{"filePath":"/Users/mschwoerer/Develop/react-avatar-editor/src/utils/load-image-file.js","messages":[],"errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0}},"/Users/mschwoerer/Develop/react-avatar-editor/src/utils/retrieve-image-url.js":{"size":725,"mtime":1520589316553,"hashOfConfig":"3xjyed","results":{"filePath":"/Users/mschwoerer/Develop/react-avatar-editor/src/utils/retrieve-image-url.js","messages":[],"errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0}},"/Users/mschwoerer/Develop/react-avatar-editor/rollup.config.js":{"size":878,"mtime":1520589379433,"hashOfConfig":"3xjyed","results":{"filePath":"/Users/mschwoerer/Develop/react-avatar-editor/rollup.config.js","messages":[],"errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0}},"/Users/mschwoerer/Develop/react-avatar-editor/src/index.js":{"size":16857,"mtime":1520589468526,"hashOfConfig":"3xjyed","results":{"filePath":"/Users/mschwoerer/Develop/react-avatar-editor/src/index.js","messages":[],"errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0}},"/Users/mschwoerer/Develop/react-avatar-editor/docs/javascripts/scale.fix.js":{"size":569,"mtime":1520589529287,"hashOfConfig":"3xjyed","results":{"filePath":"/Users/mschwoerer/Develop/react-avatar-editor/docs/javascripts/scale.fix.js","messages":[],"errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0}},"/Users/mschwoerer/Develop/react-avatar-editor/docs/App.jsx":{"size":6223,"mtime":1520589687096,"hashOfConfig":"3xjyed","results":{"filePath":"/Users/mschwoerer/Develop/react-avatar-editor/docs/App.jsx","messages":[],"errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0}},"/Users/mschwoerer/Develop/react-avatar-editor/docs/Preview.jsx":{"size":1795,"mtime":1520589854848,"hashOfConfig":"3xjyed","results":{"filePath":"/Users/mschwoerer/Develop/react-avatar-editor/docs/Preview.jsx","messages":[],"errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0}}}
55 changes: 55 additions & 0 deletions .eslintrc
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
{
"extends": [
"standard",
"plugin:react/recommended",
"prettier",
"prettier/react"
],
"globals": {
"React": true,
"describe": true,
"expect": true,
"it": true,
"jest": true,
"mockStore": true,
"mount": true,
"mountIntl": true,
"shallow": true,
"shallowIntl": true
},
"parser": "babel-eslint",
"plugins": ["import", "react"],
"rules": {
"comma-dangle": [2, "always-multiline"],
"generator-star-spacing": 0,
"import/export": 2,
"jsx-quotes": [2, "prefer-double"],
"no-console": 2,
"no-return-assign": 0,
"no-unused-expressions": 0,
"react/jsx-curly-spacing": [2, "never"],
"react/jsx-first-prop-new-line": [2, "multiline-multiprop"],
"react/jsx-indent-props": 0,
"react/jsx-no-bind": 0,
"react/no-array-index-key": 2,
"react/no-multi-comp": [
"warn",
{
"ignoreStateless": true
}
],
"react/self-closing-comp": [
"error",
{
"component": true,
"html": true
}
],
"react/sort-comp": 2,
"react/no-render-return-value": 0,
"space-before-function-paren": 0,
"standard/computed-property-even-spacing": 0,
"no-var": 2,
"prefer-const": 2
}
}
164 changes: 48 additions & 116 deletions docs/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from 'react'
import ReactDOM from 'react-dom'
import ReactAvatarEditor from '../src/index'
import Dropzone from 'react-dropzone'
import Preview from './Preview.jsx'
class App extends React.Component {
state = {
image: 'avatar.jpg',
Expand All @@ -12,7 +13,7 @@ class App extends React.Component {
borderRadius: 0,
preview: null,
width: 200,
height: 200
height: 200,
}

handleNewImage = e => {
Expand All @@ -30,8 +31,8 @@ class App extends React.Component {
scale: this.state.scale,
width: this.state.width,
height: this.state.height,
borderRadius: this.state.borderRadius
}
borderRadius: this.state.borderRadius,
},
})
}

Expand All @@ -48,14 +49,14 @@ class App extends React.Component {
e.preventDefault()

this.setState({
rotate: this.state.rotate - 90
rotate: this.state.rotate - 90,
})
}

rotateRight = e => {
e.preventDefault()
this.setState({
rotate: this.state.rotate + 90
rotate: this.state.rotate + 90,
})
}

Expand Down Expand Up @@ -84,7 +85,8 @@ class App extends React.Component {
this.setState({ height })
}

logCallback (e) {
logCallback(e) {
// eslint-disable-next-line
console.log('callback', e)
}

Expand All @@ -100,12 +102,13 @@ class App extends React.Component {
this.setState({ image: acceptedFiles[0] })
}

render () {
render() {
return (
<div>
<Dropzone
onDrop={this.handleDrop}
disableClick
multiple={false}
style={{ width: '250px', height: '250px' }}
>
<div>
Expand All @@ -129,79 +132,79 @@ class App extends React.Component {
</Dropzone>
<br />
New File:
<input name='newImage' type='file' onChange={this.handleNewImage} />
<input name="newImage" type="file" onChange={this.handleNewImage} />
<br />
Zoom:
<input
name='scale'
type='range'
name="scale"
type="range"
onChange={this.handleScale}
min={this.state.allowZoomOut ? '0.1' : '1'}
max='2'
step='0.01'
defaultValue='1'
max="2"
step="0.01"
defaultValue="1"
/>
<br />
{'Allow Scale < 1'}
<input
name='allowZoomOut'
type='checkbox'
name="allowZoomOut"
type="checkbox"
onChange={this.handleAllowZoomOut}
checked={this.state.allowZoomOut}
/>
<br />
Border radius:
<input
name='scale'
type='range'
name="scale"
type="range"
onChange={this.handleBorderRadius}
min='0'
max='100'
step='1'
defaultValue='0'
min="0"
max="100"
step="1"
defaultValue="0"
/>
<br />
Avatar Width:
<input
name='width'
type='number'
name="width"
type="number"
onChange={this.handleWidth}
min='50'
max='400'
step='10'
min="50"
max="400"
step="10"
value={this.state.width}
/>
<br />
Avatar Height:
<input
name='height'
type='number'
name="height"
type="number"
onChange={this.handleHeight}
min='50'
max='400'
step='10'
min="50"
max="400"
step="10"
value={this.state.height}
/>
<br />
X Position:
<input
name='scale'
type='range'
name="scale"
type="range"
onChange={this.handleXPosition}
min='0'
max='1'
step='0.01'
min="0"
max="1"
step="0.01"
value={this.state.position.x}
/>
<br />
Y Position:
<input
name='scale'
type='range'
name="scale"
type="range"
onChange={this.handleYPosition}
min='0'
max='1'
step='0.01'
min="0"
max="1"
step="0.01"
value={this.state.position.y}
/>
<br />
Expand All @@ -210,7 +213,7 @@ class App extends React.Component {
<button onClick={this.rotateRight}>Right</button>
<br />
<br />
<input type='button' onClick={this.handleSave} value='Preview' />
<input type="button" onClick={this.handleSave} value="Preview" />
<br />
{!!this.state.preview && (
<img
Expand All @@ -221,25 +224,20 @@ class App extends React.Component {
this.state.preview.width
) +
10) *
(this.state.preview.borderRadius / 2 / 100)}px`
(this.state.preview.borderRadius / 2 / 100)}px`,
}}
/>
)}
{!!this.state.preview && (
<ImageWithRect
<Preview
width={
this.state.preview.scale < 1
? this.state.preview.width
: this.state.preview.height * 478 / 270
}
height={this.state.preview.height}
image='avatar.jpg'
image="avatar.jpg"
rect={this.state.preview.rect}
style={{
margin: '10px 24px 32px',
padding: 5,
border: '1px solid #CCC'
}}
/>
)}
</div>
Expand All @@ -248,71 +246,5 @@ class App extends React.Component {
}

// Used to display the cropping rect
class ImageWithRect extends React.Component {
componentDidMount () {
this.redraw()
}

componentDidUpdate () {
this.redraw()
}

setCanvas = canvas => {
if (canvas) this.canvas = canvas
}

handleImageLoad = () => {
const ctx = this.canvas.getContext('2d')
const { rect, width, height } = this.props

ctx.clearRect(0, 0, width, height)

ctx.strokeStyle = 'red'

if (rect && (rect.width > 1 || rect.height > 1)) {
ctx.drawImage(
this.imgElement,
Math.round(-rect.x * (width / rect.width)),
Math.round(-rect.y * (height / rect.height)),
Math.round(width / rect.width),
Math.round(height / rect.height)
)

if (rect) {
ctx.strokeRect(1, 1, Math.round(width) - 2, Math.round(height) - 2)
}
} else {
ctx.drawImage(this.imgElement, 0, 0, width, height)

if (rect) {
ctx.strokeRect(
Math.round(rect.x * width) + 0.5,
Math.round(rect.y * height) + 0.5,
Math.round(rect.width * width),
Math.round(rect.height * height)
)
}
}
}

redraw () {
const img = new Image()

img.src = this.props.image
img.onload = this.handleImageLoad
this.imgElement = img
}

render () {
return (
<canvas
ref={this.setCanvas}
style={this.props.style}
width={this.props.width}
height={this.props.height}
/>
)
}
}

ReactDOM.render(<App />, document.getElementById('app'))
Loading

0 comments on commit 23b375e

Please sign in to comment.