diff options
Diffstat (limited to 'vnext/src/components/MessageInput.js')
| -rw-r--r-- | vnext/src/components/MessageInput.js | 22 |
1 files changed, 21 insertions, 1 deletions
diff --git a/vnext/src/components/MessageInput.js b/vnext/src/components/MessageInput.js index 2a7eab1d..15d36309 100644 --- a/vnext/src/components/MessageInput.js +++ b/vnext/src/components/MessageInput.js @@ -5,6 +5,17 @@ import { MessageType } from './Types'; export default class MessageInput extends React.Component { constructor(props) { super(props) + this.resize = this.resize.bind(this); + this.textarea = React.createRef(); + } + componentDidMount() { + this.resize() + } + resize() { + const el = this.textarea.current; + const offset = el.offsetHeight - el.clientHeight; + const height = el.scrollHeight + offset; + el.style.height = `${height + offset}px`; } render() { const msg = this.props.data; @@ -13,7 +24,9 @@ export default class MessageInput extends React.Component { <input type="hidden" name="mid" value={msg.mid} /> <div className="msg-comment"> <div className="ta-wrapper"> - <textarea name="body" rows="1" className="reply" placeholder="Write a comment..."></textarea> + <textarea name="body" onChange={this.resize} + ref={this.textarea} style={textInputStyle} + rows="3" placeholder="Write a comment..." /> </div> </div> </form> @@ -21,6 +34,13 @@ export default class MessageInput extends React.Component { } } +const textInputStyle = { + overflow: 'hidden', + resize: 'none', + display: 'block', + boxSizing: 'border-box' +} + MessageInput.propTypes = { data: MessageType };
\ No newline at end of file |