mirrors/mostlymatter
1
0
Форкнуть 0
Код Задачи Запросы на слияние Действия Пакеты Проекты Релизы Вики Активность

Merge pull request #310 from nickago/MM-1671

Просмотр исходного кода 
MM-1671 Added support for enter key triggering submission and changed Close to Cancel
Этот коммит содержится в:
Christopher Speller
2015-08-04 15:22:13 -04:00
родитель 6546bb9fb1 3e63428da3
Коммит 085a083a79
1 изменённых файлов: 70 добавлений и 62 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

132
web/react/components/new_channel.jsx
Просмотреть файл

@@ -1,58 +1,53 @@
// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
// See License.txt for license information. // See License.txt for license information.
var utils = require('../utils/utils.jsx'); var utils = require('../utils/utils.jsx');
var client = require('../utils/client.jsx'); var client = require('../utils/client.jsx');
var asyncClient = require('../utils/async_client.jsx'); var asyncClient = require('../utils/async_client.jsx');
var UserStore = require('../stores/user_store.jsx'); var UserStore = require('../stores/user_store.jsx');
var TeamStore = require('../stores/team_store.jsx'); var TeamStore = require('../stores/team_store.jsx');
var Constants = require('../utils/constants.jsx');
module.exports = React.createClass({ module.exports = React.createClass({
displayName: 'NewChannelModal',
handleSubmit: function(e) { handleSubmit: function(e) {
e.preventDefault(); e.preventDefault();
var channel = {}; var channel = {};
var state = { server_error: "" }; var state = {serverError: ''};
channel.display_name = this.refs.display_name.getDOMNode().value.trim(); channel.display_name = this.refs.display_name.getDOMNode().value.trim();
if (!channel.display_name) { if (!channel.display_name) {
state.display_name_error = "This field is required"; state.displayNameError = 'This field is required';
state.inValid = true; state.inValid = true;
} } else if (channel.display_name.length > 22) {
else if (channel.display_name.length > 22) { state.displayNameError = 'This field must be less than 22 characters';
state.display_name_error = "This field must be less than 22 characters";
state.inValid = true; state.inValid = true;
} } else {
else { state.displayNameError = '';
state.display_name_error = "";
} }
channel.name = this.refs.channel_name.getDOMNode().value.trim(); channel.name = this.refs.channel_name.getDOMNode().value.trim();
if (!channel.name) { if (!channel.name) {
state.name_error = "This field is required"; state.nameError = 'This field is required';
state.inValid = true; state.inValid = true;
} } else if (channel.name.length > 22) {
else if(channel.name.length > 22){ state.nameError = 'This field must be less than 22 characters';
state.name_error = "This field must be less than 22 characters";
state.inValid = true; state.inValid = true;
} } else {
else { var cleanedName = utils.cleanUpUrlable(channel.name);
var cleaned_name = utils.cleanUpUrlable(channel.name); if (cleanedName !== channel.name) {
if (cleaned_name != channel.name) { state.nameError = "Must be lowercase alphanumeric characters, allowing '-' but not starting or ending with '-'";
state.name_error = "Must be lowercase alphanumeric characters, allowing '-' but not starting or ending with '-'";
state.inValid = true; state.inValid = true;
} } else {
else { state.nameError = '';
state.name_error = "";
} }
} }
this.setState(state); this.setState(state);
if (state.inValid) if (state.inValid) {
return; return;
}
var cu = UserStore.getCurrentUser(); var cu = UserStore.getCurrentUser();
channel.team_id = cu.team_id; channel.team_id = cu.team_id;
@@ -63,76 +58,89 @@ module.exports = React.createClass({
var self = this; var self = this;
client.createChannel(channel, client.createChannel(channel,
function() { function() {
this.refs.display_name.getDOMNode().value = ""; this.refs.display_name.getDOMNode().value = '';
this.refs.channel_name.getDOMNode().value = ""; this.refs.channel_name.getDOMNode().value = '';
this.refs.channel_desc.getDOMNode().value = ""; this.refs.channel_desc.getDOMNode().value = '';
$(self.refs.modal.getDOMNode()).modal('hide'); $(self.refs.modal.getDOMNode()).modal('hide');
window.location = TeamStore.getCurrentTeamUrl() + "/channels/" + channel.name; window.location = TeamStore.getCurrentTeamUrl() + '/channels/' + channel.name;
asyncClient.getChannels(true); asyncClient.getChannels(true);
}.bind(this), }.bind(this),
function(err) { function(err) {
state.server_error = err.message; state.serverError = err.message;
state.inValid = true; state.inValid = true;
this.setState(state); this.setState(state);
}.bind(this) }.bind(this)
); );
}, },
displayNameKeyUp: function(e) { displayNameKeyUp: function() {
var display_name = this.refs.display_name.getDOMNode().value.trim(); var displayName = this.refs.display_name.getDOMNode().value.trim();
var channel_name = utils.cleanUpUrlable(display_name); var channelName = utils.cleanUpUrlable(displayName);
this.refs.channel_name.getDOMNode().value = channel_name; this.refs.channel_name.getDOMNode().value = channelName;
}, },
componentDidMount: function() { componentDidMount: function() {
var self = this; var self = this;
$(this.refs.modal.getDOMNode()).on('show.bs.modal', function(e) { $(this.refs.modal.getDOMNode()).on('show.bs.modal', function(e) {
var button = e.relatedTarget; var button = e.relatedTarget;
self.setState({ channel_type: $(button).attr('data-channeltype') }); self.setState({channelType: $(button).attr('data-channeltype')});
}); });
}, },
getInitialState: function() { getInitialState: function() {
return { channel_type: "" }; return {channelType: ''};
}, },
render: function() { render: function() {
var displayNameError = null;
var nameError = null;
var serverError = null;
var displayNameClass = 'form-group';
var nameClass = 'form-group';
var display_name_error = this.state.display_name_error ? <label className='control-label'>{ this.state.display_name_error }</label> : null; if (this.state.displayNameError) {
var name_error = this.state.name_error ? <label className='control-label'>{ this.state.name_error }</label> : null; displayNameError = <label className='control-label'>{this.state.displayNameError}</label>;
var server_error = this.state.server_error ? <div className='form-group has-error'><label className='control-label'>{ this.state.server_error }</label></div> : null; displayNameClass += ' has-error';
}
if (this.state.nameError) {
nameError = <label className='control-label'>{this.state.nameError}</label>;
nameClass += ' has-error';
}
if (this.state.serverError) {
serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>;
}
return ( return (
<div className="modal fade" id="new_channel" ref="modal" tabIndex="-1" role="dialog" aria-hidden="true"> <div className='modal fade' id='new_channel' ref='modal' tabIndex='-1' role='dialog' aria-hidden='true'>
<div className="modal-dialog"> <div className='modal-dialog'>
<div className="modal-content"> <div className='modal-content'>
<div className="modal-header"> <div className='modal-header'>
<button type="button" className="close" data-dismiss="modal"> <button type='button' className='close' data-dismiss='modal'>
<span aria-hidden="true">&times;</span> <span aria-hidden='true'>&times;</span>
<span className="sr-only">Close</span> <span className='sr-only'>Cancel</span>
</button> </button>
<h4 className="modal-title">New Channel</h4> <h4 className='modal-title'>New Channel</h4>
</div> </div>
<div className="modal-body"> <form role='form'>
<form role="form"> <div className='modal-body'>
<div className={ this.state.display_name_error ? "form-group has-error" : "form-group" }> <div className={displayNameClass}>
<label className='control-label'>Display Name</label> <label className='control-label'>Display Name</label>
<input onKeyUp={this.displayNameKeyUp} type="text" ref="display_name" className="form-control" placeholder="Enter display name" maxLength="64" /> <input onKeyUp={this.displayNameKeyUp} type='text' ref='display_name' className='form-control' placeholder='Enter display name' maxLength='64' />
{ display_name_error } {displayNameError}
</div> </div>
<div className={ this.state.name_error ? "form-group has-error" : "form-group" }> <div className={nameClass}>
<label className='control-label'>Handle</label> <label className='control-label'>Handle</label>
<input type="text" className="form-control" ref="channel_name" placeholder="lowercase alphanumeric's only" maxLength="64" /> <input type='text' className='form-control' ref='channel_name' placeholder="lowercase alphanumeric's only" maxLength='64' />
{ name_error } {nameError}
</div> </div>
<div className="form-group"> <div className='form-group'>
<label className='control-label'>Description</label> <label className='control-label'>Description</label>
<textarea className="form-control no-resize" ref="channel_desc" rows="3" placeholder="Description" maxLength="1024"></textarea> <textarea className='form-control no-resize' ref='channel_desc' rows='3' placeholder='Description' maxLength='1024'></textarea>
</div> </div>
{ server_error } {serverError}
</form> </div>
</div> <div className='modal-footer'>
<div className="modal-footer"> <button type='button' className='btn btn-default' data-dismiss='modal'>Cancel</button>
<button type="button" className="btn btn-default" data-dismiss="modal">Close</button> <button onClick={this.handleSubmit} type='submit' className='btn btn-primary'>Create New Channel</button>
<button onClick={this.handleSubmit} type="button" className="btn btn-primary">Create New Channel</button> </div>
</div> </form>
</div> </div>
</div> </div>
</div> </div>