This commit is contained in:
Thibaut Girka 2019-04-21 19:07:48 +02:00 committed by ThibG
parent faff152ae5
commit e949861176
3 changed files with 128 additions and 144 deletions

View File

@ -1,23 +1,19 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; 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 { 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'; import ImmutablePureComponent from 'react-immutable-pure-component';
import { countableText } from 'flavours/glitch/util/counter';
// Components.
import OptionsContainer from '../containers/options_container'; import OptionsContainer from '../containers/options_container';
import Publisher from './publisher'; import Publisher from './publisher';
import TextareaIcons from './textarea_icons'; 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({ const messages = defineMessages({
placeholder: { id: 'compose_form.placeholder', defaultMessage: 'What is on your mind?' }, placeholder: { id: 'compose_form.placeholder', defaultMessage: 'What is on your mind?' },
@ -37,84 +33,50 @@ class ComposeForm extends ImmutablePureComponent {
static propTypes = { static propTypes = {
intl: PropTypes.object.isRequired, intl: PropTypes.object.isRequired,
text: PropTypes.string,
// State props. suggestions: ImmutablePropTypes.list,
advancedOptions: ImmutablePropTypes.map, spoiler: PropTypes.bool,
amUnlocked: PropTypes.bool, privacy: PropTypes.string,
spoilerText: PropTypes.string,
focusDate: PropTypes.instanceOf(Date), focusDate: PropTypes.instanceOf(Date),
caretPosition: PropTypes.number, caretPosition: PropTypes.number,
preselectDate: PropTypes.instanceOf(Date),
isSubmitting: PropTypes.bool, isSubmitting: PropTypes.bool,
isChangingUpload: PropTypes.bool, isChangingUpload: PropTypes.bool,
isUploading: 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, layout: PropTypes.string,
media: ImmutablePropTypes.list, media: ImmutablePropTypes.list,
preselectDate: PropTypes.instanceOf(Date),
privacy: PropTypes.string,
sideArm: PropTypes.string, sideArm: PropTypes.string,
sensitive: PropTypes.bool, 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, spoilersAlwaysOn: PropTypes.bool,
mediaDescriptionConfirmation: PropTypes.bool, mediaDescriptionConfirmation: PropTypes.bool,
preselectOnReply: PropTypes.bool, preselectOnReply: PropTypes.bool,
// Dispatch props.
onChangeSpoilerText: PropTypes.func,
onChangeSpoilerness: PropTypes.func, onChangeSpoilerness: PropTypes.func,
onChangeText: PropTypes.func,
onChangeVisibility: PropTypes.func, onChangeVisibility: PropTypes.func,
onClearSuggestions: PropTypes.func,
onFetchSuggestions: PropTypes.func,
onInsertEmoji: PropTypes.func,
onMount: PropTypes.func, onMount: PropTypes.func,
onSelectSuggestion: PropTypes.func,
onSubmit: PropTypes.func,
onUnmount: PropTypes.func, onUnmount: PropTypes.func,
onUpload: PropTypes.func, onPaste: PropTypes.func,
onMediaDescriptionConfirm: PropTypes.func, onMediaDescriptionConfirm: PropTypes.func,
}; };
// Changes the text value of the spoiler. static defaultProps = {
handleChangeSpoiler = ({ target: { value } }) => { showSearch: false,
const { onChangeSpoilerText } = this.props; };
if (onChangeSpoilerText) {
onChangeSpoilerText(value);
}
}
// Inserts an emoji at the caret. handleChange = (e) => {
handleEmoji = (data) => { this.props.onChange(e.target.value);
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();
}
// Selects a suggestion from the autofill.
handleSelect = (tokenStart, token, value) => {
const { onSelectSuggestion } = this.props;
if (onSelectSuggestion) {
onSelectSuggestion(tokenStart, token, value);
}
} }
handleKeyDown = ({ ctrlKey, keyCode, metaKey, altKey }) => { 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 = () => { handleSubmit = () => {
const { textarea: { value }, uploadForm } = this; const { textarea: { value }, uploadForm } = this;
const { const {
onChangeText, onChange,
onSubmit, onSubmit,
isSubmitting, isSubmitting,
isChangingUpload, isChangingUpload,
@ -154,8 +108,8 @@ class ComposeForm extends ImmutablePureComponent {
// If something changes inside the textarea, then we update the // If something changes inside the textarea, then we update the
// state before submitting. // state before submitting.
if (onChangeText && text !== value) { if (onChange && text !== value) {
onChangeText(value); onChange(value);
} }
// Submit disabled: // 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. // Sets a reference to the textarea.
setAutosuggestTextarea = (textareaComponent) => { setAutosuggestTextarea = (textareaComponent) => {
if (textareaComponent) { if (textareaComponent) {
@ -265,9 +261,6 @@ class ComposeForm extends ImmutablePureComponent {
} }
} }
handleChange = (e) => {
this.props.onChangeText(e.target.value);
}
render () { render () {
const { const {
@ -279,7 +272,6 @@ class ComposeForm extends ImmutablePureComponent {
} = this; } = this;
const { const {
advancedOptions, advancedOptions,
amUnlocked,
anyMedia, anyMedia,
intl, intl,
isSubmitting, isSubmitting,
@ -288,11 +280,10 @@ class ComposeForm extends ImmutablePureComponent {
layout, layout,
media, media,
onChangeSpoilerness, onChangeSpoilerness,
onChangeText,
onChangeVisibility, onChangeVisibility,
onClearSuggestions, onClearSuggestions,
onFetchSuggestions, onFetchSuggestions,
onUpload, onPaste,
privacy, privacy,
sensitive, sensitive,
showSearch, showSearch,
@ -343,8 +334,8 @@ class ComposeForm extends ImmutablePureComponent {
onKeyDown={this.handleKeyDown} onKeyDown={this.handleKeyDown}
onSuggestionsFetchRequested={onFetchSuggestions} onSuggestionsFetchRequested={onFetchSuggestions}
onSuggestionsClearRequested={onClearSuggestions} onSuggestionsClearRequested={onClearSuggestions}
onSuggestionSelected={this.handleSelect} onSuggestionSelected={this.onSuggestionSelected}
onPaste={onUpload} onPaste={onPaste}
autoFocus={!showSearch && !isMobile(window.innerWidth, layout)} autoFocus={!showSearch && !isMobile(window.innerWidth, layout)}
/> />
@ -361,7 +352,7 @@ class ComposeForm extends ImmutablePureComponent {
disabled={isSubmitting} disabled={isSubmitting}
onChangeVisibility={onChangeVisibility} onChangeVisibility={onChangeVisibility}
onToggleSpoiler={spoilersAlwaysOn ? null : onChangeSpoilerness} onToggleSpoiler={spoilersAlwaysOn ? null : onChangeSpoilerness}
onUpload={onUpload} onPaste={onPaste}
privacy={privacy} privacy={privacy}
sensitive={sensitive || (spoilersAlwaysOn && spoilerText && spoilerText.length > 0)} sensitive={sensitive || (spoilersAlwaysOn && spoilerText && spoilerText.length > 0)}
spoiler={spoilersAlwaysOn ? (spoilerText && spoilerText.length > 0) : spoiler} spoiler={spoilersAlwaysOn ? (spoilerText && spoilerText.length > 0) : spoiler}

View File

@ -1,4 +1,5 @@
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { defineMessages } from 'react-intl';
import ComposeForm from '../components/compose_form'; import ComposeForm from '../components/compose_form';
import { import {
changeCompose, changeCompose,
@ -20,7 +21,6 @@ import {
import { changeLocalSetting } from 'flavours/glitch/actions/local_settings'; import { changeLocalSetting } from 'flavours/glitch/actions/local_settings';
import { privacyPreference } from 'flavours/glitch/util/privacy_preference'; import { privacyPreference } from 'flavours/glitch/util/privacy_preference';
import { me } from 'flavours/glitch/util/initial_state';
const messages = defineMessages({ const messages = defineMessages({
missingDescriptionMessage: { id: 'confirmations.missing_media_description.message', missingDescriptionMessage: { id: 'confirmations.missing_media_description.message',
@ -28,7 +28,6 @@ const messages = defineMessages({
missingDescriptionConfirm: { id: 'confirmations.missing_media_description.confirm', missingDescriptionConfirm: { id: 'confirmations.missing_media_description.confirm',
defaultMessage: 'Send anyway' }, defaultMessage: 'Send anyway' },
}); });
import { defineMessages } from 'react-intl';
// State mapping. // State mapping.
function mapStateToProps (state) { function mapStateToProps (state) {
@ -49,7 +48,6 @@ function mapStateToProps (state) {
sideArmPrivacy = sideArmPrivacy || sideArmBasePrivacy; sideArmPrivacy = sideArmPrivacy || sideArmBasePrivacy;
return { return {
advancedOptions: state.getIn(['compose', 'advanced_options']), advancedOptions: state.getIn(['compose', 'advanced_options']),
amUnlocked: !state.getIn(['accounts', me, 'locked']),
focusDate: state.getIn(['compose', 'focusDate']), focusDate: state.getIn(['compose', 'focusDate']),
caretPosition: state.getIn(['compose', 'caretPosition']), caretPosition: state.getIn(['compose', 'caretPosition']),
isSubmitting: state.getIn(['compose', 'is_submitting']), isSubmitting: state.getIn(['compose', 'is_submitting']),
@ -64,7 +62,6 @@ function mapStateToProps (state) {
showSearch: state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']), showSearch: state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']),
spoiler: spoilersAlwaysOn || state.getIn(['compose', 'spoiler']), spoiler: spoilersAlwaysOn || state.getIn(['compose', 'spoiler']),
spoilerText: state.getIn(['compose', 'spoiler_text']), spoilerText: state.getIn(['compose', 'spoiler_text']),
suggestionToken: state.getIn(['compose', 'suggestion_token']),
suggestions: state.getIn(['compose', 'suggestions']), suggestions: state.getIn(['compose', 'suggestions']),
text: state.getIn(['compose', 'text']), text: state.getIn(['compose', 'text']),
anyMedia: state.getIn(['compose', 'media_attachments']).size > 0, anyMedia: state.getIn(['compose', 'media_attachments']).size > 0,
@ -76,33 +73,55 @@ function mapStateToProps (state) {
// Dispatch mapping. // Dispatch mapping.
const mapDispatchToProps = (dispatch, { intl }) => ({ const mapDispatchToProps = (dispatch, { intl }) => ({
onChangeSpoilerText(text) {
dispatch(changeComposeSpoilerText(text)); onChange(text) {
},
onChangeSpoilerness() {
dispatch(changeComposeSpoilerness());
},
onChangeText(text) {
dispatch(changeCompose(text)); dispatch(changeCompose(text));
}, },
onChangeVisibility(value) {
dispatch(changeComposeVisibility(value)); onSubmit(routerHistory) {
dispatch(submitCompose(routerHistory));
}, },
onClearSuggestions() { onClearSuggestions() {
dispatch(clearComposeSuggestions()); dispatch(clearComposeSuggestions());
}, },
onFetchSuggestions(token) { onFetchSuggestions(token) {
dispatch(fetchComposeSuggestions(token)); dispatch(fetchComposeSuggestions(token));
}, },
onInsertEmoji(position, emoji) {
onSuggestionSelected(position, token, suggestion) {
dispatch(selectComposeSuggestion(position, token, suggestion));
},
onChangeSpoilerText(text) {
dispatch(changeComposeSpoilerText(text));
},
onPaste(files) {
dispatch(uploadCompose(files));
},
onPickEmoji(position, emoji) {
dispatch(insertEmojiCompose(position, emoji)); dispatch(insertEmojiCompose(position, emoji));
}, },
onChangeSpoilerness() {
dispatch(changeComposeSpoilerness());
},
onChangeVisibility(value) {
dispatch(changeComposeVisibility(value));
},
onMount() { onMount() {
dispatch(mountCompose()); dispatch(mountCompose());
}, },
onSelectSuggestion(position, token, suggestion) {
dispatch(selectComposeSuggestion(position, token, suggestion)); onUnmount() {
dispatch(unmountCompose());
}, },
onMediaDescriptionConfirm(routerHistory) { onMediaDescriptionConfirm(routerHistory) {
dispatch(openModal('CONFIRM', { dispatch(openModal('CONFIRM', {
message: intl.formatMessage(messages.missingDescriptionMessage), message: intl.formatMessage(messages.missingDescriptionMessage),
@ -111,15 +130,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
onDoNotAsk: () => dispatch(changeLocalSetting(['confirm_missing_media_description'], false)), onDoNotAsk: () => dispatch(changeLocalSetting(['confirm_missing_media_description'], false)),
})); }));
}, },
onSubmit(routerHistory) {
dispatch(submitCompose(routerHistory));
},
onUnmount() {
dispatch(unmountCompose());
},
onUpload(files) {
dispatch(uploadCompose(files));
},
}); });
export default connect(mapStateToProps, mapDispatchToProps)(ComposeForm); export default connect(mapStateToProps, mapDispatchToProps)(ComposeForm);

View File

@ -1,63 +1,46 @@
// Package imports.
import React from 'react'; import React from 'react';
import { connect } from 'react-redux'; import ComposeFormContainer from './containers/compose_form_container';
import NavigationContainer from './containers/navigation_container';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import { connect } from 'react-redux';
import { injectIntl, defineMessages } from 'react-intl'; import { injectIntl, defineMessages } from 'react-intl';
import classNames from 'classnames'; import classNames from 'classnames';
// Actions.
import { cycleElefriendCompose } from 'flavours/glitch/actions/compose';
// Components.
import ComposeFormContainer from './containers/compose_form_container';
import HeaderContainer from './containers/header_container';
import SearchContainer from './containers/search_container'; import SearchContainer from './containers/search_container';
import SearchResultsContainer from './containers/search_results_container';
import NavigationContainer from './containers/navigation_container';
import spring from 'react-motion/lib/spring';
// Utils.
import { me, mascot } from 'flavours/glitch/util/initial_state';
import Motion from 'flavours/glitch/util/optional_motion'; import Motion from 'flavours/glitch/util/optional_motion';
import spring from 'react-motion/lib/spring';
import SearchResultsContainer from './containers/search_results_container';
import { me, mascot } from 'flavours/glitch/util/initial_state';
import { cycleElefriendCompose } from 'flavours/glitch/actions/compose';
import HeaderContainer from './containers/header_container';
// Messages.
const messages = defineMessages({ const messages = defineMessages({
compose: { id: 'navigation_bar.compose', defaultMessage: 'Compose new toot' }, compose: { id: 'navigation_bar.compose', defaultMessage: 'Compose new toot' },
}); });
// State mapping.
const mapStateToProps = (state, ownProps) => ({ const mapStateToProps = (state, ownProps) => ({
elefriend: state.getIn(['compose', 'elefriend']), elefriend: state.getIn(['compose', 'elefriend']),
showSearch: ownProps.multiColumn ? state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']) : ownProps.isSearchPage, showSearch: ownProps.multiColumn ? state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']) : ownProps.isSearchPage,
}); });
// Dispatch mapping.
const mapDispatchToProps = (dispatch, { intl }) => ({ const mapDispatchToProps = (dispatch, { intl }) => ({
onClickElefriend () { onClickElefriend () {
dispatch(cycleElefriendCompose()); dispatch(cycleElefriendCompose());
}, },
}); });
// The component.
export default @connect(mapStateToProps, mapDispatchToProps) export default @connect(mapStateToProps, mapDispatchToProps)
@injectIntl @injectIntl
class Compose extends React.PureComponent { class Compose extends React.PureComponent {
static propTypes = { static propTypes = {
intl: PropTypes.object.isRequired,
isSearchPage: PropTypes.bool,
multiColumn: PropTypes.bool, multiColumn: PropTypes.bool,
showSearch: PropTypes.bool, showSearch: PropTypes.bool,
isSearchPage: PropTypes.bool,
// State props.
elefriend: PropTypes.number, elefriend: PropTypes.number,
unreadNotifications: PropTypes.number,
// Dispatch props.
onClickElefriend: PropTypes.func, onClickElefriend: PropTypes.func,
intl: PropTypes.object.isRequired,
}; };
// Rendering.
render () { render () {
const { const {
elefriend, elefriend,
@ -69,7 +52,6 @@ class Compose extends React.PureComponent {
} = this.props; } = this.props;
const computedClass = classNames('drawer', `mbstobon-${elefriend}`); const computedClass = classNames('drawer', `mbstobon-${elefriend}`);
// The result.
return ( return (
<div className={computedClass} role='region' aria-label={intl.formatMessage(messages.compose)}> <div className={computedClass} role='region' aria-label={intl.formatMessage(messages.compose)}>
{multiColumn && <HeaderContainer />} {multiColumn && <HeaderContainer />}