diff options
Diffstat (limited to 'webapp/components/textbox.jsx')
-rw-r--r-- | webapp/components/textbox.jsx | 74 |
1 files changed, 25 insertions, 49 deletions
diff --git a/webapp/components/textbox.jsx b/webapp/components/textbox.jsx index 1a395072e..371c581e5 100644 --- a/webapp/components/textbox.jsx +++ b/webapp/components/textbox.jsx @@ -2,7 +2,6 @@ // See License.txt for license information. import $ from 'jquery'; -import ReactDOM from 'react-dom'; import AtMentionProvider from './suggestion/at_mention_provider.jsx'; import CommandProvider from './suggestion/command_provider.jsx'; import EmoticonProvider from './suggestion/emoticon_provider.jsx'; @@ -29,7 +28,7 @@ export default class Textbox extends React.Component { this.onRecievedError = this.onRecievedError.bind(this); this.handleKeyPress = this.handleKeyPress.bind(this); this.handleKeyDown = this.handleKeyDown.bind(this); - this.resize = this.resize.bind(this); + this.handleHeightChange = this.handleHeightChange.bind(this); this.showPreview = this.showPreview.bind(this); this.state = { @@ -54,8 +53,6 @@ export default class Textbox extends React.Component { componentDidMount() { ErrorStore.addChangeListener(this.onRecievedError); - - this.resize(); } componentWillUnmount() { @@ -72,10 +69,6 @@ export default class Textbox extends React.Component { } } - componentDidUpdate() { - this.resize(); - } - handleKeyPress(e) { this.props.onKeyPress(e); } @@ -86,50 +79,28 @@ export default class Textbox extends React.Component { } } - focus() { - this.refs.message.getTextbox().focus(); - } + handleHeightChange(height) { + const textbox = $(this.refs.message.getTextbox()); + const wrapper = $(this.refs.wrapper); - resize() { - const textbox = this.refs.message.getTextbox(); - const $textbox = $(textbox); - const $wrapper = $(ReactDOM.findDOMNode(this.refs.wrapper)); + const maxHeight = parseInt(textbox.css('max-height'), 10); - const padding = parseInt($textbox.css('padding-bottom'), 10) + parseInt($textbox.css('padding-top'), 10); - 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; - - // 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'); - - let height = textbox.scrollHeight - padding; - - if (height + padding > maxHeight) { - height = maxHeight - padding; - - // turn scrollbar on and move over attachment icon to compensate for that - $textbox.css('overflow-y', 'scroll'); - $wrapper.closest('.post-body__cell').addClass('scroll'); + // move over attachment icon to compensate for the scrollbar + if (height > maxHeight) { + wrapper.closest('.post-body__cell').addClass('scroll'); } else { - $wrapper.closest('.post-body__cell').removeClass('scroll'); + wrapper.closest('.post-body__cell').removeClass('scroll'); } + } - // set the textarea to be the proper height - $textbox.height(height); - - // set the wrapper height to match the height of the textbox including padding and borders - $wrapper.height(height + padding + borders); - - if (this.state.preview) { - $(ReactDOM.findDOMNode(this.refs.preview)).height(height + borders); - } + focus() { + this.refs.message.getTextbox().focus(); } showPreview(e) { e.preventDefault(); e.target.blur(); this.setState({preview: !this.state.preview}); - this.resize(); } render() { @@ -157,7 +128,7 @@ export default class Textbox extends React.Component { ); } - let helpText = ( + const helpText = ( <div style={{visibility: hasText ? 'visible' : 'hidden', opacity: hasText ? '0.5' : '0'}} className='help_format_text' @@ -174,12 +145,16 @@ export default class Textbox extends React.Component { defaultMessage='_italic_' /> </i> - <span>~~<strike> - <FormattedMessage - id='textbox.strike' - defaultMessage='strike' - /> - </strike>~~ </span> + <span> + {'~~'} + <strike> + <FormattedMessage + id='textbox.strike' + defaultMessage='strike' + /> + </strike> + {'~~ '} + </span> <code> <FormattedMessage id='textbox.inlinecode' @@ -214,16 +189,17 @@ export default class Textbox extends React.Component { spellCheck='true' autoComplete='off' autoCorrect='off' - rows='1' maxLength={Constants.MAX_POST_LEN} placeholder={this.props.createMessage} value={this.props.messageText} onUserInput={this.props.onUserInput} onKeyPress={this.handleKeyPress} onKeyDown={this.handleKeyDown} + onHeightChange={this.handleHeightChange} style={{visibility: this.state.preview ? 'hidden' : 'visible'}} listComponent={SuggestionList} providers={this.suggestionProviders} + channelId={this.props.channelId} /> <div ref='preview' |