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 файл Показать все файлы Свернуть все файлы

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

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

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

@@ -22,13 +22,12 @@ module.exports = React.createClass({
handleSubmit: function(e) { handleSubmit: function(e) {
e.preventDefault(); e.preventDefault();
if (this.state.uploadsInProgress.length > 0) return; if (this.state.uploadsInProgress.length > 0 || this.state.submitting) {
return;
if (this.state.submitting) return; }
var post = {}; var post = {};
post.filenames = []; post.filenames = [];
post.message = this.state.messageText; post.message = this.state.messageText;
if (post.message.trim().length === 0 && this.state.previews.length === 0) { if (post.message.trim().length === 0 && this.state.previews.length === 0) {
@@ -36,55 +35,52 @@ module.exports = React.createClass({
} }
if (post.message.length > Constants.CHARACTER_LIMIT) { if (post.message.length > Constants.CHARACTER_LIMIT) {
this.setState({ post_error: 'Post length must be less than '+Constants.CHARACTER_LIMIT+' characters.' }); this.setState({postError: 'Post length must be less than ' + Constants.CHARACTER_LIMIT + ' characters.'});
return; return;
} }
this.setState({ submitting: true, limit_error: null }); this.setState({submitting: true, serverError: null});
var user_id = UserStore.getCurrentId(); if (post.message.indexOf('/') === 0) {
if (post.message.indexOf("/") == 0) {
client.executeCommand( client.executeCommand(
this.state.channel_id, this.state.channelId,
post.message, post.message,
false, false,
function(data) { function(data) {
PostStore.storeDraft(data.channel_id, null); PostStore.storeDraft(data.channel_id, null);
this.setState({ messageText: '', submitting: false, post_error: null, previews: [], server_error: null, limit_error: null }); this.setState({messageText: '', submitting: false, postError: null, previews: [], serverError: null});
if (data.goto_location.length > 0) { if (data.goto_location.length > 0) {
window.location.href = data.goto_location; window.location.href = data.goto_location;
} }
}.bind(this), }.bind(this),
function(err){ function(err) {
var state = {} var state = {};
state.server_error = err.message; state.serverError = err.message;
state.submitting = false; state.submitting = false;
this.setState(state); this.setState(state);
}.bind(this) }.bind(this)
); );
} else { } else {
post.channel_id = this.state.channel_id; post.channel_id = this.state.channelId;
post.filenames = this.state.previews; post.filenames = this.state.previews;
client.createPost(post, ChannelStore.getCurrent(), client.createPost(post, ChannelStore.getCurrent(),
function(data) { function(data) {
PostStore.storeDraft(data.channel_id, null); PostStore.storeDraft(data.channel_id, null);
this.setState({ messageText: '', submitting: false, post_error: null, previews: [], server_error: null, limit_error: null }); this.setState({messageText: '', submitting: false, postError: null, previews: [], serverError: null});
this.resizePostHolder(); this.resizePostHolder();
AsyncClient.getPosts(true); AsyncClient.getPosts(true);
var channel = ChannelStore.get(this.state.channel_id); var channel = ChannelStore.get(this.state.channelId);
var member = ChannelStore.getMember(this.state.channel_id); var member = ChannelStore.getMember(this.state.channelId);
member.msg_count = channel.total_msg_count; member.msg_count = channel.total_msg_count;
member.last_viewed_at = (new Date).getTime(); member.last_viewed_at = Date.now();
ChannelStore.setChannelMember(member); ChannelStore.setChannelMember(member);
}.bind(this), }.bind(this),
function(err) { function(err) {
var state = {} var state = {};
state.server_error = err.message; state.serverError = err.message;
state.submitting = false; state.submitting = false;
this.setState(state); this.setState(state);
@@ -92,21 +88,21 @@ module.exports = React.createClass({
); );
} }
$(".post-list-holder-by-time").perfectScrollbar('update'); $('.post-list-holder-by-time').perfectScrollbar('update');
}, },
componentDidUpdate: function() { componentDidUpdate: function() {
this.resizePostHolder(); this.resizePostHolder();
}, },
postMsgKeyPress: function(e) { postMsgKeyPress: function(e) {
if (e.which == 13 && !e.shiftKey && !e.altKey) { if (e.which === 13 && !e.shiftKey && !e.altKey) {
e.preventDefault(); e.preventDefault();
this.refs.textbox.getDOMNode().blur(); this.refs.textbox.getDOMNode().blur();
this.handleSubmit(e); this.handleSubmit(e);
} }
var t = new Date().getTime(); var t = Date.now();
if ((t - this.lastTime) > 5000) { if ((t - this.lastTime) > 5000) {
SocketStore.sendMessage({channel_id: this.state.channel_id, action: "typing", props: {"parent_id": ""}, state: {} }); SocketStore.sendMessage({channelId: this.state.channelId, action: 'typing', props: {'parent_id': ''}, state: {}});
this.lastTime = t; this.lastTime = t;
} }
}, },
@@ -116,7 +112,7 @@ module.exports = React.createClass({
var draft = PostStore.getCurrentDraft(); var draft = PostStore.getCurrentDraft();
if (!draft) { if (!draft) {
draft = {} draft = {};
draft['previews'] = []; draft['previews'] = [];
draft['uploadsInProgress'] = []; draft['uploadsInProgress'] = [];
} }
@@ -125,11 +121,11 @@ module.exports = React.createClass({
}, },
resizePostHolder: function() { resizePostHolder: function() {
var height = $(window).height() - $(this.refs.topDiv.getDOMNode()).height() - $('#error_bar').outerHeight() - 50; var height = $(window).height() - $(this.refs.topDiv.getDOMNode()).height() - $('#error_bar').outerHeight() - 50;
$(".post-list-holder-by-time").css("height", height + "px"); $('.post-list-holder-by-time').css('height', height + 'px');
$(window).trigger('resize'); $(window).trigger('resize');
}, },
handleUploadStart: function(clientIds, channel_id) { handleUploadStart: function(clientIds, channelId) {
var draft = PostStore.getDraft(channel_id); var draft = PostStore.getDraft(channelId);
if (!draft) { if (!draft) {
draft = {}; draft = {};
draft['message'] = ''; draft['message'] = '';
@@ -138,12 +134,12 @@ module.exports = React.createClass({
} }
draft['uploadsInProgress'] = draft['uploadsInProgress'].concat(clientIds); draft['uploadsInProgress'] = draft['uploadsInProgress'].concat(clientIds);
PostStore.storeDraft(channel_id, draft); PostStore.storeDraft(channelId, draft);
this.setState({uploadsInProgress: draft['uploadsInProgress']}); this.setState({uploadsInProgress: draft['uploadsInProgress']});
}, },
handleFileUploadComplete: function(filenames, clientIds, channel_id) { handleFileUploadComplete: function(filenames, clientIds, channelId) {
var draft = PostStore.getDraft(channel_id); var draft = PostStore.getDraft(channelId);
if (!draft) { if (!draft) {
draft = {}; draft = {};
draft['message'] = ''; draft['message'] = '';
@@ -155,18 +151,18 @@ module.exports = React.createClass({
for (var i = 0; i < clientIds.length; i++) { for (var i = 0; i < clientIds.length; i++) {
var index = draft['uploadsInProgress'].indexOf(clientIds[i]); var index = draft['uploadsInProgress'].indexOf(clientIds[i]);
if (index != -1) { if (index !== -1) {
draft['uploadsInProgress'].splice(index, 1); draft['uploadsInProgress'].splice(index, 1);
} }
} }
draft['previews'] = draft['previews'].concat(filenames); draft['previews'] = draft['previews'].concat(filenames);
PostStore.storeDraft(channel_id, draft); PostStore.storeDraft(channelId, draft);
this.setState({uploadsInProgress: draft['uploadsInProgress'], previews: draft['previews']}); this.setState({uploadsInProgress: draft['uploadsInProgress'], previews: draft['previews']});
}, },
handleUploadError: function(err, clientId) { handleUploadError: function(err, clientId) {
var draft = PostStore.getDraft(this.state.channel_id); var draft = PostStore.getDraft(this.state.channelId);
if (!draft) { if (!draft) {
draft = {}; draft = {};
draft['message'] = ''; draft['message'] = '';
@@ -175,13 +171,13 @@ module.exports = React.createClass({
} }
var index = draft['uploadsInProgress'].indexOf(clientId); var index = draft['uploadsInProgress'].indexOf(clientId);
if (index != -1) { if (index !== -1) {
draft['uploadsInProgress'].splice(index, 1); draft['uploadsInProgress'].splice(index, 1);
} }
PostStore.storeDraft(this.state.channel_id, draft); PostStore.storeDraft(this.state.channelId, draft);
this.setState({uploadsInProgress: draft['uploadsInProgress'], server_error: err}); this.setState({uploadsInProgress: draft['uploadsInProgress'], serverError: err});
}, },
removePreview: function(id) { removePreview: function(id) {
var previews = this.state.previews; var previews = this.state.previews;
@@ -202,7 +198,7 @@ module.exports = React.createClass({
var draft = PostStore.getCurrentDraft(); var draft = PostStore.getCurrentDraft();
if (!draft) { if (!draft) {
draft = {} draft = {};
draft['message'] = ''; draft['message'] = '';
draft['uploadsInProgress'] = []; draft['uploadsInProgress'] = [];
} }
@@ -220,8 +216,8 @@ module.exports = React.createClass({
ChannelStore.removeChangeListener(this._onChange); ChannelStore.removeChangeListener(this._onChange);
}, },
_onChange: function() { _onChange: function() {
var channel_id = ChannelStore.getCurrentId(); var channelId = ChannelStore.getCurrentId();
if (this.state.channel_id != channel_id) { if (this.state.channelId !== channelId) {
var draft = PostStore.getCurrentDraft(); var draft = PostStore.getCurrentDraft();
var previews = []; var previews = [];
var messageText = ''; var messageText = '';
@@ -231,7 +227,10 @@ module.exports = React.createClass({
messageText = draft['message']; messageText = draft['message'];
uploadsInProgress = draft['uploadsInProgress']; uploadsInProgress = draft['uploadsInProgress'];
} }
this.setState({ channel_id: channel_id, messageText: messageText, initialText: messageText, submitting: false, limit_error: null, server_error: null, post_error: null, previews: previews, uploadsInProgress: uploadsInProgress }); this.setState({
channelId: channelId, messageText: messageText, initialText: messageText, submitting: false,
serverError: null, postError: null, previews: previews, uploadsInProgress: uploadsInProgress
});
} }
}, },
getInitialState: function() { getInitialState: function() {
@@ -244,13 +243,13 @@ module.exports = React.createClass({
previews = draft['previews']; previews = draft['previews'];
messageText = draft['message']; messageText = draft['message'];
} }
return { channel_id: ChannelStore.getCurrentId(), messageText: messageText, uploadsInProgress: [], previews: previews, submitting: false, initialText: messageText }; return {channelId: ChannelStore.getCurrentId(), messageText: messageText, uploadsInProgress: [], previews: previews, submitting: false, initialText: messageText};
}, },
getFileCount: function(channel_id) { getFileCount: function(channelId) {
if (channel_id === this.state.channel_id) { if (channelId === this.state.channelId) {
return this.state.previews.length + this.state.uploadsInProgress.length; return this.state.previews.length + this.state.uploadsInProgress.length;
} else { } else {
var draft = PostStore.getDraft(channel_id); var draft = PostStore.getDraft(channelId);
if (draft) { if (draft) {
return draft['previews'].length + draft['uploadsInProgress'].length; return draft['previews'].length + draft['uploadsInProgress'].length;
@@ -260,10 +259,21 @@ module.exports = React.createClass({
} }
}, },
render: function() { render: function() {
var server_error = this.state.server_error ? <div className='has-error'><label className='control-label'>{ this.state.server_error }</label></div> : null; var serverError = null;
var post_error = this.state.post_error ? <label className='control-label'>{this.state.post_error}</label> : null; if (this.state.serverError) {
serverError = (
<div className='has-error'>
<label className='control-label'>{this.state.serverError}</label>
</div>
);
}
var preview = <div/>; var postError = null;
if (this.state.postError) {
postError = <label className='control-label'>{this.state.postError}</label>;
}
var preview = null;
if (this.state.previews.length > 0 || this.state.uploadsInProgress.length > 0) { if (this.state.previews.length > 0 || this.state.uploadsInProgress.length > 0) {
preview = ( preview = (
<FilePreview <FilePreview
@@ -273,18 +283,23 @@ module.exports = React.createClass({
); );
} }
var postFooterClassName = 'post-create-footer';
if (postError) {
postFooterClassName += ' has-error';
}
return ( return (
<form id="create_post" ref="topDiv" role="form" onSubmit={this.handleSubmit}> <form id='create_post' ref='topDiv' role='form' onSubmit={this.handleSubmit}>
<div className="post-create"> <div className='post-create'>
<div className="post-create-body"> <div className='post-create-body'>
<Textbox <Textbox
onUserInput={this.handleUserInput} onUserInput={this.handleUserInput}
onKeyPress={this.postMsgKeyPress} onKeyPress={this.postMsgKeyPress}
messageText={this.state.messageText} messageText={this.state.messageText}
createMessage="Write a message..." createMessage='Write a message...'
channelId={this.state.channel_id} channelId={this.state.channelId}
id="post_textbox" id='post_textbox'
ref="textbox" /> ref='textbox' />
<FileUpload <FileUpload
ref='fileUpload' ref='fileUpload'
getFileCount={this.getFileCount} getFileCount={this.getFileCount}
@@ -292,11 +307,11 @@ module.exports = React.createClass({
onFileUpload={this.handleFileUploadComplete} onFileUpload={this.handleFileUploadComplete}
onUploadError={this.handleUploadError} /> onUploadError={this.handleUploadError} />
</div> </div>
<div className={post_error ? 'post-create-footer has-error' : 'post-create-footer'}> <div className={postFooterClassName}>
{ post_error } {postError}
{ server_error } {serverError}
{ preview } {preview}
<MsgTyping channelId={this.state.channel_id} parentId=""/> <MsgTyping channelId={this.state.channelId} parentId=''/>
</div> </div>
</div> </div>
</form> </form>

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

@@ -14,7 +14,7 @@ module.exports = React.createClass({
var element = $(this.refs.fileInput.getDOMNode()); var element = $(this.refs.fileInput.getDOMNode());
var files = element.prop('files'); var files = element.prop('files');
var channel_id = ChannelStore.getCurrentId(); var channelId = ChannelStore.getCurrentId();
this.props.onUploadError(null); this.props.onUploadError(null);
@@ -27,15 +27,15 @@ module.exports = React.createClass({
} }
} }
var numToUpload = Math.min(Constants.MAX_UPLOAD_FILES - this.props.getFileCount(channel_id), numFiles); var numToUpload = Math.min(Constants.MAX_UPLOAD_FILES - this.props.getFileCount(channelId), numFiles);
if (numFiles > numToUpload) { if (numFiles > numToUpload) {
this.props.onUploadError("Uploads limited to " + Constants.MAX_UPLOAD_FILES + " files maximum. Please use additional posts for more files."); this.props.onUploadError('Uploads limited to ' + Constants.MAX_UPLOAD_FILES + ' files maximum. Please use additional posts for more files.');
} }
for (var i = 0; i < files.length && i < numToUpload; i++) { for (var i = 0; i < files.length && i < numToUpload; i++) {
if (files[i].size > Constants.MAX_FILE_SIZE) { if (files[i].size > Constants.MAX_FILE_SIZE) {
this.props.onUploadError("Files must be no more than " + Constants.MAX_FILE_SIZE/1000000 + " MB"); this.props.onUploadError('Files must be no more than ' + Constants.MAX_FILE_SIZE / 1000000 + ' MB');
continue; continue;
} }
@@ -43,15 +43,15 @@ module.exports = React.createClass({
var clientId = utils.generateId(); var clientId = utils.generateId();
// Prepare data to be uploaded. // Prepare data to be uploaded.
formData = new FormData(); var formData = new FormData();
formData.append('channel_id', channel_id); formData.append('channel_id', channelId);
formData.append('files', files[i], files[i].name); formData.append('files', files[i], files[i].name);
formData.append('client_ids', clientId); formData.append('client_ids', clientId);
var request = client.uploadFile(formData, var request = client.uploadFile(formData,
function(data) { function(data) {
parsedData = $.parseJSON(data); var parsedData = $.parseJSON(data);
this.props.onFileUpload(parsedData['filenames'], parsedData['client_ids'], channel_id); this.props.onFileUpload(parsedData['filenames'], parsedData['client_ids'], channelId);
var requests = this.state.requests; var requests = this.state.requests;
for (var i = 0; i < parsedData['client_ids'].length; i++) { for (var i = 0; i < parsedData['client_ids'].length; i++) {
@@ -68,26 +68,26 @@ module.exports = React.createClass({
requests[clientId] = request; requests[clientId] = request;
this.setState({requests: requests}); this.setState({requests: requests});
this.props.onUploadStart([clientId], channel_id); this.props.onUploadStart([clientId], channelId);
} }
// clear file input for all modern browsers // clear file input for all modern browsers
try{ try {
element[0].value = ''; element[0].value = '';
if(element.value){ if (element.value) {
element[0].type = "text"; element[0].type = 'text';
element[0].type = "file"; element[0].type = 'file';
} }
}catch(e){} } catch(e) {}
}, },
componentDidMount: function() { componentDidMount: function() {
var inputDiv = this.refs.input.getDOMNode(); var inputDiv = this.refs.input.getDOMNode();
var self = this; var self = this;
document.addEventListener("paste", function(e) { document.addEventListener('paste', function(e) {
var textarea = $(inputDiv.parentNode.parentNode).find('.custom-textarea')[0]; var textarea = $(inputDiv.parentNode.parentNode).find('.custom-textarea')[0];
if (textarea != e.target && !$.contains(textarea,e.target)) { if (textarea !== e.target && !$.contains(textarea, e.target)) {
return; return;
} }
@@ -99,50 +99,69 @@ module.exports = React.createClass({
var numItems = 0; var numItems = 0;
if (items) { if (items) {
for (var i = 0; i < items.length; i++) { for (var i = 0; i < items.length; i++) {
if (items[i].type.indexOf("image") !== -1) { if (items[i].type.indexOf('image') !== -1) {
var ext = items[i].type.split('/')[1].toLowerCase();
if (ext === 'jpeg') {
ext = 'jpg';
}
ext = items[i].type.split("/")[1].toLowerCase(); if (Constants.IMAGE_TYPES.indexOf(ext) < 0) {
ext = ext == 'jpeg' ? 'jpg' : ext; continue;
}
if (Constants.IMAGE_TYPES.indexOf(ext) < 0) return; numItems++;
numItems++
} }
} }
var numToUpload = Math.min(Constants.MAX_UPLOAD_FILES - self.props.getFileCount(channel_id), numItems); var numToUpload = Math.min(Constants.MAX_UPLOAD_FILES - self.props.getFileCount(channelId), numItems);
if (numItems > numToUpload) { if (numItems > numToUpload) {
self.props.onUploadError("Uploads limited to " + Constants.MAX_UPLOAD_FILES + " files maximum. Please use additional posts for more files."); self.props.onUploadError('Uploads limited to ' + Constants.MAX_UPLOAD_FILES + ' files maximum. Please use additional posts for more files.');
} }
for (var i = 0; i < items.length && i < numToUpload; i++) { for (var i = 0; i < items.length && i < numToUpload; i++) {
if (items[i].type.indexOf("image") !== -1) { if (items[i].type.indexOf('image') !== -1) {
var file = items[i].getAsFile(); var file = items[i].getAsFile();
ext = items[i].type.split("/")[1].toLowerCase(); var ext = items[i].type.split('/')[1].toLowerCase();
ext = ext == 'jpeg' ? 'jpg' : ext; if (ext === 'jpeg') {
ext = 'jpg';
}
if (Constants.IMAGE_TYPES.indexOf(ext) < 0) return; if (Constants.IMAGE_TYPES.indexOf(ext) < 0) {
continue;
}
var channel_id = ChannelStore.getCurrentId(); var channelId = ChannelStore.getCurrentId();
// generate a unique id that can be used by other components to refer back to this file upload // generate a unique id that can be used by other components to refer back to this file upload
var clientId = utils.generateId(); var clientId = utils.generateId();
formData = new FormData(); var formData = new FormData();
formData.append('channel_id', channel_id); formData.append('channel_id', channelId);
var d = new Date(); var d = new Date();
var hour = d.getHours() < 10 ? "0" + d.getHours() : String(d.getHours()); var hour;
var min = d.getMinutes() < 10 ? "0" + d.getMinutes() : String(d.getMinutes()); if (d.getHours() < 10) {
var name = "Image Pasted at "+d.getFullYear()+"-"+d.getMonth()+"-"+d.getDate()+" "+hour+"-"+min+"." + ext; hour = '0' + d.getHours();
} else {
hour = String(d.getHours());
}
var min;
if (d.getMinutes() < 10) {
min = '0' + d.getMinutes();
} else {
min = String(d.getMinutes());
}
var name = 'Image Pasted at ' + d.getFullYear() + '-' + d.getMonth() + '-' + d.getDate() + ' ' + hour + '-' + min + '.' + ext;
formData.append('files', file, name); formData.append('files', file, name);
formData.append('client_ids', clientId); formData.append('client_ids', clientId);
var request = client.uploadFile(formData, var request = client.uploadFile(formData,
function(data) { function(data) {
parsedData = $.parseJSON(data); var parsedData = $.parseJSON(data);
self.props.onFileUpload(parsedData['filenames'], parsedData['client_ids'], channel_id); self.props.onFileUpload(parsedData['filenames'], parsedData['client_ids'], channelId);
var requests = self.state.requests; var requests = self.state.requests;
for (var i = 0; i < parsedData['client_ids'].length; i++) { for (var i = 0; i < parsedData['client_ids'].length; i++) {
@@ -159,7 +178,7 @@ module.exports = React.createClass({
requests[clientId] = request; requests[clientId] = request;
self.setState({requests: requests}); self.setState({requests: requests});
self.props.onUploadStart([clientId], channel_id); self.props.onUploadStart([clientId], channelId);
} }
} }
} }
@@ -178,7 +197,12 @@ module.exports = React.createClass({
}, },
render: function() { render: function() {
return ( return (
<span ref="input" className="btn btn-file"><span><i className="glyphicon glyphicon-paperclip"></i></span><input ref="fileInput" type="file" onChange={this.handleChange} multiple/></span> <span ref='input' className='btn btn-file'>
<span>
<i className='glyphicon glyphicon-paperclip' />
</span>
<input ref='fileInput' type='file' onChange={this.handleChange} multiple/>
</span>
); );
} }
}); });