149 lines
3.7 KiB
JavaScript
149 lines
3.7 KiB
JavaScript
const React = require('react');
|
|
const {findDOMNode} = require('react-dom');
|
|
const {Button, HelpBlock, ListGroupItem} = require('react-bootstrap');
|
|
|
|
const TeamListItemNew = React.createClass({
|
|
propTypes: {
|
|
onTeamAdd: React.PropTypes.func,
|
|
teamIndex: React.PropTypes.number,
|
|
teamName: React.PropTypes.string,
|
|
teamUrl: React.PropTypes.string
|
|
},
|
|
|
|
getInitialState() {
|
|
return {
|
|
name: this.props.teamName,
|
|
url: this.props.teamUrl,
|
|
index: this.props.teamIndex,
|
|
errorMessage: null
|
|
};
|
|
},
|
|
handleSubmit(e) {
|
|
console.log('submit');
|
|
e.preventDefault();
|
|
const errorMessage = this.getValidationErrorMessage();
|
|
if (errorMessage) {
|
|
this.setState({
|
|
errorMessage
|
|
});
|
|
return;
|
|
}
|
|
|
|
this.props.onTeamAdd({
|
|
name: this.state.name.trim(),
|
|
url: this.state.url.trim(),
|
|
index: this.state.index
|
|
});
|
|
|
|
this.setState({
|
|
name: '',
|
|
url: '',
|
|
index: '',
|
|
errorMessage: null
|
|
});
|
|
},
|
|
handleNameChange(e) {
|
|
console.log('name');
|
|
this.setState({
|
|
name: e.target.value
|
|
});
|
|
},
|
|
handleURLChange(e) {
|
|
console.log('url');
|
|
this.setState({
|
|
url: e.target.value
|
|
});
|
|
},
|
|
|
|
getValidationErrorMessage() {
|
|
if (this.state.name.trim() === '') {
|
|
return 'Name is required.';
|
|
} else if (this.state.url.trim() === '') {
|
|
return 'URL is required.';
|
|
} else if (!(/^https?:\/\/.*/).test(this.state.url.trim())) {
|
|
return 'URL should start with http:// or https://.';
|
|
}
|
|
return null;
|
|
},
|
|
|
|
componentDidMount() {
|
|
const inputTeamName = findDOMNode(this.refs.inputTeamName);
|
|
const setErrorMessage = () => {
|
|
this.setState({
|
|
errorMessage: this.getValidationErrorMessage()
|
|
});
|
|
};
|
|
inputTeamName.addEventListener('invalid', setErrorMessage);
|
|
const inputTeamURL = findDOMNode(this.refs.inputTeamURL);
|
|
inputTeamURL.addEventListener('invalid', setErrorMessage);
|
|
},
|
|
|
|
render() {
|
|
var existingTeam = false;
|
|
if (this.state.name !== '' && this.state.url !== '') {
|
|
existingTeam = true;
|
|
}
|
|
|
|
var btnAddText;
|
|
if (existingTeam) {
|
|
btnAddText = 'Save';
|
|
} else {
|
|
btnAddText = 'Add';
|
|
}
|
|
|
|
return (
|
|
<ListGroupItem>
|
|
<form
|
|
className='form-inline'
|
|
onSubmit={this.handleSubmit}
|
|
>
|
|
<div className='form-group'>
|
|
<label htmlFor='inputTeamName'>{'Name'}</label>
|
|
{ ' ' }
|
|
<input
|
|
type='text'
|
|
required={true}
|
|
className='form-control'
|
|
id='inputTeamName'
|
|
ref='inputTeamName'
|
|
placeholder='Example team'
|
|
value={this.state.name}
|
|
onChange={this.handleNameChange}
|
|
/>
|
|
</div>
|
|
{ ' ' }
|
|
<div className='form-group'>
|
|
<label htmlFor='inputTeamURL'>{'URL'}</label>
|
|
{ ' ' }
|
|
<input
|
|
type='url'
|
|
required={true}
|
|
className='form-control'
|
|
id='inputTeamURL'
|
|
ref='inputTeamURL'
|
|
placeholder='https://example.com/team'
|
|
value={this.state.url}
|
|
onChange={this.handleURLChange}
|
|
/>
|
|
</div>
|
|
{ ' ' }
|
|
<Button type='submit'>
|
|
{ btnAddText }
|
|
</Button>
|
|
</form>
|
|
{ (() => {
|
|
if (this.state.errorMessage !== null) {
|
|
return (
|
|
<HelpBlock style={{color: '#777777'}}>
|
|
{ this.state.errorMessage }
|
|
</HelpBlock>);
|
|
}
|
|
return null;
|
|
})() }
|
|
</ListGroupItem>
|
|
);
|
|
}
|
|
});
|
|
|
|
module.exports = TeamListItemNew;
|