Animate NewTeamModal close
This commit is contained in:
parent
77472369c1
commit
63fe562349
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 = (
|
||||
|
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue