mirror of
https://github.com/mastodon/mastodon.git
synced 2024-11-23 21:15:05 +01:00
Introduce react-textarea-autosize instead of using style.height side effects (#3334)
This commit is contained in:
parent
860e257a68
commit
c48772fd3f
@ -4,6 +4,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
|
|||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { isRtl } from '../rtl';
|
import { isRtl } from '../rtl';
|
||||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||||
|
import Textarea from 'react-textarea-autosize';
|
||||||
|
|
||||||
const textAtCursorMatchesToken = (str, caretPosition) => {
|
const textAtCursorMatchesToken = (str, caretPosition) => {
|
||||||
let word;
|
let word;
|
||||||
@ -69,10 +70,6 @@ class AutosuggestTextarea extends ImmutablePureComponent {
|
|||||||
this.props.onSuggestionsClearRequested();
|
this.props.onSuggestionsClearRequested();
|
||||||
}
|
}
|
||||||
|
|
||||||
// auto-resize textarea
|
|
||||||
e.target.style.height = 'auto';
|
|
||||||
e.target.style.height = `${e.target.scrollHeight}px`;
|
|
||||||
|
|
||||||
this.props.onChange(e);
|
this.props.onChange(e);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -160,10 +157,6 @@ class AutosuggestTextarea extends ImmutablePureComponent {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
reset () {
|
|
||||||
this.textarea.style.height = 'auto';
|
|
||||||
}
|
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus } = this.props;
|
const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus } = this.props;
|
||||||
const { suggestionsHidden, selectedSuggestion } = this.state;
|
const { suggestionsHidden, selectedSuggestion } = this.state;
|
||||||
@ -175,8 +168,8 @@ class AutosuggestTextarea extends ImmutablePureComponent {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='autosuggest-textarea'>
|
<div className='autosuggest-textarea'>
|
||||||
<textarea
|
<Textarea
|
||||||
ref={this.setTextarea}
|
inputRef={this.setTextarea}
|
||||||
className='autosuggest-textarea__textarea'
|
className='autosuggest-textarea__textarea'
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
placeholder={placeholder}
|
placeholder={placeholder}
|
||||||
|
@ -67,7 +67,6 @@ class ComposeForm extends ImmutablePureComponent {
|
|||||||
}
|
}
|
||||||
|
|
||||||
handleSubmit = () => {
|
handleSubmit = () => {
|
||||||
this.autosuggestTextarea.reset();
|
|
||||||
this.props.onSubmit();
|
this.props.onSubmit();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -90,6 +90,7 @@
|
|||||||
"react-router": "^2.8.0",
|
"react-router": "^2.8.0",
|
||||||
"react-router-scroll": "^0.3.2",
|
"react-router-scroll": "^0.3.2",
|
||||||
"react-simple-dropdown": "^1.1.4",
|
"react-simple-dropdown": "^1.1.4",
|
||||||
|
"react-textarea-autosize": "^5.0.6",
|
||||||
"react-toggle": "^2.1.1",
|
"react-toggle": "^2.1.1",
|
||||||
"redis": "^2.6.5",
|
"redis": "^2.6.5",
|
||||||
"redux": "^3.6.0",
|
"redux": "^3.6.0",
|
||||||
|
@ -5590,6 +5590,12 @@ react-test-renderer@^15.5.4:
|
|||||||
fbjs "^0.8.9"
|
fbjs "^0.8.9"
|
||||||
object-assign "^4.1.0"
|
object-assign "^4.1.0"
|
||||||
|
|
||||||
|
react-textarea-autosize@^5.0.6:
|
||||||
|
version "5.0.6"
|
||||||
|
resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-5.0.6.tgz#a3742e0a319484021b4dbfa1519df287768f2133"
|
||||||
|
dependencies:
|
||||||
|
prop-types "^15.5.8"
|
||||||
|
|
||||||
react-toggle@^2.1.1:
|
react-toggle@^2.1.1:
|
||||||
version "2.1.1"
|
version "2.1.1"
|
||||||
resolved "https://registry.yarnpkg.com/react-toggle/-/react-toggle-2.1.1.tgz#80600a64417a1acc8aaa4c1477f7fbdb88b988fb"
|
resolved "https://registry.yarnpkg.com/react-toggle/-/react-toggle-2.1.1.tgz#80600a64417a1acc8aaa4c1477f7fbdb88b988fb"
|
||||||
|
Loading…
Reference in New Issue
Block a user