From 84ba6a0cc36edb9b204bd01f005f4c4a8dd8e926 Mon Sep 17 00:00:00 2001 From: crockwave Date: Tue, 26 May 2020 19:19:52 -0500 Subject: [PATCH 1/2] Added auto-focus of content warning input box when CW button clicked Removed spoilerActive prop and used existing spoiler prop Fixed linter issue and removed commented code --- app/gabsocial/components/autosuggest_input.js | 6 ++++++ app/gabsocial/features/compose/components/compose_form.js | 5 ++++- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/app/gabsocial/components/autosuggest_input.js b/app/gabsocial/components/autosuggest_input.js index 3136325a0..f7808202f 100644 --- a/app/gabsocial/components/autosuggest_input.js +++ b/app/gabsocial/components/autosuggest_input.js @@ -153,6 +153,12 @@ export default class AutosuggestInput extends ImmutablePureComponent { this.input.focus(); } + componentDidUpdate() { + if (this.props.autoFocus) { + this.input.focus(); + } + } + componentWillReceiveProps(nextProps) { if (nextProps.suggestions !== this.props.suggestions && nextProps.suggestions.size > 0 && this.state.suggestionsHidden && this.state.focused) { this.setState({ suggestionsHidden: false }); diff --git a/app/gabsocial/features/compose/components/compose_form.js b/app/gabsocial/features/compose/components/compose_form.js index 4784544f3..90178fe16 100644 --- a/app/gabsocial/features/compose/components/compose_form.js +++ b/app/gabsocial/features/compose/components/compose_form.js @@ -32,6 +32,7 @@ const messages = defineMessages({ }); export default @injectIntl + class ComposeForm extends ImmutablePureComponent { state = { @@ -197,12 +198,13 @@ class ComposeForm extends ImmutablePureComponent { } render() { - const { intl, onPaste, showSearch, anyMedia, shouldCondense, autoFocus, isModalOpen, maxTootChars } = this.props; + const { intl, onPaste, showSearch, anyMedia, shouldCondense, autoFocus, spoiler, isModalOpen, maxTootChars } = this.props; const condensed = shouldCondense && !this.props.text && !this.state.composeFocused; const disabled = this.props.isSubmitting; const text = [this.props.spoilerText, countableText(this.props.text)].join(''); const disabledButton = disabled || this.props.isUploading || this.props.isChangingUpload || length(text) > maxTootChars || (text.length !== 0 && text.trim().length === 0 && !anyMedia); const shouldAutoFocus = autoFocus && !showSearch && !isMobile(window.innerWidth); + const shouldSpoilerAutoFocus = spoiler && !showSearch && !isMobile(window.innerWidth); let publishText = ''; @@ -235,6 +237,7 @@ class ComposeForm extends ImmutablePureComponent { onSuggestionsFetchRequested={this.onSuggestionsFetchRequested} onSuggestionsClearRequested={this.onSuggestionsClearRequested} onSuggestionSelected={this.onSpoilerSuggestionSelected} + autoFocus={shouldSpoilerAutoFocus} searchTokens={[':']} id='cw-spoiler-input' className='spoiler-input__input' From 9e64cd82b95f3327f3173d18bec1939cdcf44aaa Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Thu, 28 May 2020 14:44:36 -0500 Subject: [PATCH 2/2] Focus spoiler input from ComposeForm, refocus textarea on close --- app/gabsocial/components/autosuggest_input.js | 6 ---- .../compose/components/compose_form.js | 30 ++++++++++++++++--- 2 files changed, 26 insertions(+), 10 deletions(-) diff --git a/app/gabsocial/components/autosuggest_input.js b/app/gabsocial/components/autosuggest_input.js index f7808202f..3136325a0 100644 --- a/app/gabsocial/components/autosuggest_input.js +++ b/app/gabsocial/components/autosuggest_input.js @@ -153,12 +153,6 @@ export default class AutosuggestInput extends ImmutablePureComponent { this.input.focus(); } - componentDidUpdate() { - if (this.props.autoFocus) { - this.input.focus(); - } - } - componentWillReceiveProps(nextProps) { if (nextProps.suggestions !== this.props.suggestions && nextProps.suggestions.size > 0 && this.state.suggestionsHidden && this.state.focused) { this.setState({ suggestionsHidden: false }); diff --git a/app/gabsocial/features/compose/components/compose_form.js b/app/gabsocial/features/compose/components/compose_form.js index 90178fe16..4c6e165a8 100644 --- a/app/gabsocial/features/compose/components/compose_form.js +++ b/app/gabsocial/features/compose/components/compose_form.js @@ -21,6 +21,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component'; import { length } from 'stringz'; import { countableText } from '../util/counter'; import Icon from 'gabsocial/components/icon'; +import { get } from 'lodash'; const allowedAroundShortCode = '><\u0085\u0020\u00a0\u1680\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\u2028\u2029\u0009\u000a\u000b\u000c\u000d'; @@ -32,7 +33,6 @@ const messages = defineMessages({ }); export default @injectIntl - class ComposeForm extends ImmutablePureComponent { state = { @@ -197,14 +197,37 @@ class ComposeForm extends ImmutablePureComponent { this.props.onPickEmoji(position, data, needsSpace); } + focusSpoilerInput = () => { + const spoilerInput = get(this, ['spoilerText', 'input']); + if (spoilerInput) spoilerInput.focus(); + } + + focusTextarea = () => { + const textarea = get(this, ['autosuggestTextarea', 'textarea']); + if (textarea) textarea.focus(); + } + + maybeUpdateFocus = prevProps => { + const spoilerUpdated = this.props.spoiler !== prevProps.spoiler; + if (spoilerUpdated) { + switch (this.props.spoiler) { + case true: this.focusSpoilerInput(); break; + case false: this.focusTextarea(); break; + } + } + } + + componentDidUpdate(prevProps) { + this.maybeUpdateFocus(prevProps); + } + render() { - const { intl, onPaste, showSearch, anyMedia, shouldCondense, autoFocus, spoiler, isModalOpen, maxTootChars } = this.props; + const { intl, onPaste, showSearch, anyMedia, shouldCondense, autoFocus, isModalOpen, maxTootChars } = this.props; const condensed = shouldCondense && !this.props.text && !this.state.composeFocused; const disabled = this.props.isSubmitting; const text = [this.props.spoilerText, countableText(this.props.text)].join(''); const disabledButton = disabled || this.props.isUploading || this.props.isChangingUpload || length(text) > maxTootChars || (text.length !== 0 && text.trim().length === 0 && !anyMedia); const shouldAutoFocus = autoFocus && !showSearch && !isMobile(window.innerWidth); - const shouldSpoilerAutoFocus = spoiler && !showSearch && !isMobile(window.innerWidth); let publishText = ''; @@ -237,7 +260,6 @@ class ComposeForm extends ImmutablePureComponent { onSuggestionsFetchRequested={this.onSuggestionsFetchRequested} onSuggestionsClearRequested={this.onSuggestionsClearRequested} onSuggestionSelected={this.onSpoilerSuggestionSelected} - autoFocus={shouldSpoilerAutoFocus} searchTokens={[':']} id='cw-spoiler-input' className='spoiler-input__input'