Cleanup
This commit is contained in:
parent
2ee26ba420
commit
041e27bd2d
3 changed files with 128 additions and 144 deletions
|
@ -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);
|
||||
}
|
||||
}
|
||||
static defaultProps = {
|
||||
showSearch: false,
|
||||
};
|
||||
|
||||
// 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();
|
||||
}
|
||||
|
||||
// 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}
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import { connect } from 'react-redux';
|
||||
import { defineMessages } from 'react-intl';
|
||||
import ComposeForm from '../components/compose_form';
|
||||
import {
|
||||
changeCompose,
|
||||
|
@ -20,7 +21,6 @@ import {
|
|||
import { changeLocalSetting } from 'flavours/glitch/actions/local_settings';
|
||||
|
||||
import { privacyPreference } from 'flavours/glitch/util/privacy_preference';
|
||||
import { me } from 'flavours/glitch/util/initial_state';
|
||||
|
||||
const messages = defineMessages({
|
||||
missingDescriptionMessage: { id: 'confirmations.missing_media_description.message',
|
||||
|
@ -28,7 +28,6 @@ const messages = defineMessages({
|
|||
missingDescriptionConfirm: { id: 'confirmations.missing_media_description.confirm',
|
||||
defaultMessage: 'Send anyway' },
|
||||
});
|
||||
import { defineMessages } from 'react-intl';
|
||||
|
||||
// State mapping.
|
||||
function mapStateToProps (state) {
|
||||
|
@ -49,7 +48,6 @@ function mapStateToProps (state) {
|
|||
sideArmPrivacy = sideArmPrivacy || sideArmBasePrivacy;
|
||||
return {
|
||||
advancedOptions: state.getIn(['compose', 'advanced_options']),
|
||||
amUnlocked: !state.getIn(['accounts', me, 'locked']),
|
||||
focusDate: state.getIn(['compose', 'focusDate']),
|
||||
caretPosition: state.getIn(['compose', 'caretPosition']),
|
||||
isSubmitting: state.getIn(['compose', 'is_submitting']),
|
||||
|
@ -64,7 +62,6 @@ function mapStateToProps (state) {
|
|||
showSearch: state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']),
|
||||
spoiler: spoilersAlwaysOn || state.getIn(['compose', 'spoiler']),
|
||||
spoilerText: state.getIn(['compose', 'spoiler_text']),
|
||||
suggestionToken: state.getIn(['compose', 'suggestion_token']),
|
||||
suggestions: state.getIn(['compose', 'suggestions']),
|
||||
text: state.getIn(['compose', 'text']),
|
||||
anyMedia: state.getIn(['compose', 'media_attachments']).size > 0,
|
||||
|
@ -76,33 +73,55 @@ function mapStateToProps (state) {
|
|||
|
||||
// Dispatch mapping.
|
||||
const mapDispatchToProps = (dispatch, { intl }) => ({
|
||||
onChangeSpoilerText(text) {
|
||||
dispatch(changeComposeSpoilerText(text));
|
||||
},
|
||||
onChangeSpoilerness() {
|
||||
dispatch(changeComposeSpoilerness());
|
||||
},
|
||||
onChangeText(text) {
|
||||
|
||||
onChange(text) {
|
||||
dispatch(changeCompose(text));
|
||||
},
|
||||
onChangeVisibility(value) {
|
||||
dispatch(changeComposeVisibility(value));
|
||||
|
||||
onSubmit(routerHistory) {
|
||||
dispatch(submitCompose(routerHistory));
|
||||
},
|
||||
|
||||
onClearSuggestions() {
|
||||
dispatch(clearComposeSuggestions());
|
||||
},
|
||||
|
||||
onFetchSuggestions(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));
|
||||
},
|
||||
|
||||
onChangeSpoilerness() {
|
||||
dispatch(changeComposeSpoilerness());
|
||||
},
|
||||
|
||||
onChangeVisibility(value) {
|
||||
dispatch(changeComposeVisibility(value));
|
||||
},
|
||||
|
||||
onMount() {
|
||||
dispatch(mountCompose());
|
||||
},
|
||||
onSelectSuggestion(position, token, suggestion) {
|
||||
dispatch(selectComposeSuggestion(position, token, suggestion));
|
||||
|
||||
onUnmount() {
|
||||
dispatch(unmountCompose());
|
||||
},
|
||||
|
||||
onMediaDescriptionConfirm(routerHistory) {
|
||||
dispatch(openModal('CONFIRM', {
|
||||
message: intl.formatMessage(messages.missingDescriptionMessage),
|
||||
|
@ -111,15 +130,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
|
|||
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);
|
||||
|
|
|
@ -1,63 +1,46 @@
|
|||
// Package imports.
|
||||
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 ImmutablePropTypes from 'react-immutable-proptypes';
|
||||
import { connect } from 'react-redux';
|
||||
import { injectIntl, defineMessages } from 'react-intl';
|
||||
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 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 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({
|
||||
compose: { id: 'navigation_bar.compose', defaultMessage: 'Compose new toot' },
|
||||
});
|
||||
|
||||
// State mapping.
|
||||
const mapStateToProps = (state, ownProps) => ({
|
||||
elefriend: state.getIn(['compose', 'elefriend']),
|
||||
showSearch: ownProps.multiColumn ? state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']) : ownProps.isSearchPage,
|
||||
});
|
||||
|
||||
// Dispatch mapping.
|
||||
const mapDispatchToProps = (dispatch, { intl }) => ({
|
||||
onClickElefriend () {
|
||||
dispatch(cycleElefriendCompose());
|
||||
},
|
||||
});
|
||||
|
||||
// The component.
|
||||
export default @connect(mapStateToProps, mapDispatchToProps)
|
||||
@injectIntl
|
||||
class Compose extends React.PureComponent {
|
||||
static propTypes = {
|
||||
intl: PropTypes.object.isRequired,
|
||||
isSearchPage: PropTypes.bool,
|
||||
multiColumn: PropTypes.bool,
|
||||
showSearch: PropTypes.bool,
|
||||
|
||||
// State props.
|
||||
isSearchPage: PropTypes.bool,
|
||||
elefriend: PropTypes.number,
|
||||
unreadNotifications: PropTypes.number,
|
||||
|
||||
// Dispatch props.
|
||||
onClickElefriend: PropTypes.func,
|
||||
intl: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
// Rendering.
|
||||
render () {
|
||||
const {
|
||||
elefriend,
|
||||
|
@ -69,7 +52,6 @@ class Compose extends React.PureComponent {
|
|||
} = this.props;
|
||||
const computedClass = classNames('drawer', `mbstobon-${elefriend}`);
|
||||
|
||||
// The result.
|
||||
return (
|
||||
<div className={computedClass} role='region' aria-label={intl.formatMessage(messages.compose)}>
|
||||
{multiColumn && <HeaderContainer />}
|
||||
|
|
Loading…
Reference in a new issue