mirrors
/
mastodon-glitch
mirror of https://github.com/glitch-soc/mastodon
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Cleanup

pull/574/head
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

173
app/javascript/flavours/glitch/features/compose/components/compose_form.js
View File

@ -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}

61
app/javascript/flavours/glitch/features/compose/containers/compose_form_container.js
View File

@ -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);

38
app/javascript/flavours/glitch/features/compose/index.js
View File

@ -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 />}