Switched Textbox to use a TextareaAutosize and removed custom resizing code

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'