From 9adc80c3fc5dfbf9b4ca2e16fd428599571a03ca Mon Sep 17 00:00:00 2001 From: hmhealey Date: Thu, 4 Feb 2016 11:05:59 -0500 Subject: Cleaned up textbox focus code --- web/react/components/create_post.jsx | 46 +++++++++--------------------------- web/react/components/file_upload.jsx | 2 ++ web/react/components/textbox.jsx | 12 ++++------ 3 files changed, 18 insertions(+), 42 deletions(-) (limited to 'web/react') diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx index 20892898e..e102d1d29 100644 --- a/web/react/components/create_post.jsx +++ b/web/react/components/create_post.jsx @@ -57,7 +57,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); @@ -66,7 +66,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(); @@ -81,34 +80,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: []}; @@ -245,10 +220,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); @@ -333,13 +306,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(); @@ -462,7 +438,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} @@ -472,6 +447,7 @@ class CreatePost extends React.Component { @@ -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 -- cgit v1.2.3-1-g7c22