aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2018-06-20 13:38:22 +0300
committerGravatar Vitaly Takmazov2023-01-13 10:37:52 +0300
commit1e744bd9e8f3df7e57dab281c0553f9ef7fb0598 (patch)
tree2ef8d51af82d282e2e4380f7c0739804646ebe24
parentfd18ac5cd96f76a39de57bb6a877d3f0faf7c528 (diff)
message input autosize
-rw-r--r--vnext/src/components/MessageInput.js22
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