Apply esformatter-jsx

This commit is contained in:
Yuya Ochiai 2015-12-20 00:39:51 +09:00
parent 283e311095
commit 6cae54bb13
3 changed files with 77 additions and 36 deletions

View file

@ -4,6 +4,7 @@ var gulp = require('gulp');
var prettify = require('gulp-jsbeautifier');
var babel = require('gulp-babel');
var changed = require('gulp-changed');
var esformatter = require('gulp-esformatter');
var del = require('del');
var electron = require('electron-connect').server.create({
path: './build'
@ -13,7 +14,9 @@ var packager = require('electron-packager');
var sources = ['**/*.js', '**/*.css', '**/*.html', '!**/node_modules/**', '!**/build/**', '!release/**'];
var app_root = 'src';
gulp.task('prettify', ['sync-meta'], function() {
gulp.task('prettify', ['prettify:sources', 'prettify:jsx']);
gulp.task('prettify:sources', ['sync-meta'], function() {
gulp.src(sources)
.pipe(prettify({
html: {
@ -30,6 +33,17 @@ gulp.task('prettify', ['sync-meta'], function() {
.pipe(gulp.dest('.'));
});
gulp.task('prettify:jsx', function() {
return gulp.src(app_root + '/**/*.jsx')
.pipe(esformatter({
indent: {
value: ' '
},
plugins: ['esformatter-jsx']
}))
.pipe(gulp.dest(app_root));
})
gulp.task('build', ['build:jsx']);
gulp.task('build:jsx', function() {

View file

@ -17,9 +17,12 @@
"electron-connect": "^0.3.3",
"electron-packager": "^5.1.0",
"electron-prebuilt": "^0.35.1",
"esformatter": "^0.8.1",
"esformatter-jsx": "^4.0.6",
"gulp": "^3.9.0",
"gulp-babel": "^6.1.1",
"gulp-changed": "^1.3.0",
"gulp-esformatter": "^5.0.0",
"gulp-jsbeautifier": "^1.0.1",
"mocha": "^2.3.4",
"should": "^8.0.1",

View file

@ -11,10 +11,14 @@ var SettingsPage = React.createClass({
},
componentDidMount: function() {
var config = settings.readFileSync(this.props.configFile);
this.setState({teams: config.teams})
this.setState({
teams: config.teams
})
},
handleTeamsChange: function(teams) {
this.setState({teams: teams});
this.setState({
teams: teams
});
},
handleOK: function() {
var config = {
@ -30,40 +34,44 @@ var SettingsPage = React.createClass({
render: function() {
return (
<div className="settingsPage">
<TeamList teams={this.state.teams} onTeamsChange={this.handleTeamsChange} />
<input type="button" value="OK" onClick={this.handleOK} />
<input type="button" value="Cancel" onClick={this.handleCancel} />
<TeamList teams={ this.state.teams } onTeamsChange={ this.handleTeamsChange } />
<input type="button" value="OK" onClick={ this.handleOK } />
<input type="button" value="Cancel" onClick={ this.handleCancel } />
</div>
);
}
});
var TeamList = React.createClass({
handleTeamChange: function(index, team){
handleTeamChange: function(index, team) {
var teams = this.props.teams;
teams[index] = team;
this.props.onTeamsChange(teams);
},
handleNewTeamAdd: function(team){
handleNewTeamAdd: function(team) {
var teams = this.props.teams;
teams.push(team);
this.props.onTeamsChange(teams);
},
render: function() {
var thisObj = this;
var teamNodes = this.props.teams.map(function(team, i){
var handleTeamChange = function(team){
var teamNodes = this.props.teams.map(function(team, i) {
var handleTeamChange = function(team) {
thisObj.handleTeamChange(i, team);
};
return (
<li><TeamItem index={i} name={team.name} url={team.url} onTeamChange={handleTeamChange} onName /></li>
<li>
<TeamItem index={ i } name={ team.name } url={ team.url } onTeamChange={ handleTeamChange } onName />
</li>
);
});
return (
<div className="teamList">
<ol>
{teamNodes}
<li><NewTeamItem onNewTeamAdd={this.handleNewTeamAdd} /></li>
{ teamNodes }
<li>
<NewTeamItem onNewTeamAdd={ this.handleNewTeamAdd } />
</li>
</ol>
</div>
);
@ -71,42 +79,58 @@ var TeamList = React.createClass({
});
var TeamItem = React.createClass({
handleNameChange: function(e){
this.props.onTeamChange({name: e.target.value, url: this.props.url});
handleNameChange: function(e) {
this.props.onTeamChange({
name: e.target.value,
url: this.props.url
});
},
handleURLChange: function(e){
this.props.onTeamChange({name: this.props.name, url: e.target.value});
handleURLChange: function(e) {
this.props.onTeamChange({
name: this.props.name,
url: e.target.value
});
},
render: function() {
return (
<div className="teamItem">
<input type="text" placeholder="Team name" value={this.props.name} onChange={this.handleNameChange} ></input>
<input type="text" placeholder="Team URL (http://example.com/team)" value={this.props.url} onChange={this.handleURLChange} ></input>
<input type="text" placeholder="Team name" value={ this.props.name } onChange={ this.handleNameChange }></input>
<input type="text" placeholder="Team URL (http://example.com/team)" value={ this.props.url } onChange={ this.handleURLChange }></input>
</div>
);
}
});
var NewTeamItem = React.createClass({
getInitialState: function(){
return {name: '', url: ''};
getInitialState: function() {
return {
name: '',
url: ''
};
},
handleNewTeamAdd: function(){
this.props.onNewTeamAdd({name: this.state.name, url: this.state.url});
handleNewTeamAdd: function() {
this.props.onNewTeamAdd({
name: this.state.name,
url: this.state.url
});
this.setState(this.getInitialState());
},
handleNameChange: function(e){
this.setState({name: e.target.value});
handleNameChange: function(e) {
this.setState({
name: e.target.value
});
},
handleURLChange: function(e){
this.setState({url: e.target.value});
handleURLChange: function(e) {
this.setState({
url: e.target.value
});
},
render: function() {
return (
<div className="newTeamItem">
<input type="text" placeholder="Team name" value={this.state.name} onChange={this.handleNameChange} />
<input type="text" placeholder="Team URL (http://example.com/team)" value={this.state.url} onChange={this.handleURLChange} />
<input type="button" value="Add" onClick={this.handleNewTeamAdd} />
<input type="text" placeholder="Team name" value={ this.state.name } onChange={ this.handleNameChange } />
<input type="text" placeholder="Team URL (http://example.com/team)" value={ this.state.url } onChange={ this.handleURLChange } />
<input type="button" value="Add" onClick={ this.handleNewTeamAdd } />
</div>
);
}
@ -115,6 +139,6 @@ var NewTeamItem = React.createClass({
var configFile = remote.getGlobal('config-file');
ReactDOM.render(
<SettingsPage configFile={configFile} />,
<SettingsPage configFile={ configFile } />,
document.getElementById('content')
);