Skip to content

Commit

Permalink
eslint airbnb ruleset used and applied
Browse files Browse the repository at this point in the history
  • Loading branch information
tajo committed May 13, 2016
1 parent 2516a4c commit f03eca7
Show file tree
Hide file tree
Showing 12 changed files with 186 additions and 296 deletions.
109 changes: 1 addition & 108 deletions .eslintrc
Original file line number Diff line number Diff line change
@@ -1,113 +1,6 @@
{
"parser": "babel-eslint",
"rules": {
"array-bracket-spacing": [2, "never"],
"brace-style": [1, "1tbs", {"allowSingleLine": true}],
"camelcase": 1,
"comma-dangle": [1, "never"],
"comma-spacing": [1, {"before": false, "after": true}],
"comma-style": [1, "last"],
"computed-property-spacing": [2, "never"],
"consistent-this": [1, "self"],
"eqeqeq": [2, "allow-null"],
"eol-last": 1,
"guard-for-in": 0,
"indent": [2, 2],
"key-spacing": 0,
"new-cap": [1, {"capIsNew": false, "newIsCap": true}],
"new-parens": 0,
"no-bitwise": 0,
"no-cond-assign": 1,
"no-console": 1,
"no-constant-condition": 1,
"no-delete-var": 2,
"no-debugger": 1,
"no-dupe-keys": 1,
"no-duplicate-case": 1,
"no-empty-character-class": 1,
"no-eval": 1,
"no-ex-assign": 1,
"no-extend-native": 1,
"no-floating-decimal": 1,
"no-func-assign": 1,
"no-implied-eval": 1,
"no-inner-declarations": 1,
"no-invalid-regexp": 1,
"no-irregular-whitespace": 1,
"no-iterator": 1,
"no-labels": 1,
"no-lonely-if": 1,
"no-loop-func": 1,
"no-mixed-spaces-and-tabs": 1,
"no-native-reassign": 2,
"no-negated-in-lhs": 1,
"no-new-func": 1,
"no-new-object": 1,
"no-new-wrappers": 2,
"no-obj-calls": 1,
"no-octal": 1,
"no-plusplus": 1,
"no-proto": 2,
"no-redeclare": 1,
"no-return-assign": 1,
"no-self-compare": 1,
"no-sequences": 1,
"no-shadow": 1,
"no-spaced-func": 1,
"no-sparse-arrays": 1,
"no-throw-literal": 1,
"no-trailing-spaces": 1,
"no-unused-vars": [1, {"vars": "all", "args": "none"}],
"no-undef": 1,
"no-undefined": 2,
"no-undef-init": 1,
"no-underscore-dangle": 0,
"no-unreachable": 1,
"no-use-before-define": [1, "nofunc"],
"no-warning-comments": [1, {"terms": ["todo", "fixme"]}],
"object-curly-spacing": [2, "never"],
"quotes": [1, "single", "avoid-escape"],
"quote-props": [0, "as-needed"],
"radix": 1,
"semi": [2, "always"],
"semi-spacing": [1, {"before": false, "after": true}],
"space-after-keywords": [1, "always"],
"space-before-blocks": [1, "always"],
"space-before-function-paren": [1, "never"],
"space-infix-ops": 1,
"space-in-parens": [1, "never"],
"space-return-throw-case": 1,
"space-unary-ops": [1, {"words": true, "nonwords": false}],
"strict": [0, "never"], // babel does it
"use-isnan": 1,
"valid-typeof": 1,
"vars-on-top": 0, // disabled for now, see github.com/eslint/eslint/issues/2099
"wrap-iife": [1, "inside"],
"yoda": 0,
// Node.js specific
"handle-callback-err": [1, "^(err|error)$"],
"no-mixed-requires": 1,
"no-new-require": 1,
"no-path-concat": 1,
// React
"react/jsx-boolean-value": 1,
"react/jsx-no-undef": 1,
"jsx-quotes": 1,
"react/jsx-sort-props": 1,
"react/jsx-uses-react": 1,
"react/jsx-uses-vars": 1,
"react/no-did-mount-set-state": 1,
"react/no-did-update-set-state": 1,
"react/no-multi-comp": 1,
"react/no-unknown-property": 1,
"react/prop-types": 1,
"react/react-in-jsx-scope": 1,
"react/self-closing-comp": 1,
"react/wrap-multilines": 1
},
"plugins": [
"react"
],
"extends" : ["airbnb"],
"env": {
"browser": true,
"node": true,
Expand Down
31 changes: 14 additions & 17 deletions devServer.js
Original file line number Diff line number Diff line change
@@ -1,28 +1,25 @@
var path = require('path');
var express = require('express');
var webpack = require('webpack');
var config = require('./webpack.config.dev');
import path from 'path';
import express from 'express';
import webpack from 'webpack';
import config from './webpack.config.dev.babel';
import webpackDev from 'webpack-dev-middleware';
import webpackHot from 'webpack-hot-middleware';

var app = express();
var compiler = webpack(config);
const app = express();
const compiler = webpack(config);

app.use(require('webpack-dev-middleware')(compiler, {
app.use(webpackDev(compiler, {
noInfo: true,
publicPath: config.output.publicPath
publicPath: config.output.publicPath,
}));

app.use(require('webpack-hot-middleware')(compiler));
app.use(webpackHot(compiler));

app.get('*', function(req, res) {
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'examples/index_dev.html'));
});

/*eslint-disable*/
app.listen(3000, 'localhost', function(err) {
if (err) {
console.log(err);
return;
}

console.log('Listening at http://localhost:3000');
app.listen(3000, 'localhost', () => {
console.log('Listening at http://localhost:3000'); // eslint-disable-line
});
2 changes: 2 additions & 0 deletions devServerIndex.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
require('babel-register');
require('./devServer');
7 changes: 3 additions & 4 deletions examples/absoluteposition.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React from 'react';

export default class AbsolutePosition extends React.Component {

export default class AbsolutePosition extends React.Component { // eslint-disable-line
render() {
const style = {
position: 'absolute',
Expand All @@ -11,7 +10,7 @@ export default class AbsolutePosition extends React.Component {
border: '1px solid gray',
background: '#fff',
margin: 10,
padding: 10
padding: 10,
};

return (
Expand All @@ -31,5 +30,5 @@ AbsolutePosition.propTypes = {
top: React.PropTypes.number,
left: React.PropTypes.number,
width: React.PropTypes.number,
closePortal: React.PropTypes.func
closePortal: React.PropTypes.func,
};
85 changes: 47 additions & 38 deletions examples/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,40 +13,49 @@ export default class App extends React.Component {
super(props);
this.state = {
isPortalOpened: false,
someValue: 'init'
someValue: 'init',
};
}

onClose() {
/*eslint no-console: 0*/
/* eslint no-console: 0 */
console.log('Portal closed');
}

onOpen(node) {
new TWEEN.Tween({opacity: 0})
.to({opacity: 1}, 500)
new TWEEN.Tween({ opacity: 0 })
.to({ opacity: 1 }, 500)
.easing(TWEEN.Easing.Cubic.In)
.onUpdate(function() {
node.style.opacity = this.opacity;
}).start();
.onUpdate(function() { // eslint-disable-line
node.style.opacity = this.opacity; // eslint-disable-line
})
.start();
}

beforeClose(node, removeFromDom) {
new TWEEN.Tween({opacity: 1})
.to({opacity: 0}, 500)
new TWEEN.Tween({ opacity: 1 })
.to({ opacity: 0 }, 500)
.easing(TWEEN.Easing.Cubic.In)
.onUpdate(function() {
node.style.opacity = this.opacity;
.onUpdate(function() { // eslint-disable-line
node.style.opacity = this.opacity; // eslint-disable-line
})
.onComplete(removeFromDom)
.start();
}

toggleLoadingBar() {
this.setState({ isPortalOpened: !this.state.isPortalOpened });
}

changeValue() {
this.setState({ someValue: Math.random().toString(36).substring(7) });
}

render() {
const buttonStyles = {
padding: 10,
fontSize: 20,
marginBottom:10
marginBottom: 10,
};
function animate(time) {
requestAnimationFrame(animate);
Expand All @@ -57,23 +66,26 @@ export default class App extends React.Component {
const button1 = <button style={buttonStyles}>Open portal with pseudo modal</button>;
const button2 = <button style={buttonStyles}>Another portal</button>;
const button3 = (
<button onClick={(e) => {
const bodyRect = document.body.getBoundingClientRect();
const targetRect = e.target.getBoundingClientRect();
this.setState({
isOpened: true,
top: targetRect.top - bodyRect.top,
left: targetRect.left - bodyRect.left,
width: targetRect.width
});
}} style={buttonStyles}>
<button
onClick={(e) => {
const bodyRect = document.body.getBoundingClientRect();
const targetRect = e.target.getBoundingClientRect();
this.setState({
isOpened: true,
top: targetRect.top - bodyRect.top,
left: targetRect.left - bodyRect.left,
width: targetRect.width,
});
}}
style={buttonStyles}
>
{'Open portal on top of button'}
</button>
);
const button4 = <button style={buttonStyles}>Animation Example</button>;

return (
<div style={{border: '2px solid red', margin: 10, padding: 10}}>
<div style={{ border: '2px solid red', margin: 10, padding: 10 }}>
<h1>React portal examples</h1>
<a href="https://github.com/tajo/react-portal">https://github.com/tajo/react-portal</a>
<p> </p>
Expand All @@ -96,7 +108,7 @@ export default class App extends React.Component {
</Portal>

<Portal closeOnOutsideClick onClose={this.onClose} openByClickOn={button2}>
<div style={{border: '1px solid black', margin: 10, padding: 10}}>
<div style={{ border: '1px solid black', margin: 10, padding: 10 }}>
<p>Click anywhere outside of this portal to close it.</p>
</div>
</Portal>
Expand All @@ -106,9 +118,13 @@ export default class App extends React.Component {
<Portal
closeOnOutsideClick
isOpened={this.state.isOpened}
onClose={() => {this.setState({isOpened: false}); this.onClose();}}
onClose={() => { this.setState({ isOpened: false }); this.onClose(); }}
>
<AbsolutePosition left={this.state.left} top={this.state.top} width={this.state.width} />
<AbsolutePosition
left={this.state.left}
top={this.state.top}
width={this.state.width}
/>
</Portal>
</div>

Expand All @@ -122,24 +138,17 @@ export default class App extends React.Component {
closeOnOutsideClick
onOpen={this.onOpen}
openByClickOn={button4}
style={{opacity: 0}}
style={{ opacity: 0 }}
>
<div style={{border: '1px solid black', margin: 10, padding: 10}}>
<p>Trigger Animations, or any arbitrary function, before removing the portal from the DOM, animates out on both click outside and on esc press</p>
<div style={{ border: '1px solid black', margin: 10, padding: 10 }}>
<p>Trigger Animations, or any arbitrary function,{' '}
before removing the portal from the DOM, animates out{' '}
on both click outside and on esc press</p>
</div>
</Portal>
</div>
);
}

toggleLoadingBar(e) {
this.setState({isPortalOpened: !this.state.isPortalOpened});
}

changeValue(e) {
this.setState({someValue: Math.random().toString(36).substring(7)});
}

}

ReactDOM.render(<App />, document.getElementById('root'));
26 changes: 7 additions & 19 deletions examples/loadingbar.js
Original file line number Diff line number Diff line change
@@ -1,21 +1,9 @@
import React from 'react';

export default class LoadingBar extends React.Component {

render() {
return (
<div style={{border: '1px solid green', margin: 10, padding: 10}}>
<p>This could be a loading bar...</p>
<p>This portal is <strong>opened by the prop</strong> <i>isOpened</i>.</p>
<p>... when <i>openByClickOn</i> is not enough.</p>
<p>Notice, that by default you cannot close this by ESC or an outside click.</p>
</div>
);
}

}

LoadingBar.propTypes = {
children: React.PropTypes.element,
closePortal: React.PropTypes.func
};
export default () =>
<div style={{ border: '1px solid green', margin: 10, padding: 10 }}>
<p>This could be a loading bar...</p>
<p>This portal is <strong>opened by the prop</strong> <i>isOpened</i>.</p>
<p>... when <i>openByClickOn</i> is not enough.</p>
<p>Notice, that by default you cannot close this by ESC or an outside click.</p>
</div>;
10 changes: 4 additions & 6 deletions examples/pseudomodal.js
Original file line number Diff line number Diff line change
@@ -1,22 +1,20 @@
import React from 'react';

export default class PseudoModal extends React.Component {

export default class PseudoModal extends React.Component { // eslint-disable-line
render() {
return (
<div style={{border: '1px solid blue', margin: 10, padding: 10}}>
<div style={{ border: '1px solid blue', margin: 10, padding: 10 }}>
{this.props.children}
<p><button onClick={this.props.closePortal}>Close this</button></p>
</div>
);
}

}

PseudoModal.propTypes = {
children: React.PropTypes.oneOfType([
React.PropTypes.arrayOf(React.PropTypes.element),
React.PropTypes.element
React.PropTypes.element,
]),
closePortal: React.PropTypes.func
closePortal: React.PropTypes.func,
};
Loading

0 comments on commit f03eca7

Please sign in to comment.