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

Formatted CreateComment, CreatePost, and FileUpload React components to match the style guide

Просмотр исходного кода
Этот коммит содержится в:
hmhealey
2015-08-10 14:01:11 -04:00
родитель 96ad8cb114
Коммит 6ec1b7a8b3
3 изменённых файлов: 208 добавлений и 150 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

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

@@ -18,20 +18,24 @@ module.exports = React.createClass({
handleSubmit: function(e) {
e.preventDefault();
if (this.state.uploadsInProgress.length > 0) return;
if (this.state.uploadsInProgress.length > 0) {
return;
}
if (this.state.submitting) return;
if (this.state.submitting) {
return;
}
var post = {}
var post = {};
post.filenames = [];
post.message = this.state.messageText;
if (post.message.trim().length === 0 && this.state.previews.length === 0) {
return;
}
if (post.message.length > Constants.CHARACTER_LIMIT) {
this.setState({ post_error: 'Comment length must be less than '+Constants.CHARACTER_LIMIT+' characters.' });
this.setState({postError: 'Comment length must be less than ' + Constants.CHARACTER_LIMIT + ' characters.'});
return;
}
@@ -40,62 +44,62 @@ module.exports = React.createClass({
post.parent_id = this.props.parentId;
post.filenames = this.state.previews;
this.setState({ submitting: true, limit_error: null });
this.setState({submitting: true, serverError: null});
client.createPost(post, ChannelStore.getCurrent(),
function(data) {
PostStore.storeCommentDraft(this.props.rootId, null);
this.setState({ messageText: '', submitting: false, post_error: null, server_error: null });
this.setState({messageText: '', submitting: false, postError: null, serverError: null});
this.clearPreviews();
AsyncClient.getPosts(true, this.props.channelId);
var channel = ChannelStore.get(this.props.channelId);
var member = ChannelStore.getMember(this.props.channelId);
member.msg_count = channel.total_msg_count;
member.last_viewed_at = (new Date).getTime();
member.last_viewed_at = Date.now();
ChannelStore.setChannelMember(member);
}.bind(this),
function(err) {
var state = {};
state.server_error = err.message;
state.serverError = err.message;
state.submitting = false;
if (err.message === "Invalid RootId parameter") {
if ($('#post_deleted').length > 0) $('#post_deleted').modal('show');
}
else {
if (err.message === 'Invalid RootId parameter') {
if ($('#post_deleted').length > 0) {
$('#post_deleted').modal('show');
}
} else {
this.setState(state);
}
}.bind(this)
);
},
commentMsgKeyPress: function(e) {
if (e.which == 13 && !e.shiftKey && !e.altKey) {
if (e.which === 13 && !e.shiftKey && !e.altKey) {
e.preventDefault();
this.refs.textbox.getDOMNode().blur();
this.handleSubmit(e);
}
var t = new Date().getTime();
var t = Date.now();
if ((t - this.lastTime) > 5000) {
SocketStore.sendMessage({channel_id: this.props.channelId, action: "typing", props: {"parent_id": this.props.rootId} });
SocketStore.sendMessage({channel_id: this.props.channelId, action: 'typing', props: {'parent_id': this.props.rootId}});
this.lastTime = t;
}
},
handleUserInput: function(messageText) {
var draft = PostStore.getCommentDraft(this.props.rootId);
if (!draft) {
draft = { previews: [], uploadsInProgress: []};
draft = {previews: [], uploadsInProgress: []};
}
draft.message = messageText;
PostStore.storeCommentDraft(this.props.rootId, draft);
$(".post-right__scroll").scrollTop($(".post-right__scroll")[0].scrollHeight);
$(".post-right__scroll").perfectScrollbar('update');
$('.post-right__scroll').scrollTop($('.post-right__scroll')[0].scrollHeight);
$('.post-right__scroll').perfectScrollbar('update');
this.setState({messageText: messageText});
},
handleUploadStart: function(clientIds, channel_id) {
handleUploadStart: function(clientIds, channelId) {
var draft = PostStore.getCommentDraft(this.props.rootId);
if (!draft) {
draft = {};
@@ -109,7 +113,7 @@ module.exports = React.createClass({
this.setState({uploadsInProgress: draft['uploadsInProgress']});
},
handleFileUploadComplete: function(filenames, clientIds, channel_id) {
handleFileUploadComplete: function(filenames, clientIds, channelId) {
var draft = PostStore.getCommentDraft(this.props.rootId);
if (!draft) {
draft = {};
@@ -122,7 +126,7 @@ module.exports = React.createClass({
for (var i = 0; i < clientIds.length; i++) {
var index = draft['uploadsInProgress'].indexOf(clientIds[i]);
if (index != -1) {
if (index !== -1) {
draft['uploadsInProgress'].splice(index, 1);
}
}
@@ -142,13 +146,13 @@ module.exports = React.createClass({
}
var index = draft['uploadsInProgress'].indexOf(clientId);
if (index != -1) {
if (index !== -1) {
draft['uploadsInProgress'].splice(index, 1);
}
PostStore.storeCommentDraft(this.props.rootId, draft);
this.setState({uploadsInProgress: draft['uploadsInProgress'], server_error: err});
this.setState({uploadsInProgress: draft['uploadsInProgress'], serverError: err});
},
clearPreviews: function() {
this.setState({previews: []});
@@ -172,7 +176,7 @@ module.exports = React.createClass({
var draft = PostStore.getCommentDraft(this.props.rootId);
if (!draft) {
draft = { message: '', uploadsInProgress: []};
draft = {message: '', uploadsInProgress: []};
}
draft.previews = previews;
draft.uploadsInProgress = uploadsInProgress;
@@ -184,39 +188,49 @@ module.exports = React.createClass({
PostStore.clearCommentDraftUploads();
var draft = PostStore.getCommentDraft(this.props.rootId);
messageText = '';
uploadsInProgress = [];
previews = [];
var messageText = '';
var uploadsInProgress = [];
var previews = [];
if (draft) {
messageText = draft.message;
uploadsInProgress = draft.uploadsInProgress;
previews = draft.previews
}
return { messageText: messageText, uploadsInProgress: uploadsInProgress, previews: previews, submitting: false };
return {messageText: messageText, uploadsInProgress: uploadsInProgress, previews: previews, submitting: false};
},
componentWillReceiveProps: function(newProps) {
if(newProps.rootId !== this.props.rootId) {
if (newProps.rootId !== this.props.rootId) {
var draft = PostStore.getCommentDraft(newProps.rootId);
messageText = '';
uploadsInProgress = [];
previews = [];
var messageText = '';
var uploadsInProgress = [];
var previews = [];
if (draft) {
messageText = draft.message;
uploadsInProgress = draft.uploadsInProgress;
previews = draft.previews
}
this.setState({ messageText: messageText, uploadsInProgress: uploadsInProgress, previews: previews });
this.setState({messageText: messageText, uploadsInProgress: uploadsInProgress, previews: previews});
}
},
getFileCount: function(channel_id) {
getFileCount: function(channelId) {
return this.state.previews.length + this.state.uploadsInProgress.length;
},
render: function() {
var serverError = null;
if (this.state.serverError) {
serverError = (
<div className='form-group has-error'>
<label className='control-label'>{this.state.serverError}</label>
</div>
);
}
var server_error = this.state.server_error ? <div className='form-group has-error'><label className='control-label'>{ this.state.server_error }</label></div> : null;
var post_error = this.state.post_error ? <label className='control-label'>{this.state.post_error}</label> : null;
var postError = null;
if (this.state.postError) {
postError = <label className='control-label'>{this.state.postError}</label>;
}
var preview = <div/>;
var preview = null;
if (this.state.previews.length > 0 || this.state.uploadsInProgress.length > 0) {
preview = (
<FilePreview
@@ -226,18 +240,23 @@ module.exports = React.createClass({
);
}
var postFooterClassName = 'post-create-footer';
if (postError) {
postFooterClassName += ' has-error';
}
return (
<form onSubmit={this.handleSubmit}>
<div className="post-create">
<div id={this.props.rootId} className="post-create-body comment-create-body">
<div className='post-create'>
<div id={this.props.rootId} className='post-create-body comment-create-body'>
<Textbox
onUserInput={this.handleUserInput}
onKeyPress={this.commentMsgKeyPress}
messageText={this.state.messageText}
createMessage="Add a comment..."
initialText=""
id="reply_textbox"
ref="textbox" />
createMessage='Add a comment...'
initialText=''
id='reply_textbox'
ref='textbox' />
<FileUpload
ref='fileUpload'
getFileCount={this.getFileCount}
@@ -246,13 +265,13 @@ module.exports = React.createClass({
onUploadError={this.handleUploadError} />
</div>
<MsgTyping channelId={this.props.channelId} parentId={this.props.rootId} />
<div className={post_error ? 'has-error' : 'post-create-footer'}>
<input type="button" className="btn btn-primary comment-btn pull-right" value="Add Comment" onClick={this.handleSubmit} />
{ post_error }
{ server_error }
<div className={postFooterClassName}>
<input type='button' className='btn btn-primary comment-btn pull-right' value='Add Comment' onClick={this.handleSubmit} />
{postError}
{serverError}
</div>
</div>
{ preview }
{preview}
</form>
);
}