diff options
Diffstat (limited to 'web/react')
-rw-r--r-- | web/react/components/create_comment.jsx | 15 | ||||
-rw-r--r-- | web/react/components/create_post.jsx | 48 | ||||
-rw-r--r-- | web/react/components/file_upload.jsx | 2 | ||||
-rw-r--r-- | web/react/components/textbox.jsx | 12 |
4 files changed, 36 insertions, 41 deletions
diff --git a/web/react/components/create_comment.jsx b/web/react/components/create_comment.jsx index 8c49315e7..9e7c67515 100644 --- a/web/react/components/create_comment.jsx +++ b/web/react/components/create_comment.jsx @@ -51,6 +51,7 @@ class CreateComment extends React.Component { this.commentMsgKeyPress = this.commentMsgKeyPress.bind(this); this.handleUserInput = this.handleUserInput.bind(this); this.handleKeyDown = this.handleKeyDown.bind(this); + this.handleUploadClick = this.handleUploadClick.bind(this); this.handleUploadStart = this.handleUploadStart.bind(this); this.handleFileUploadComplete = this.handleFileUploadComplete.bind(this); this.handleUploadError = this.handleUploadError.bind(this); @@ -74,6 +75,8 @@ class CreateComment extends React.Component { componentDidMount() { PreferenceStore.addChangeListener(this.onPreferenceChange); window.addEventListener('resize', this.handleResize); + + this.refs.textbox.focus(); } componentWillUnmount() { PreferenceStore.removeChangeListener(this.onPreferenceChange); @@ -94,6 +97,10 @@ class CreateComment extends React.Component { $('.post-right__scroll').perfectScrollbar('update'); } } + + if (prevProps.rootId !== this.props.rootId) { + this.refs.textbox.focus(); + } } handleSubmit(e) { e.preventDefault(); @@ -218,6 +225,9 @@ class CreateComment extends React.Component { }); } } + handleUploadClick() { + this.refs.textbox.focus(); + } handleUploadStart(clientIds) { let draft = PostStore.getCommentDraft(this.props.rootId); @@ -225,6 +235,10 @@ class CreateComment extends React.Component { PostStore.storeCommentDraft(this.props.rootId, draft); this.setState({uploadsInProgress: draft.uploadsInProgress}); + + // this is a bit redundant with the code that sets focus when the file input is clicked, + // but this also resets the focus after a drag and drop + this.refs.textbox.focus(); } handleFileUploadComplete(filenames, clientIds) { let draft = PostStore.getCommentDraft(this.props.rootId); @@ -365,6 +379,7 @@ class CreateComment extends React.Component { <FileUpload ref='fileUpload' getFileCount={this.getFileCount} + onClick={this.handleUploadClick} onUploadStart={this.handleUploadStart} onFileUpload={this.handleFileUploadComplete} onUploadError={this.handleUploadError} diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx index 265cd68be..6ea80cd13 100644 --- a/web/react/components/create_post.jsx +++ b/web/react/components/create_post.jsx @@ -53,7 +53,7 @@ class CreatePost extends React.Component { this.handleSubmit = this.handleSubmit.bind(this); this.postMsgKeyPress = this.postMsgKeyPress.bind(this); this.handleUserInput = this.handleUserInput.bind(this); - this.resizePostHolder = this.resizePostHolder.bind(this); + this.handleUploadClick = this.handleUploadClick.bind(this); this.handleUploadStart = this.handleUploadStart.bind(this); this.handleFileUploadComplete = this.handleFileUploadComplete.bind(this); this.handleUploadError = this.handleUploadError.bind(this); @@ -62,7 +62,6 @@ class CreatePost extends React.Component { this.onPreferenceChange = this.onPreferenceChange.bind(this); this.getFileCount = this.getFileCount.bind(this); this.handleKeyDown = this.handleKeyDown.bind(this); - this.handleResize = this.handleResize.bind(this); this.sendMessage = this.sendMessage.bind(this); PostStore.clearDraftUploads(); @@ -76,34 +75,10 @@ class CreatePost extends React.Component { previews: draft.previews, submitting: false, initialText: draft.messageText, - windowWidth: Utils.windowWidth(), - windowHeight: Utils.windowHeight(), ctrlSend: false, showTutorialTip: false }; } - handleResize() { - this.setState({ - windowWidth: Utils.windowWidth(), - windowHeight: Utils.windowHeight() - }); - } - componentDidUpdate(prevProps, prevState) { - if (prevState.previews.length !== this.state.previews.length) { - this.resizePostHolder(); - return; - } - - if (prevState.uploadsInProgress !== this.state.uploadsInProgress) { - this.resizePostHolder(); - return; - } - - if (prevState.windowWidth !== this.state.windowWidth || prevState.windowHeight !== this.state.windowHeight) { - this.resizePostHolder(); - return; - } - } getCurrentDraft() { const draft = PostStore.getCurrentDraft(); const safeDraft = {previews: [], messageText: '', uploadsInProgress: []}; @@ -240,10 +215,8 @@ class CreatePost extends React.Component { draft.message = messageText; PostStore.storeCurrentDraft(draft); } - resizePostHolder() { - if (this.state.windowWidth > 960) { - $('#post_textbox').focus(); - } + handleUploadClick() { + this.refs.textbox.focus(); } handleUploadStart(clientIds, channelId) { const draft = PostStore.getDraft(channelId); @@ -252,6 +225,10 @@ class CreatePost extends React.Component { PostStore.storeDraft(channelId, draft); this.setState({uploadsInProgress: draft.uploadsInProgress}); + + // this is a bit redundant with the code that sets focus when the file input is clicked, + // but this also resets the focus after a drag and drop + this.refs.textbox.focus(); } handleFileUploadComplete(filenames, clientIds, channelId) { const draft = PostStore.getDraft(channelId); @@ -328,13 +305,16 @@ class CreatePost extends React.Component { componentDidMount() { ChannelStore.addChangeListener(this.onChange); PreferenceStore.addChangeListener(this.onPreferenceChange); - this.resizePostHolder(); - window.addEventListener('resize', this.handleResize); + this.refs.textbox.focus(); + } + componentDidUpdate(prevProps, prevState) { + if (prevState.channelId !== this.state.channelId) { + this.refs.textbox.focus(); + } } componentWillUnmount() { ChannelStore.removeChangeListener(this.onChange); PreferenceStore.removeChangeListener(this.onPreferenceChange); - window.removeEventListener('resize', this.handleResize); } onChange() { const channelId = ChannelStore.getCurrentId(); @@ -457,7 +437,6 @@ class CreatePost extends React.Component { onUserInput={this.handleUserInput} onKeyPress={this.postMsgKeyPress} onKeyDown={this.handleKeyDown} - onHeightChange={this.resizePostHolder} messageText={this.state.messageText} createMessage={this.props.intl.formatMessage(holders.write)} channelId={this.state.channelId} @@ -467,6 +446,7 @@ class CreatePost extends React.Component { <FileUpload ref='fileUpload' getFileCount={this.getFileCount} + onClick={this.handleUploadClick} onUploadStart={this.handleUploadStart} onFileUpload={this.handleFileUploadComplete} onUploadError={this.handleUploadError} diff --git a/web/react/components/file_upload.jsx b/web/react/components/file_upload.jsx index 746289653..f5c32c825 100644 --- a/web/react/components/file_upload.jsx +++ b/web/react/components/file_upload.jsx @@ -310,6 +310,7 @@ class FileUpload extends React.Component { ref='fileInput' type='file' onChange={this.handleChange} + onClick={this.props.onClick} multiple={multiple} accept={accept} /> @@ -322,6 +323,7 @@ FileUpload.propTypes = { intl: intlShape.isRequired, onUploadError: React.PropTypes.func, getFileCount: React.PropTypes.func, + onClick: React.PropTypes.func, onFileUpload: React.PropTypes.func, onUploadStart: React.PropTypes.func, onTextDrop: React.PropTypes.func, diff --git a/web/react/components/textbox.jsx b/web/react/components/textbox.jsx index 00e5ace98..ec299087d 100644 --- a/web/react/components/textbox.jsx +++ b/web/react/components/textbox.jsx @@ -20,6 +20,7 @@ export default class Textbox extends React.Component { constructor(props) { super(props); + this.focus = this.focus.bind(this); this.getStateFromStores = this.getStateFromStores.bind(this); this.onRecievedError = this.onRecievedError.bind(this); this.handleKeyPress = this.handleKeyPress.bind(this); @@ -81,6 +82,10 @@ export default class Textbox extends React.Component { } } + focus() { + this.refs.message.getTextbox().focus(); + } + resize() { const textbox = this.refs.message.getTextbox(); const $textbox = $(textbox); @@ -90,8 +95,6 @@ export default class Textbox extends React.Component { const borders = parseInt($textbox.css('border-bottom-width'), 10) + parseInt($textbox.css('border-top-width'), 10); const maxHeight = parseInt($textbox.css('max-height'), 10) - borders; - const prevHeight = $textbox.height(); - // set the height to auto and remove the scrollbar so we can get the actual size of the contents $textbox.css('height', 'auto').css('overflow-y', 'hidden'); @@ -116,10 +119,6 @@ export default class Textbox extends React.Component { if (this.state.preview) { $(ReactDOM.findDOMNode(this.refs.preview)).height(height + borders); } - - if (height !== prevHeight && this.props.onHeightChange) { - this.props.onHeightChange(); - } } showPreview(e) { @@ -211,7 +210,6 @@ Textbox.propTypes = { messageText: React.PropTypes.string.isRequired, onUserInput: React.PropTypes.func.isRequired, onKeyPress: React.PropTypes.func.isRequired, - onHeightChange: React.PropTypes.func, createMessage: React.PropTypes.string.isRequired, onKeyDown: React.PropTypes.func, supportsCommands: React.PropTypes.bool.isRequired |