From e949861176b633f0a9cdf827c9727f027e7ef037 Mon Sep 17 00:00:00 2001 From: Thibaut Girka Date: Sun, 21 Apr 2019 19:07:48 +0200 Subject: Cleanup --- .../features/compose/components/compose_form.js | 173 ++++++++++----------- 1 file changed, 82 insertions(+), 91 deletions(-) (limited to 'app/javascript/flavours/glitch/features/compose/components') diff --git a/app/javascript/flavours/glitch/features/compose/components/compose_form.js b/app/javascript/flavours/glitch/features/compose/components/compose_form.js index 2b9d2dca6..88dce5098 100644 --- a/app/javascript/flavours/glitch/features/compose/components/compose_form.js +++ b/app/javascript/flavours/glitch/features/compose/components/compose_form.js @@ -1,23 +1,19 @@ import React from 'react'; -import PropTypes from 'prop-types'; import ImmutablePropTypes from 'react-immutable-proptypes'; +import PropTypes from 'prop-types'; +import ReplyIndicatorContainer from '../containers/reply_indicator_container'; +import AutosuggestTextarea from '../../../components/autosuggest_textarea'; import { defineMessages, injectIntl } from 'react-intl'; +import EmojiPicker from 'flavours/glitch/features/emoji_picker'; +import PollFormContainer from '../containers/poll_form_container'; +import UploadFormContainer from '../containers/upload_form_container'; +import WarningContainer from '../containers/warning_container'; +import { isMobile } from 'flavours/glitch/util/is_mobile'; import ImmutablePureComponent from 'react-immutable-pure-component'; - -// Components. +import { countableText } from 'flavours/glitch/util/counter'; import OptionsContainer from '../containers/options_container'; import Publisher from './publisher'; import TextareaIcons from './textarea_icons'; -import UploadFormContainer from '../containers/upload_form_container'; -import PollFormContainer from '../containers/poll_form_container'; -import WarningContainer from '../containers/warning_container'; -import ReplyIndicatorContainer from '../containers/reply_indicator_container'; -import EmojiPicker from 'flavours/glitch/features/emoji_picker'; -import AutosuggestTextarea from '../../../components/autosuggest_textarea'; - -// Utils. -import { countableText } from 'flavours/glitch/util/counter'; -import { isMobile } from 'flavours/glitch/util/is_mobile'; const messages = defineMessages({ placeholder: { id: 'compose_form.placeholder', defaultMessage: 'What is on your mind?' }, @@ -37,84 +33,50 @@ class ComposeForm extends ImmutablePureComponent { static propTypes = { intl: PropTypes.object.isRequired, - - // State props. - advancedOptions: ImmutablePropTypes.map, - amUnlocked: PropTypes.bool, + text: PropTypes.string, + suggestions: ImmutablePropTypes.list, + spoiler: PropTypes.bool, + privacy: PropTypes.string, + spoilerText: PropTypes.string, focusDate: PropTypes.instanceOf(Date), caretPosition: PropTypes.number, + preselectDate: PropTypes.instanceOf(Date), isSubmitting: PropTypes.bool, isChangingUpload: PropTypes.bool, isUploading: PropTypes.bool, + onChange: PropTypes.func, + onSubmit: PropTypes.func, + onClearSuggestions: PropTypes.func, + onFetchSuggestions: PropTypes.func, + onSuggestionSelected: PropTypes.func, + onChangeSpoilerText: PropTypes.func, + onPaste: PropTypes.func, + onPickEmoji: PropTypes.func, + showSearch: PropTypes.bool, + anyMedia: PropTypes.bool, + + advancedOptions: ImmutablePropTypes.map, layout: PropTypes.string, media: ImmutablePropTypes.list, - preselectDate: PropTypes.instanceOf(Date), - privacy: PropTypes.string, sideArm: PropTypes.string, sensitive: PropTypes.bool, - showSearch: PropTypes.bool, - spoiler: PropTypes.bool, - spoilerText: PropTypes.string, - suggestionToken: PropTypes.string, - suggestions: ImmutablePropTypes.list, - text: PropTypes.string, - anyMedia: PropTypes.bool, spoilersAlwaysOn: PropTypes.bool, mediaDescriptionConfirmation: PropTypes.bool, preselectOnReply: PropTypes.bool, - - // Dispatch props. - onChangeSpoilerText: PropTypes.func, onChangeSpoilerness: PropTypes.func, - onChangeText: PropTypes.func, onChangeVisibility: PropTypes.func, - onClearSuggestions: PropTypes.func, - onFetchSuggestions: PropTypes.func, - onInsertEmoji: PropTypes.func, onMount: PropTypes.func, - onSelectSuggestion: PropTypes.func, - onSubmit: PropTypes.func, onUnmount: PropTypes.func, - onUpload: PropTypes.func, + onPaste: PropTypes.func, onMediaDescriptionConfirm: PropTypes.func, }; - // Changes the text value of the spoiler. - handleChangeSpoiler = ({ target: { value } }) => { - const { onChangeSpoilerText } = this.props; - if (onChangeSpoilerText) { - onChangeSpoilerText(value); - } - } - - // Inserts an emoji at the caret. - handleEmoji = (data) => { - const { textarea: { selectionStart } } = this; - const { onInsertEmoji } = this.props; - if (onInsertEmoji) { - onInsertEmoji(selectionStart, data); - } - } - - // Handles the secondary submit button. - handleSecondarySubmit = () => { - const { handleSubmit } = this.handlers; - const { - onChangeVisibility, - sideArm, - } = this.props; - if (sideArm !== 'none' && onChangeVisibility) { - onChangeVisibility(sideArm); - } - handleSubmit(); - } + static defaultProps = { + showSearch: false, + }; - // Selects a suggestion from the autofill. - handleSelect = (tokenStart, token, value) => { - const { onSelectSuggestion } = this.props; - if (onSelectSuggestion) { - onSelectSuggestion(tokenStart, token, value); - } + handleChange = (e) => { + this.props.onChange(e.target.value); } handleKeyDown = ({ ctrlKey, keyCode, metaKey, altKey }) => { @@ -129,18 +91,10 @@ class ComposeForm extends ImmutablePureComponent { } } - // When the escape key is released, we focus the UI. - handleKeyUp = ({ key }) => { - if (key === 'Escape') { - document.querySelector('.ui').parentElement.focus(); - } - } - - // Submits the status. handleSubmit = () => { const { textarea: { value }, uploadForm } = this; const { - onChangeText, + onChange, onSubmit, isSubmitting, isChangingUpload, @@ -154,8 +108,8 @@ class ComposeForm extends ImmutablePureComponent { // If something changes inside the textarea, then we update the // state before submitting. - if (onChangeText && text !== value) { - onChangeText(value); + if (onChange && text !== value) { + onChange(value); } // Submit disabled: @@ -178,6 +132,48 @@ class ComposeForm extends ImmutablePureComponent { } } + // Changes the text value of the spoiler. + handleChangeSpoiler = ({ target: { value } }) => { + const { onChangeSpoilerText } = this.props; + if (onChangeSpoilerText) { + onChangeSpoilerText(value); + } + } + + // Inserts an emoji at the caret. + handleEmoji = (data) => { + const { textarea: { selectionStart } } = this; + const { onPickEmoji } = this.props; + if (onPickEmoji) { + onPickEmoji(selectionStart, data); + } + } + + // Handles the secondary submit button. + handleSecondarySubmit = () => { + const { handleSubmit } = this.handlers; + const { + onChangeVisibility, + sideArm, + } = this.props; + if (sideArm !== 'none' && onChangeVisibility) { + onChangeVisibility(sideArm); + } + handleSubmit(); + } + + // Selects a suggestion from the autofill. + onSuggestionSelected = (tokenStart, token, value) => { + this.props.onSuggestionSelected(tokenStart, token, value); + } + + // When the escape key is released, we focus the UI. + handleKeyUp = ({ key }) => { + if (key === 'Escape') { + document.querySelector('.ui').parentElement.focus(); + } + } + // Sets a reference to the textarea. setAutosuggestTextarea = (textareaComponent) => { if (textareaComponent) { @@ -265,9 +261,6 @@ class ComposeForm extends ImmutablePureComponent { } } - handleChange = (e) => { - this.props.onChangeText(e.target.value); - } render () { const { @@ -279,7 +272,6 @@ class ComposeForm extends ImmutablePureComponent { } = this; const { advancedOptions, - amUnlocked, anyMedia, intl, isSubmitting, @@ -288,11 +280,10 @@ class ComposeForm extends ImmutablePureComponent { layout, media, onChangeSpoilerness, - onChangeText, onChangeVisibility, onClearSuggestions, onFetchSuggestions, - onUpload, + onPaste, privacy, sensitive, showSearch, @@ -343,8 +334,8 @@ class ComposeForm extends ImmutablePureComponent { onKeyDown={this.handleKeyDown} onSuggestionsFetchRequested={onFetchSuggestions} onSuggestionsClearRequested={onClearSuggestions} - onSuggestionSelected={this.handleSelect} - onPaste={onUpload} + onSuggestionSelected={this.onSuggestionSelected} + onPaste={onPaste} autoFocus={!showSearch && !isMobile(window.innerWidth, layout)} /> @@ -361,7 +352,7 @@ class ComposeForm extends ImmutablePureComponent { disabled={isSubmitting} onChangeVisibility={onChangeVisibility} onToggleSpoiler={spoilersAlwaysOn ? null : onChangeSpoilerness} - onUpload={onUpload} + onPaste={onPaste} privacy={privacy} sensitive={sensitive || (spoilersAlwaysOn && spoilerText && spoilerText.length > 0)} spoiler={spoilersAlwaysOn ? (spoilerText && spoilerText.length > 0) : spoiler} -- cgit