Animate NewTeamModal close

This commit is contained in:
Jonas Schwabe 2017-02-03 18:49:35 +01:00
parent 77472369c1
commit 63fe562349
4 changed files with 81 additions and 74 deletions

View file

@ -309,27 +309,25 @@ const MainPage = React.createClass({
authServerURL = `${tmpURL.protocol}//${tmpURL.host}`;
authInfo = this.state.loginQueue[0].authInfo;
}
var modal;
if (this.state.showNewTeamModal) {
modal = (
<NewTeamModal
onClose={() => {
this.setState({
showNewTeamModal: false
});
}}
onSave={(newTeam) => {
this.props.teams.push(newTeam);
this.setState({
showNewTeamModal: false,
key: this.props.teams.length - 1
});
this.render();
this.props.onTeamConfigChange(this.props.teams);
}}
/>
);
}
var modal = (
<NewTeamModal
show={this.state.showNewTeamModal}
onClose={() => {
this.setState({
showNewTeamModal: false
});
}}
onSave={(newTeam) => {
this.props.teams.push(newTeam);
this.setState({
showNewTeamModal: false,
key: this.props.teams.length - 1
});
this.render();
this.props.onTeamConfigChange(this.props.teams);
}}
/>
);
return (
<div>
<LoginModal

View file

@ -3,9 +3,10 @@ const {Modal, Button, FormGroup, FormControl, ControlLabel, HelpBlock} = require
const validUrl = require('valid-url');
class NewTeamModal extends React.Component {
constructor() {
super();
this.wasShown = false;
this.state = {
teamName: '',
teamUrl: '',
@ -14,6 +15,10 @@ class NewTeamModal extends React.Component {
}
componentWillMount() {
this.initializeOnShow();
}
initializeOnShow() {
this.state = {
teamName: this.props.team ? this.props.team.name : '',
teamUrl: this.props.team ? this.props.team.url : '',
@ -105,9 +110,14 @@ class NewTeamModal extends React.Component {
'margin-bottom': 0
};
if (this.wasShown !== this.props.show && this.props.show) {
this.initializeOnShow();
}
this.wasShown = this.props.show;
return (
<Modal
show={true}
show={this.props.show}
id='newServerModal'
onHide={this.props.onClose}
onKeyDown={(e) => {
@ -193,7 +203,8 @@ NewTeamModal.propTypes = {
onClose: React.PropTypes.func,
onSave: React.PropTypes.func,
team: React.PropTypes.object,
editMode: React.PropTypes.boolean
editMode: React.PropTypes.boolean,
show: React.PropTypes.boolean
};
module.exports = NewTeamModal;

View file

@ -96,49 +96,45 @@ const TeamList = React.createClass({
);
});
var addServerForm;
if (this.props.showAddTeamForm || this.state.showEditTeamForm) {
addServerForm = (
<NewTeamModal
editMode={this.state.showEditTeamForm}
onClose={() => {
this.setState({
showEditTeamForm: false,
team: {
name: '',
url: '',
index: false
}
});
this.props.setAddTeamFormVisibility(false);
}}
onSave={(newTeam) => {
var teamData = {
name: newTeam.name,
url: newTeam.url
};
if (this.props.showAddTeamForm) {
this.props.addServer(teamData);
} else {
this.props.updateTeam(newTeam.index, teamData);
var addServerForm = (
<NewTeamModal
show={this.props.showAddTeamForm || this.state.showEditTeamForm}
editMode={this.state.showEditTeamForm}
onClose={() => {
this.setState({
showEditTeamForm: false,
team: {
name: '',
url: '',
index: false
}
this.setState({
showNewTeamModal: false,
showEditTeamForm: false,
team: {
name: '',
url: '',
index: false
}
});
this.render();
this.props.setAddTeamFormVisibility(false);
}}
team={this.state.team}
/>);
} else {
addServerForm = '';
}
});
this.props.setAddTeamFormVisibility(false);
}}
onSave={(newTeam) => {
var teamData = {
name: newTeam.name,
url: newTeam.url
};
if (this.props.showAddTeamForm) {
this.props.addServer(teamData);
} else {
this.props.updateTeam(newTeam.index, teamData);
}
this.setState({
showNewTeamModal: false,
showEditTeamForm: false,
team: {
name: '',
url: '',
index: false
}
});
this.render();
this.props.setAddTeamFormVisibility(false);
}}
team={this.state.team}
/>);
const removeServer = this.props.teams[this.state.indexToRemoveServer];
const removeServerModal = (

View file

@ -261,6 +261,7 @@ describe('browser/settings.html', function desc() {
it('should close the window after clicking cancel', () => {
return this.app.client.
click('#cancelNewServerModal').
pause(1000). // Animation
isExisting('#newServerModal').should.eventually.equal(false);
});
@ -334,15 +335,16 @@ describe('browser/settings.html', function desc() {
it('should add the team to the config file', (done) => {
this.app.client.
click('#saveNewServerModal').
click('#btnSave');
this.app.client.pause(1000).then(() => {
const savedConfig = JSON.parse(fs.readFileSync(env.configFilePath, 'utf8'));
savedConfig.teams.should.contain({
name: 'TestTeam',
url: 'http://example.org'
pause(1000). // Animation
click('#btnSave').
pause(1000).then(() => {
const savedConfig = JSON.parse(fs.readFileSync(env.configFilePath, 'utf8'));
savedConfig.teams.should.contain({
name: 'TestTeam',
url: 'http://example.org'
});
return done();
});
return done();
});
});
});
});