2018-01-19 21:11:38 +01:00
|
|
|
import React, { Component } from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
|
|
|
|
class ExpandingTextarea extends Component {
|
|
|
|
componentDidMount () {
|
2018-01-20 01:03:49 +01:00
|
|
|
this.adjustTextarea({});
|
2018-01-19 21:11:38 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
render () {
|
2018-01-20 01:03:49 +01:00
|
|
|
const { onChange, ...rest } = this.props;
|
2018-01-19 21:11:38 +01:00
|
|
|
return (
|
|
|
|
<textarea
|
|
|
|
{ ...rest }
|
|
|
|
ref={x => this.el = x}
|
|
|
|
onChange={ this._handleChange.bind(this) }
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
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
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
ExpandingTextarea.propTypes = {
|
2018-01-20 01:03:49 +01:00
|
|
|
onChange: PropTypes.func,
|
2018-01-19 21:11:38 +01:00
|
|
|
};
|
|
|
|
|
|
|
|
export default ExpandingTextarea;
|