diff options
-rw-r--r-- | webapp/components/channel_switch_modal.jsx | 8 | ||||
-rw-r--r-- | webapp/components/create_comment.jsx | 65 | ||||
-rw-r--r-- | webapp/components/create_post.jsx | 56 | ||||
-rw-r--r-- | webapp/components/edit_post_modal.jsx | 51 | ||||
-rw-r--r-- | webapp/components/search_bar.jsx | 51 | ||||
-rw-r--r-- | webapp/components/suggestion/suggestion_box.jsx | 51 | ||||
-rw-r--r-- | webapp/components/textbox.jsx | 14 |
7 files changed, 128 insertions, 168 deletions
diff --git a/webapp/components/channel_switch_modal.jsx b/webapp/components/channel_switch_modal.jsx index 9bb98d74d..18e0f9f59 100644 --- a/webapp/components/channel_switch_modal.jsx +++ b/webapp/components/channel_switch_modal.jsx @@ -21,7 +21,7 @@ export default class SwitchChannelModal extends React.Component { constructor() { super(); - this.onUserInput = this.onUserInput.bind(this); + this.onInput = this.onInput.bind(this); this.onShow = this.onShow.bind(this); this.onHide = this.onHide.bind(this); this.handleKeyDown = this.handleKeyDown.bind(this); @@ -57,8 +57,8 @@ export default class SwitchChannelModal extends React.Component { this.props.onHide(); } - onUserInput(message) { - this.setState({text: message}); + onInput(e) { + this.setState({text: e.target.value}); } handleKeyDown(e) { @@ -122,7 +122,7 @@ export default class SwitchChannelModal extends React.Component { ref='search' className='form-control focused' type='input' - onUserInput={this.onUserInput} + onInput={this.onInput} value={this.state.text} onKeyDown={this.handleKeyDown} listComponent={SuggestionList} diff --git a/webapp/components/create_comment.jsx b/webapp/components/create_comment.jsx index 1f21febf1..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,8 +163,7 @@ class CreateComment extends React.Component { submitting: false, postError: null, previews: [], - serverError: null, - typing: false + serverError: null }); } @@ -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, @@ -319,7 +307,7 @@ class CreateComment extends React.Component { 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 diff --git a/webapp/components/create_post.jsx b/webapp/components/create_post.jsx index 5101c751d..9b61cca24 100644 --- a/webapp/components/create_post.jsx +++ b/webapp/components/create_post.jsx @@ -23,7 +23,7 @@ import PreferenceStore from 'stores/preference_store.jsx'; import Constants from 'utils/constants.jsx'; -import {intlShape, injectIntl, defineMessages, FormattedHTMLMessage} from 'react-intl'; +import {FormattedHTMLMessage} from 'react-intl'; import {browserHistory} from 'react-router/es6'; const Preferences = Constants.Preferences; @@ -31,24 +31,9 @@ const TutorialSteps = Constants.TutorialSteps; const ActionTypes = Constants.ActionTypes; const KeyCodes = Constants.KeyCodes; -const holders = defineMessages({ - comment: { - id: 'create_post.comment', - defaultMessage: 'Comment' - }, - post: { - id: 'create_post.post', - defaultMessage: 'Post' - }, - write: { - id: 'create_post.write', - defaultMessage: 'Write a message...' - } -}); - import React from 'react'; -class CreatePost extends React.Component { +export default class CreatePost extends React.Component { constructor(props) { super(props); @@ -57,7 +42,7 @@ class CreatePost extends React.Component { this.getCurrentDraft = this.getCurrentDraft.bind(this); this.handleSubmit = this.handleSubmit.bind(this); this.postMsgKeyPress = this.postMsgKeyPress.bind(this); - this.handleUserInput = this.handleUserInput.bind(this); + this.handleInput = this.handleInput.bind(this); this.handleUploadClick = this.handleUploadClick.bind(this); this.handleUploadStart = this.handleUploadStart.bind(this); this.handleFileUploadComplete = this.handleFileUploadComplete.bind(this); @@ -87,8 +72,7 @@ class CreatePost extends React.Component { ctrlSend: PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter'), fullWidthTextBox: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN, showTutorialTip: false, - showPostDeletedModal: false, - typing: false + showPostDeletedModal: false }; } @@ -133,7 +117,7 @@ class CreatePost extends React.Component { MessageHistoryStore.storeMessageInHistory(this.state.messageText); - this.setState({submitting: true, serverError: null, typing: false}); + this.setState({submitting: true, serverError: null}); if (post.message.indexOf('/') === 0) { ChannelActions.executeCommand( @@ -223,9 +207,9 @@ class CreatePost extends React.Component { GlobalActions.emitLocalUserTypingEvent(this.state.channelId, ''); } - handleUserInput(messageText) { - const typing = messageText !== ''; - this.setState({messageText, typing}); + handleInput(e) { + const messageText = e.target.value; + this.setState({messageText}); const draft = PostStore.getCurrentDraft(); draft.message = messageText; @@ -372,7 +356,7 @@ class CreatePost extends React.Component { if (this.state.channelId !== channelId) { const draft = this.getCurrentDraft(); - this.setState({channelId, messageText: draft.messageText, initialText: draft.messageText, submitting: false, typing: false, serverError: null, postError: null, previews: draft.previews, uploadsInProgress: draft.uploadsInProgress}); + this.setState({channelId, messageText: draft.messageText, initialText: draft.messageText, submitting: false, serverError: null, postError: null, previews: draft.previews, uploadsInProgress: draft.uploadsInProgress}); } } @@ -408,8 +392,13 @@ class CreatePost extends React.Component { if (!lastPost) { return; } - const {formatMessage} = this.props.intl; - var type = (lastPost.root_id && lastPost.root_id.length > 0) ? formatMessage(holders.comment) : formatMessage(holders.post); + + let type; + if (lastPost.root_id && lastPost.root_id.length > 0) { + type = Utils.localizeMessage('create_post.comment', 'Comment'); + } else { + type = Utils.localizeMessage('create_post.post', 'Post'); + } AppDispatcher.handleViewAction({ type: ActionTypes.RECEIVED_EDIT_POST, @@ -519,12 +508,11 @@ class CreatePost extends React.Component { <div className='post-create-body'> <div className='post-body__cell'> <Textbox - onUserInput={this.handleUserInput} + onInput={this.handleInput} onKeyPress={this.postMsgKeyPress} onKeyDown={this.handleKeyDown} messageText={this.state.messageText} - typing={this.state.typing} - createMessage={this.props.intl.formatMessage(holders.write)} + createMessage={Utils.localizeMessage('create_post.write', 'Write a message...')} channelId={this.state.channelId} id='post_textbox' ref='textbox' @@ -565,10 +553,4 @@ class CreatePost extends React.Component { </form> ); } -} - -CreatePost.propTypes = { - intl: intlShape.isRequired -}; - -export default injectIntl(CreatePost); +}
\ No newline at end of file diff --git a/webapp/components/edit_post_modal.jsx b/webapp/components/edit_post_modal.jsx index 1ddaee535..8be0ba243 100644 --- a/webapp/components/edit_post_modal.jsx +++ b/webapp/components/edit_post_modal.jsx @@ -11,31 +11,25 @@ import BrowserStore from 'stores/browser_store.jsx'; import PostStore from 'stores/post_store.jsx'; import MessageHistoryStore from 'stores/message_history_store.jsx'; import PreferenceStore from 'stores/preference_store.jsx'; +import * as Utils from 'utils/utils.jsx'; import Constants from 'utils/constants.jsx'; -import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'react-intl'; +import {FormattedMessage} from 'react-intl'; var KeyCodes = Constants.KeyCodes; -const holders = defineMessages({ - editPost: { - id: 'edit_post.editPost', - defaultMessage: 'Edit the post...' - } -}); - import React from 'react'; -class EditPostModal extends React.Component { +export default class EditPostModal extends React.Component { constructor(props) { super(props); this.handleEdit = this.handleEdit.bind(this); - this.handleEditInput = this.handleEditInput.bind(this); this.handleEditKeyPress = this.handleEditKeyPress.bind(this); this.handleEditPostEvent = this.handleEditPostEvent.bind(this); this.handleKeyDown = this.handleKeyDown.bind(this); + this.handleInput = this.handleInput.bind(this); this.onPreferenceChange = this.onPreferenceChange.bind(this); this.onModalHidden = this.onModalHidden.bind(this); this.onModalShow = this.onModalShow.bind(this); @@ -43,8 +37,9 @@ class EditPostModal extends React.Component { this.onModalHide = this.onModalHide.bind(this); this.onModalKeyDown = this.onModalKeyDown.bind(this); - this.state = {editText: '', originalText: '', title: '', post_id: '', channel_id: '', comments: 0, refocusId: '', typing: false}; + this.state = {editText: '', originalText: '', title: '', post_id: '', channel_id: '', comments: 0, refocusId: ''}; } + handleEdit() { var updatedPost = {}; updatedPost.message = this.state.editText.trim(); @@ -82,10 +77,13 @@ class EditPostModal extends React.Component { $('#edit_post').modal('hide'); } - handleEditInput(editMessage) { - const typing = editMessage !== ''; - this.setState({editText: editMessage, typing}); + + handleInput(e) { + this.setState({ + editText: e.target.value + }); } + handleEditKeyPress(e) { if (!this.state.ctrlSend && e.which === KeyCodes.ENTER && !e.shiftKey && !e.altKey) { e.preventDefault(); @@ -97,6 +95,7 @@ class EditPostModal extends React.Component { this.handleSubmit(e); } } + handleEditPostEvent(options) { this.setState({ editText: options.message || '', @@ -105,25 +104,28 @@ class EditPostModal extends React.Component { post_id: options.postId || '', channel_id: options.channelId || '', comments: options.comments || 0, - refocusId: options.refocusId || '', - typing: false + refocusId: options.refocusId || '' }); $(ReactDOM.findDOMNode(this.refs.modal)).modal('show'); } + handleKeyDown(e) { if (this.state.ctrlSend && e.keyCode === KeyCodes.ENTER && e.ctrlKey === true) { this.handleEdit(e); } } + onPreferenceChange() { this.setState({ ctrlSend: PreferenceStore.getBool(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter') }); } + onModalHidden() { this.setState({editText: '', originalText: '', title: '', channel_id: '', post_id: '', comments: 0, refocusId: '', error: '', typing: false}); } + onModalShow(e) { var button = e.relatedTarget; if (!button) { @@ -140,9 +142,11 @@ class EditPostModal extends React.Component { typing: false }); } + onModalShown() { this.refs.editbox.focus(); } + onModalHide() { if (this.state.refocusId !== '') { setTimeout(() => { @@ -150,11 +154,13 @@ class EditPostModal extends React.Component { }); } } + onModalKeyDown(e) { if (e.which === Constants.KeyCodes.ESCAPE) { e.stopPropagation(); } } + componentDidMount() { $(this.refs.modal).on('hidden.bs.modal', this.onModalHidden); $(this.refs.modal).on('show.bs.modal', this.onModalShow); @@ -164,6 +170,7 @@ class EditPostModal extends React.Component { PostStore.addEditPostListener(this.handleEditPostEvent); PreferenceStore.addChangeListener(this.onPreferenceChange); } + componentWillUnmount() { $(this.refs.modal).off('hidden.bs.modal', this.onModalHidden); $(this.refs.modal).off('show.bs.modal', this.onModalShow); @@ -173,6 +180,7 @@ class EditPostModal extends React.Component { PostStore.removeEditPostListner(this.handleEditPostEvent); PreferenceStore.removeChangeListener(this.onPreferenceChange); } + render() { var error = (<div className='form-group'><br/></div>); if (this.state.error) { @@ -212,12 +220,11 @@ class EditPostModal extends React.Component { </div> <div className='edit-modal-body modal-body'> <Textbox - onUserInput={this.handleEditInput} + onInput={this.handleInput} onKeyPress={this.handleEditKeyPress} onKeyDown={this.handleKeyDown} messageText={this.state.editText} - typing={this.state.typing} - createMessage={this.props.intl.formatMessage(holders.editPost)} + createMessage={Utils.localizeMessage('edit_post.editPost', 'Edit the post...')} supportsCommands={false} id='edit_textbox' ref='editbox' @@ -252,9 +259,3 @@ class EditPostModal extends React.Component { ); } } - -EditPostModal.propTypes = { - intl: intlShape.isRequired -}; - -export default injectIntl(EditPostModal); diff --git a/webapp/components/search_bar.jsx b/webapp/components/search_bar.jsx index d8725a7aa..290572612 100644 --- a/webapp/components/search_bar.jsx +++ b/webapp/components/search_bar.jsx @@ -3,7 +3,7 @@ import $ from 'jquery'; import ReactDOM from 'react-dom'; -import client from 'utils/web_client.jsx'; +import Client from 'utils/web_client.jsx'; import * as AsyncClient from 'utils/async_client.jsx'; import SearchStore from 'stores/search_store.jsx'; import AppDispatcher from '../dispatcher/app_dispatcher.jsx'; @@ -11,30 +11,23 @@ import SuggestionBox from './suggestion/suggestion_box.jsx'; import SearchChannelProvider from './suggestion/search_channel_provider.jsx'; import SearchSuggestionList from './suggestion/search_suggestion_list.jsx'; import SearchUserProvider from './suggestion/search_user_provider.jsx'; -import * as utils from 'utils/utils.jsx'; +import * as Utils from 'utils/utils.jsx'; import Constants from 'utils/constants.jsx'; -import {intlShape, injectIntl, defineMessages, FormattedMessage, FormattedHTMLMessage} from 'react-intl'; +import {FormattedMessage, FormattedHTMLMessage} from 'react-intl'; var ActionTypes = Constants.ActionTypes; import {Popover} from 'react-bootstrap'; -const holders = defineMessages({ - search: { - id: 'search_bar.search', - defaultMessage: 'Search' - } -}); - import React from 'react'; -class SearchBar extends React.Component { +export default class SearchBar extends React.Component { constructor() { super(); this.mounted = false; this.onListenerChange = this.onListenerChange.bind(this); - this.handleUserInput = this.handleUserInput.bind(this); + this.handleInput = this.handleInput.bind(this); this.handleUserFocus = this.handleUserFocus.bind(this); this.handleUserBlur = this.handleUserBlur.bind(this); this.performSearch = this.performSearch.bind(this); @@ -46,24 +39,28 @@ class SearchBar extends React.Component { this.suggestionProviders = [new SearchChannelProvider(), new SearchUserProvider()]; } + getSearchTermStateFromStores() { var term = SearchStore.getSearchTerm() || ''; return { searchTerm: term }; } + componentDidMount() { SearchStore.addSearchTermChangeListener(this.onListenerChange); this.mounted = true; } + componentWillUnmount() { SearchStore.removeSearchTermChangeListener(this.onListenerChange); this.mounted = false; } + onListenerChange(doSearch, isMentionSearch) { if (this.mounted) { var newState = this.getSearchTermStateFromStores(); - if (!utils.areObjectsEqual(newState, this.state)) { + if (!Utils.areObjectsEqual(newState, this.state)) { this.setState(newState); } if (doSearch) { @@ -71,9 +68,11 @@ class SearchBar extends React.Component { } } } + clearFocus() { $('.search-bar__container').removeClass('focused'); } + handleClose(e) { e.preventDefault(); @@ -94,30 +93,34 @@ class SearchBar extends React.Component { postId: null }); } - handleUserInput(text) { - var term = text; + + handleInput(e) { + var term = e.target.value; SearchStore.storeSearchTerm(term); SearchStore.emitSearchTermChange(false); this.setState({searchTerm: term}); } + handleUserBlur() { this.setState({focused: false}); } + handleUserFocus() { $('.search-bar__container').addClass('focused'); this.setState({focused: true}); } + performSearch(terms, isMentionSearch) { if (terms.length) { this.setState({isSearching: true}); - client.search( + Client.search( terms, isMentionSearch, (data) => { this.setState({isSearching: false}); - if (utils.isMobile()) { + if (Utils.isMobile()) { ReactDOM.findDOMNode(this.refs.search).value = ''; } @@ -134,6 +137,7 @@ class SearchBar extends React.Component { ); } } + handleSubmit(e) { e.preventDefault(); this.performSearch(this.state.searchTerm.trim()); @@ -178,11 +182,11 @@ class SearchBar extends React.Component { <SuggestionBox ref='search' className='form-control search-bar' - placeholder={this.props.intl.formatMessage(holders.search)} + placeholder={Utils.localizeMessage('search_bar.search', 'Search')} value={this.state.searchTerm} onFocus={this.handleUserFocus} onBlur={this.handleUserBlur} - onUserInput={this.handleUserInput} + onInput={this.handleInput} listComponent={SearchSuggestionList} providers={this.suggestionProviders} type='search' @@ -202,11 +206,4 @@ class SearchBar extends React.Component { </div> ); } -} - -SearchBar.propTypes = { - intl: intlShape.isRequired -}; - -export default injectIntl(SearchBar); - +}
\ No newline at end of file diff --git a/webapp/components/suggestion/suggestion_box.jsx b/webapp/components/suggestion/suggestion_box.jsx index 47426f6db..d4b150787 100644 --- a/webapp/components/suggestion/suggestion_box.jsx +++ b/webapp/components/suggestion/suggestion_box.jsx @@ -21,8 +21,8 @@ export default class SuggestionBox extends React.Component { this.handleDocumentClick = this.handleDocumentClick.bind(this); - this.handleChange = this.handleChange.bind(this); this.handleCompleteWord = this.handleCompleteWord.bind(this); + this.handleInput = this.handleInput.bind(this); this.handleKeyDown = this.handleKeyDown.bind(this); this.handlePretextChanged = this.handlePretextChanged.bind(this); @@ -70,27 +70,24 @@ export default class SuggestionBox extends React.Component { } } - handleChange(e) { + handleInput(e) { const textbox = ReactDOM.findDOMNode(this.refs.textbox); const caret = Utils.getCaretPosition(textbox); const pretext = textbox.value.substring(0, caret); GlobalActions.emitSuggestionPretextChanged(this.suggestionId, pretext); - if (this.props.onUserInput) { - this.props.onUserInput(textbox.value); - } - - if (this.props.onChange) { - this.props.onChange(e); + if (this.props.onInput) { + this.props.onInput(e); } } handleCompleteWord(term, matchedPretext) { - const textbox = ReactDOM.findDOMNode(this.refs.textbox); + const textbox = this.refs.textbox; const caret = Utils.getCaretPosition(textbox); const text = textbox.value; const pretext = text.substring(0, caret); + let prefix; if (pretext.endsWith(matchedPretext)) { prefix = pretext.substring(0, pretext.length - matchedPretext.length); @@ -104,10 +101,17 @@ export default class SuggestionBox extends React.Component { const suffix = text.substring(caret); - if (this.props.onUserInput) { - this.props.onUserInput(prefix + term + ' ' + suffix); + this.refs.textbox.value = prefix + term + ' ' + suffix; + + if (this.props.onInput) { + // fake an input event to send back to parent components + const e = { + target: this.refs.textbox + }; + + // don't call handleInput or we'll get into an event loop + this.props.onInput(e); } - this.refs.textbox.value = (prefix + term + ' ' + suffix); // set the caret position after the next rendering window.requestAnimationFrame(() => { @@ -144,18 +148,15 @@ export default class SuggestionBox extends React.Component { } render() { - const newProps = Object.assign({}, this.props, { - onChange: this.handleChange, - onKeyDown: this.handleKeyDown - }); - let textbox = null; if (this.props.type === 'input') { textbox = ( <input ref='textbox' type='text' - {...newProps} + {...this.props} + onInput={this.handleInput} + onKeyDown={this.handleKeyDown} /> ); } else if (this.props.type === 'search') { @@ -163,7 +164,9 @@ export default class SuggestionBox extends React.Component { <input ref='textbox' type='search' - {...newProps} + {...this.props} + onInput={this.handleInput} + onKeyDown={this.handleKeyDown} /> ); } else if (this.props.type === 'textarea') { @@ -171,7 +174,9 @@ export default class SuggestionBox extends React.Component { <TextareaAutosize id={this.suggestionId} ref='textbox' - {...newProps} + {...this.props} + onInput={this.handleInput} + onKeyDown={this.handleKeyDown} /> ); } @@ -213,12 +218,10 @@ SuggestionBox.propTypes = { listComponent: React.PropTypes.func.isRequired, type: React.PropTypes.oneOf(['input', 'textarea', 'search']).isRequired, value: React.PropTypes.string.isRequired, - onUserInput: React.PropTypes.func, providers: React.PropTypes.arrayOf(React.PropTypes.object), listStyle: React.PropTypes.string, // explicitly name any input event handlers we override and need to manually call - onChange: React.PropTypes.func, - onKeyDown: React.PropTypes.func, - onHeightChange: React.PropTypes.func + onInput: React.PropTypes.func, + onKeyDown: React.PropTypes.func }; diff --git a/webapp/components/textbox.jsx b/webapp/components/textbox.jsx index 40e6aec4a..24f58f43e 100644 --- a/webapp/components/textbox.jsx +++ b/webapp/components/textbox.jsx @@ -176,11 +176,6 @@ export default class Textbox extends React.Component { </div> ); - const otherProps = {}; - if (!this.props.typing) { - otherProps.value = this.props.messageText; - } - return ( <div ref='wrapper' @@ -194,7 +189,7 @@ export default class Textbox extends React.Component { spellCheck='true' maxLength={Constants.MAX_POST_LEN} placeholder={this.props.createMessage} - onUserInput={this.props.onUserInput} + onInput={this.props.onInput} onKeyPress={this.handleKeyPress} onKeyDown={this.handleKeyDown} onHeightChange={this.handleHeightChange} @@ -202,7 +197,7 @@ export default class Textbox extends React.Component { listComponent={SuggestionList} providers={this.suggestionProviders} channelId={this.props.channelId} - {...otherProps} + value={this.props.messageText} /> <div ref='preview' @@ -239,10 +234,9 @@ Textbox.propTypes = { id: React.PropTypes.string.isRequired, channelId: React.PropTypes.string, messageText: React.PropTypes.string.isRequired, - onUserInput: React.PropTypes.func.isRequired, + onInput: React.PropTypes.func.isRequired, onKeyPress: React.PropTypes.func.isRequired, createMessage: React.PropTypes.string.isRequired, onKeyDown: React.PropTypes.func, - supportsCommands: React.PropTypes.bool.isRequired, - typing: React.PropTypes.bool.isRequired + supportsCommands: React.PropTypes.bool.isRequired }; |