diff options
Diffstat (limited to 'webapp/components/create_comment.jsx')
-rw-r--r-- | webapp/components/create_comment.jsx | 69 |
1 files changed, 26 insertions, 43 deletions
diff --git a/webapp/components/create_comment.jsx b/webapp/components/create_comment.jsx index f7564f396..bf23f7b44 100644 --- a/webapp/components/create_comment.jsx +++ b/webapp/components/create_comment.jsx @@ -19,33 +19,14 @@ import * as GlobalActions from 'actions/global_actions.jsx'; import Constants from 'utils/constants.jsx'; -import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'react-intl'; +import {FormattedMessage} from 'react-intl'; const ActionTypes = Constants.ActionTypes; const KeyCodes = Constants.KeyCodes; -const holders = defineMessages({ - commentLength: { - id: 'create_comment.commentLength', - defaultMessage: 'Comment length must be less than {max} characters.' - }, - comment: { - id: 'create_comment.comment', - defaultMessage: 'Add Comment' - }, - addComment: { - id: 'create_comment.addComment', - defaultMessage: 'Add a comment...' - }, - commentTitle: { - id: 'create_comment.commentTitle', - defaultMessage: 'Comment' - } -}); - import React from 'react'; -class CreateComment extends React.Component { +export default class CreateComment extends React.Component { constructor(props) { super(props); @@ -53,7 +34,7 @@ class CreateComment extends React.Component { this.handleSubmit = this.handleSubmit.bind(this); this.commentMsgKeyPress = this.commentMsgKeyPress.bind(this); - this.handleUserInput = this.handleUserInput.bind(this); + this.handleInput = this.handleInput.bind(this); this.handleKeyDown = this.handleKeyDown.bind(this); this.handleUploadClick = this.handleUploadClick.bind(this); this.handleUploadStart = this.handleUploadStart.bind(this); @@ -76,8 +57,7 @@ class CreateComment extends React.Component { previews: draft.previews, submitting: false, ctrlSend: PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter'), - showPostDeletedModal: false, - typing: false + showPostDeletedModal: false }; } @@ -126,7 +106,15 @@ class CreateComment extends React.Component { } if (post.message.length > Constants.CHARACTER_LIMIT) { - this.setState({postError: this.props.intl.formatMessage(holders.commentLength, {max: Constants.CHARACTER_LIMIT})}); + this.setState({ + postError: ( + <FormattedMessage + id='create_comment.commentLength' + defaultMessage='Comment length must be less than {max} characters.' + values={{max: Constants.CHARACTER_LIMIT}} + /> + ) + }); return; } @@ -175,13 +163,12 @@ class CreateComment extends React.Component { submitting: false, postError: null, previews: [], - serverError: null, - typing: false + serverError: null }); } commentMsgKeyPress(e) { - if (this.state.ctrlSend && e.ctrlKey || !this.state.ctrlSend) { + if ((this.state.ctrlSend && e.ctrlKey) || !this.state.ctrlSend) { if (e.which === KeyCodes.ENTER && !e.shiftKey && !e.altKey) { e.preventDefault(); ReactDOM.findDOMNode(this.refs.textbox).blur(); @@ -192,15 +179,16 @@ class CreateComment extends React.Component { GlobalActions.emitLocalUserTypingEvent(this.props.channelId, this.props.rootId); } - handleUserInput(messageText) { + handleInput(e) { + const messageText = e.target.value; + const draft = PostStore.getCommentDraft(this.props.rootId); draft.message = messageText; PostStore.storeCommentDraft(this.props.rootId, draft); $('.post-right__scroll').parent().scrollTop($('.post-right__scroll')[0].scrollHeight); - const typing = messageText !== ''; - this.setState({messageText, typing}); + this.setState({messageText}); } handleKeyDown(e) { @@ -220,7 +208,7 @@ class CreateComment extends React.Component { AppDispatcher.handleViewAction({ type: ActionTypes.RECEIVED_EDIT_POST, refocusId: '#reply_textbox', - title: this.props.intl.formatMessage(holders.commentTitle), + title: Utils.localizeMessage('create_comment.commentTitle', 'Comment'), message: lastPost.message, postId: lastPost.id, channelId: lastPost.channel_id, @@ -313,13 +301,13 @@ class CreateComment extends React.Component { draft.uploadsInProgress = uploadsInProgress; PostStore.storeCommentDraft(this.props.rootId, draft); - this.setState({previews: previews, uploadsInProgress: uploadsInProgress}); + this.setState({previews, uploadsInProgress}); } componentWillReceiveProps(newProps) { if (newProps.rootId !== this.props.rootId) { const draft = PostStore.getCommentDraft(newProps.rootId); - this.setState({messageText: draft.message, uploadsInProgress: draft.uploadsInProgress, previews: draft.previews, typing: false}); + this.setState({messageText: draft.message, uploadsInProgress: draft.uploadsInProgress, previews: draft.previews}); } } @@ -395,7 +383,6 @@ class CreateComment extends React.Component { ); } - const {formatMessage} = this.props.intl; return ( <form onSubmit={this.handleSubmit}> <div className='post-create'> @@ -405,12 +392,11 @@ class CreateComment extends React.Component { > <div className='post-body__cell'> <Textbox - onUserInput={this.handleUserInput} + onInput={this.handleInput} onKeyPress={this.commentMsgKeyPress} onKeyDown={this.handleKeyDown} messageText={this.state.messageText} - typing={this.state.typing} - createMessage={formatMessage(holders.addComment)} + createMessage={Utils.localizeMessage('create_comment.addComment', 'Add a comment...')} initialText='' supportsCommands={false} id='reply_textbox' @@ -436,7 +422,7 @@ class CreateComment extends React.Component { <input type='button' className='btn btn-primary comment-btn pull-right' - value={formatMessage(holders.comment)} + value={Utils.localizeMessage('create_comment.comment', 'Add Comment')} onClick={this.handleSubmit} /> {uploadsInProgressText} @@ -455,9 +441,6 @@ class CreateComment extends React.Component { } CreateComment.propTypes = { - intl: intlShape.isRequired, channelId: React.PropTypes.string.isRequired, rootId: React.PropTypes.string.isRequired -}; - -export default injectIntl(CreateComment); +};
\ No newline at end of file |