cybrespace
/
mastodon
4
3
Fork 3
Code Issues 7 Pull Requests Releases Activity

Scroll to compose form when focus (#10970) 

* Scroll to compose form when focus

* Get rid of constructor
This commit is contained in:
Jeong Arm 2019-06-05 22:29:45 +09:00 committed by Eugen Rochko
parent cac9110533
commit 8f3c32e29c
2 changed files with 14 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/javascript/mastodon/components/autosuggest_textarea.js
View File

@ -138,8 +138,11 @@ export default class AutosuggestTextarea extends ImmutablePureComponent {
this.setState({ suggestionsHidden: true, focused: false }); this.setState({ suggestionsHidden: true, focused: false });
} }
onFocus = () => { onFocus = (e) => {
this.setState({ focused: true }); this.setState({ focused: true });
if (this.props.onFocus) {
this.props.onFocus(e);
}
} }
onSuggestionClick = (e) => { onSuggestionClick = (e) => {

11
app/javascript/mastodon/features/compose/components/compose_form.js
View File

@ -33,6 +33,10 @@ const messages = defineMessages({
export default @injectIntl export default @injectIntl
class ComposeForm extends ImmutablePureComponent { class ComposeForm extends ImmutablePureComponent {
setRef = c => {
this.composeForm = c;
};
static contextTypes = { static contextTypes = {
router: PropTypes.object, router: PropTypes.object,
}; };
@ -114,6 +118,10 @@ class ComposeForm extends ImmutablePureComponent {
this.props.onChangeSpoilerText(e.target.value); this.props.onChangeSpoilerText(e.target.value);
} }
handleFocus = () => {
this.composeForm.scrollIntoView();
}
componentDidUpdate (prevProps) { componentDidUpdate (prevProps) {
// This statement does several things: // This statement does several things:
// - If we're beginning a reply, and, // - If we're beginning a reply, and,
@ -177,7 +185,7 @@ class ComposeForm extends ImmutablePureComponent {
} }
return ( return (
<div className='compose-form'> <div className='compose-form' ref={this.setRef}>
<WarningContainer /> <WarningContainer />
<ReplyIndicatorContainer /> <ReplyIndicatorContainer />
@ -211,6 +219,7 @@ class ComposeForm extends ImmutablePureComponent {
value={this.props.text} value={this.props.text}
onChange={this.handleChange} onChange={this.handleChange}
suggestions={this.props.suggestions} suggestions={this.props.suggestions}
onFocus={this.handleFocus}
onKeyDown={this.handleKeyDown} onKeyDown={this.handleKeyDown}
onSuggestionsFetchRequested={this.onSuggestionsFetchRequested} onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
onSuggestionsClearRequested={this.onSuggestionsClearRequested} onSuggestionsClearRequested={this.onSuggestionsClearRequested}