diff options
author | 2018-06-20 13:38:22 +0300 | |
---|---|---|
committer | 2023-01-13 10:37:52 +0300 | |
commit | 1e744bd9e8f3df7e57dab281c0553f9ef7fb0598 (patch) | |
tree | 2ef8d51af82d282e2e4380f7c0739804646ebe24 | |
parent | fd18ac5cd96f76a39de57bb6a877d3f0faf7c528 (diff) |
message input autosize
-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 |