me/glitchier-soc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Introduce react-textarea-autosize instead of using style.height side effects (#3334)

Browse source
This commit is contained in:
Eugen Rochko 2017-05-26 18:22:23 +02:00 committed by GitHub
parent 860e257a68
commit c48772fd3f
4 changed files with 10 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
app/javascript/mastodon/components/autosuggest_textarea.js
View file

@ -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}

1
app/javascript/mastodon/features/compose/components/compose_form.js
View file

@ -67,7 +67,6 @@ class ComposeForm extends ImmutablePureComponent {
} }
handleSubmit = () => { handleSubmit = () => {
this.autosuggestTextarea.reset();
this.props.onSubmit(); this.props.onSubmit();
} }

1
package.json
View file

@ -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",

6
yarn.lock
View file

@ -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"