2018-01-19 21:11:38 +01:00
|
|
|
import React, { Component } from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
|
|
|
|
class ExpandingTextarea extends Component {
|
2018-03-08 18:26:33 +01:00
|
|
|
constructor (props) {
|
|
|
|
super(props);
|
|
|
|
this._handleChange = this._handleChange.bind(this);
|
|
|
|
}
|
2018-01-19 21:11:38 +01:00
|
|
|
componentDidMount () {
|
2018-01-20 01:03:49 +01:00
|
|
|
this.adjustTextarea({});
|
2018-01-19 21:11:38 +01:00
|
|
|
}
|
2018-01-20 01:03:49 +01:00
|
|
|
_handleChange (event) {
|
2018-01-19 21:11:38 +01:00
|
|
|
const { onChange } = this.props;
|
2018-01-20 01:03:49 +01:00
|
|
|
if (onChange) onChange(event);
|
|
|
|
this.adjustTextarea(event);
|
2018-01-19 21:11:38 +01:00
|
|
|
}
|
2018-01-20 01:03:49 +01:00
|
|
|
adjustTextarea ({ target = this.el }) {
|
2018-01-19 21:11:38 +01:00
|
|
|
target.style.height = 0;
|
2018-01-20 01:03:49 +01:00
|
|
|
target.style.height = `${target.scrollHeight}px`;
|
2018-01-19 21:11:38 +01:00
|
|
|
}
|
2018-03-08 18:26:33 +01:00
|
|
|
render () {
|
|
|
|
const { ...rest } = this.props;
|
|
|
|
return (
|
|
|
|
<textarea
|
|
|
|
{...rest}
|
|
|
|
ref={x => this.el = x}
|
|
|
|
onChange={this._handleChange}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
}
|
2018-01-19 21:11:38 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
ExpandingTextarea.propTypes = {
|
2018-01-20 01:03:49 +01:00
|
|
|
onChange: PropTypes.func,
|
2018-01-19 21:11:38 +01:00
|
|
|
};
|
|
|
|
|
|
|
|
export default ExpandingTextarea;
|