Further reduce code differences with upstream (#2509)

This commit is contained in:
Claire 2023-12-09 20:29:23 +01:00 committed by GitHub
parent 1ddf2012ee
commit a27abb4802
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 102 additions and 109 deletions

View file

@ -569,7 +569,7 @@ class Status extends ImmutablePureComponent {
openProfile: this.handleHotkeyOpenProfile,
moveUp: this.handleHotkeyMoveUp,
moveDown: this.handleHotkeyMoveDown,
toggleSpoiler: this.handleExpandedToggle,
toggleHidden: this.handleExpandedToggle,
bookmark: this.handleHotkeyBookmark,
toggleCollapse: this.handleHotkeyCollapse,
toggleSensitive: this.handleHotkeyToggleSensitive,

View file

@ -16,7 +16,7 @@ const messages = defineMessages({
add: { id: 'lists.account.add', defaultMessage: 'Add to list' },
});
const mapStateToProps = (state, { listId, added }) => ({
const MapStateToProps = (state, { listId, added }) => ({
list: state.get('lists').get(listId),
added: typeof added === 'undefined' ? state.getIn(['listAdder', 'lists', 'items']).includes(listId) : added,
});
@ -69,4 +69,4 @@ class List extends ImmutablePureComponent {
}
export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(List));
export default connect(MapStateToProps, mapDispatchToProps)(injectIntl(List));

View file

@ -1,20 +1,39 @@
import PropTypes from 'prop-types';
import { defineMessages } from 'react-intl';
import { defineMessages, injectIntl } from 'react-intl';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { connect } from 'react-redux';
import { removeFromListEditor, addToListEditor } from '../../../actions/lists';
import { Avatar } from '../../../components/avatar';
import { DisplayName } from '../../../components/display_name';
import { IconButton } from '../../../components/icon_button';
import { makeGetAccount } from '../../../selectors';
const messages = defineMessages({
remove: { id: 'lists.account.remove', defaultMessage: 'Remove from list' },
add: { id: 'lists.account.add', defaultMessage: 'Add to list' },
});
export default class Account extends ImmutablePureComponent {
const makeMapStateToProps = () => {
const getAccount = makeGetAccount();
const mapStateToProps = (state, { accountId, added }) => ({
account: getAccount(state, accountId),
added: typeof added === 'undefined' ? state.getIn(['listEditor', 'accounts', 'items']).includes(accountId) : added,
});
return mapStateToProps;
};
const mapDispatchToProps = (dispatch, { accountId }) => ({
onRemove: () => dispatch(removeFromListEditor(accountId)),
onAdd: () => dispatch(addToListEditor(accountId)),
});
class Account extends ImmutablePureComponent {
static propTypes = {
account: ImmutablePropTypes.map.isRequired,
@ -56,3 +75,5 @@ export default class Account extends ImmutablePureComponent {
}
}
export default connect(makeMapStateToProps, mapDispatchToProps)(injectIntl(Account));

View file

@ -1,17 +1,31 @@
import PropTypes from 'prop-types';
import { PureComponent } from 'react';
import { defineMessages } from 'react-intl';
import { defineMessages, injectIntl } from 'react-intl';
import classNames from 'classnames';
import { connect } from 'react-redux';
import { Icon } from 'flavours/glitch/components/icon';
import { fetchListSuggestions, clearListSuggestions, changeListSuggestions } from '../../../actions/lists';
const messages = defineMessages({
search: { id: 'lists.search', defaultMessage: 'Search among people you follow' },
});
export default class Search extends PureComponent {
const mapStateToProps = state => ({
value: state.getIn(['listEditor', 'suggestions', 'value']),
});
const mapDispatchToProps = dispatch => ({
onSubmit: value => dispatch(fetchListSuggestions(value)),
onClear: () => dispatch(clearListSuggestions()),
onChange: value => dispatch(changeListSuggestions(value)),
});
class Search extends PureComponent {
static propTypes = {
intl: PropTypes.object.isRequired,
@ -63,3 +77,5 @@ export default class Search extends PureComponent {
}
}
export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(Search));

View file

@ -1,26 +0,0 @@
import { injectIntl } from 'react-intl';
import { connect } from 'react-redux';
import { removeFromListEditor, addToListEditor } from 'flavours/glitch/actions/lists';
import { makeGetAccount } from 'flavours/glitch/selectors';
import Account from '../components/account';
const makeMapStateToProps = () => {
const getAccount = makeGetAccount();
const mapStateToProps = (state, { accountId, added }) => ({
account: getAccount(state, accountId),
added: typeof added === 'undefined' ? state.getIn(['listEditor', 'accounts', 'items']).includes(accountId) : added,
});
return mapStateToProps;
};
const mapDispatchToProps = (dispatch, { accountId }) => ({
onRemove: () => dispatch(removeFromListEditor(accountId)),
onAdd: () => dispatch(addToListEditor(accountId)),
});
export default injectIntl(connect(makeMapStateToProps, mapDispatchToProps)(Account));

View file

@ -1,18 +0,0 @@
import { injectIntl } from 'react-intl';
import { connect } from 'react-redux';
import { fetchListSuggestions, clearListSuggestions, changeListSuggestions } from '../../../actions/lists';
import Search from '../components/search';
const mapStateToProps = state => ({
value: state.getIn(['listEditor', 'suggestions', 'value']),
});
const mapDispatchToProps = dispatch => ({
onSubmit: value => dispatch(fetchListSuggestions(value)),
onClear: () => dispatch(clearListSuggestions()),
onChange: value => dispatch(changeListSuggestions(value)),
});
export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(Search));

View file

@ -11,10 +11,9 @@ import spring from 'react-motion/lib/spring';
import { setupListEditor, clearListSuggestions, resetListEditor } from '../../actions/lists';
import Motion from '../ui/util/optional_motion';
import Account from './components/account';
import EditListForm from './components/edit_list_form';
import AccountContainer from './containers/account_container';
import SearchContainer from './containers/search_container';
import Search from './components/search';
const mapStateToProps = state => ({
accountIds: state.getIn(['listEditor', 'accounts', 'items']),
@ -58,21 +57,21 @@ class ListEditor extends ImmutablePureComponent {
<div className='modal-root__modal list-editor'>
<EditListForm />
<SearchContainer />
<Search />
<div className='drawer__pager'>
<div className='drawer__inner list-editor__accounts'>
{accountIds.map(accountId => <AccountContainer key={accountId} accountId={accountId} added />)}
{accountIds.map(accountId => <Account key={accountId} accountId={accountId} added />)}
</div>
{showSearch && <div role='button' tabIndex={-1} className='drawer__backdrop' onClick={onClear} />}
<Motion defaultStyle={{ x: -100 }} style={{ x: spring(showSearch ? 0 : -100, { stiffness: 210, damping: 20 }) }}>
{({ x }) =>
(<div className='drawer__inner backdrop' style={{ transform: x === 0 ? null : `translateX(${x}%)`, visibility: x === -100 ? 'hidden' : 'visible' }}>
{searchAccountIds.map(accountId => <AccountContainer key={accountId} accountId={accountId} />)}
</div>)
}
{({ x }) => (
<div className='drawer__inner backdrop' style={{ transform: x === 0 ? null : `translateX(${x}%)`, visibility: x === -100 ? 'hidden' : 'visible' }}>
{searchAccountIds.map(accountId => <Account key={accountId} accountId={accountId} />)}
</div>
)}
</Motion>
</div>
</div>

View file

@ -1,11 +1,11 @@
import PropTypes from 'prop-types';
import { Component } from 'react';
import { PureComponent } from 'react';
import { FormattedMessage } from 'react-intl';
import { Icon } from 'flavours/glitch/components/icon';
export default class ClearColumnButton extends Component {
export default class ClearColumnButton extends PureComponent {
static propTypes = {
onClick: PropTypes.func.isRequired,

View file

@ -711,7 +711,7 @@ class Status extends ImmutablePureComponent {
bookmark: this.handleHotkeyBookmark,
mention: this.handleHotkeyMention,
openProfile: this.handleHotkeyOpenProfile,
toggleSpoiler: this.handleToggleHidden,
toggleHidden: this.handleToggleHidden,
toggleSensitive: this.handleHotkeyToggleSensitive,
openMedia: this.handleHotkeyOpenMedia,
};

View file

@ -1,10 +1,10 @@
import PropTypes from 'prop-types';
import { Component } from 'react';
import { PureComponent } from 'react';
const emptyComponent = () => null;
const noop = () => { };
class Bundle extends Component {
class Bundle extends PureComponent {
static propTypes = {
fetchComponent: PropTypes.func.isRequired,
@ -26,7 +26,7 @@ class Bundle extends Component {
onFetchFail: noop,
};
static cache = {};
static cache = new Map;
state = {
mod: undefined,
@ -51,6 +51,7 @@ class Bundle extends Component {
load = (props) => {
const { fetchComponent, onFetch, onFetchSuccess, onFetchFail, renderDelay } = props || this.props;
const cachedMod = Bundle.cache.get(fetchComponent);
if (fetchComponent === undefined) {
this.setState({ mod: null });
@ -59,10 +60,8 @@ class Bundle extends Component {
onFetch();
if (Bundle.cache[fetchComponent.name]) {
const mod = Bundle.cache[fetchComponent.name];
this.setState({ mod: mod.default });
if (cachedMod) {
this.setState({ mod: cachedMod.default });
onFetchSuccess();
return Promise.resolve();
}
@ -76,7 +75,7 @@ class Bundle extends Component {
return fetchComponent()
.then((mod) => {
Bundle.cache[fetchComponent.name] = mod;
Bundle.cache.set(fetchComponent, mod);
this.setState({ mod: mod.default });
onFetchSuccess();
})

View file

@ -1,5 +1,5 @@
import PropTypes from 'prop-types';
import { Component } from 'react';
import { PureComponent } from 'react';
import { defineMessages, injectIntl } from 'react-intl';
@ -11,7 +11,7 @@ const messages = defineMessages({
close: { id: 'bundle_modal_error.close', defaultMessage: 'Close' },
});
class BundleModalError extends Component {
class BundleModalError extends PureComponent {
static propTypes = {
onRetry: PropTypes.func.isRequired,

View file

@ -99,21 +99,6 @@ class MediaModal extends ImmutablePureComponent {
this._sendBackgroundColor();
}
componentWillUnmount () {
window.removeEventListener('keydown', this.handleKeyDown);
this.props.onChangeBackgroundColor(null);
}
getIndex () {
return this.state.index !== null ? this.state.index : this.props.index;
}
toggleNavigation = () => {
this.setState(prevState => ({
navigationHidden: !prevState.navigationHidden,
}));
};
componentDidUpdate (prevProps, prevState) {
if (prevState.index !== this.state.index) {
this._sendBackgroundColor();
@ -131,6 +116,22 @@ class MediaModal extends ImmutablePureComponent {
}
}
componentWillUnmount () {
window.removeEventListener('keydown', this.handleKeyDown);
this.props.onChangeBackgroundColor(null);
}
getIndex () {
return this.state.index !== null ? this.state.index : this.props.index;
}
toggleNavigation = () => {
this.setState(prevState => ({
navigationHidden: !prevState.navigationHidden,
}));
};
render () {
const { media, statusId, lang, intl, onClose } = this.props;
const { navigationHidden } = this.state;

View file

@ -48,7 +48,7 @@ class NavigationPanel extends Component {
return match || location.pathname.startsWith('/public');
};
render() {
render () {
const { intl, onOpenSettings } = this.props;
const { signedIn, disabledAccountId } = this.context.identity;

View file

@ -40,14 +40,14 @@ export default class UploadArea extends PureComponent {
return (
<Motion defaultStyle={{ backgroundOpacity: 0, backgroundScale: 0.95 }} style={{ backgroundOpacity: spring(active ? 1 : 0, { stiffness: 150, damping: 15 }), backgroundScale: spring(active ? 1 : 0.95, { stiffness: 200, damping: 3 }) }}>
{({ backgroundOpacity, backgroundScale }) =>
(<div className='upload-area' style={{ visibility: active ? 'visible' : 'hidden', opacity: backgroundOpacity }}>
{({ backgroundOpacity, backgroundScale }) => (
<div className='upload-area' style={{ visibility: active ? 'visible' : 'hidden', opacity: backgroundOpacity }}>
<div className='upload-area__drop'>
<div className='upload-area__background' style={{ transform: `scale(${backgroundScale})` }} />
<div className='upload-area__content'><FormattedMessage id='upload_area.title' defaultMessage='Drag & drop to upload' /></div>
</div>
</div>)
}
</div>
)}
</Motion>
);
}

View file

@ -1,5 +1,5 @@
import PropTypes from 'prop-types';
import { PureComponent, Component } from 'react';
import { PureComponent } from 'react';
import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
@ -68,9 +68,10 @@ import {
PrivacyPolicy,
} from './util/async-components';
import { WrappedSwitch, WrappedRoute } from './util/react_router_helpers';
// Dummy import, to make sure that <Status /> ends up in the application bundle.
// Without this it ends up in ~8 very commonly used bundles.
import "../../components/status";
import '../../components/status';
const messages = defineMessages({
beforeUnload: { id: 'ui.beforeunload', defaultMessage: 'Your draft will be lost if you leave Mastodon.' },
@ -119,7 +120,7 @@ const keyMap = {
goToBlocked: 'g b',
goToMuted: 'g m',
goToRequests: 'g r',
toggleSpoiler: 'x',
toggleHidden: 'x',
bookmark: 'd',
toggleCollapse: 'shift+x',
toggleSensitive: 'h',
@ -255,7 +256,7 @@ class SwitchingColumnsArea extends PureComponent {
}
class UI extends Component {
class UI extends PureComponent {
static contextTypes = {
identity: PropTypes.object.isRequired,
@ -270,7 +271,6 @@ class UI extends Component {
hasComposingText: PropTypes.bool,
hasMediaAttachments: PropTypes.bool,
canUploadMore: PropTypes.bool,
match: PropTypes.object.isRequired,
intl: PropTypes.object.isRequired,
dropdownMenuIsOpen: PropTypes.bool,
unreadNotifications: PropTypes.number,
@ -287,7 +287,7 @@ class UI extends Component {
draggingOver: false,
};
handleBeforeUnload = (e) => {
handleBeforeUnload = e => {
const { intl, dispatch, hasComposingText, hasMediaAttachments } = this.props;
dispatch(synchronouslySubmitMarkers());
@ -300,6 +300,14 @@ class UI extends Component {
}
};
handleVisibilityChange = () => {
const visibility = !document[this.visibilityHiddenProp];
this.props.dispatch(notificationsSetVisibility(visibility));
if (visibility) {
this.props.dispatch(submitMarkers({ immediate: true }));
}
};
handleDragEnter = (e) => {
e.preventDefault();
@ -311,13 +319,14 @@ class UI extends Component {
this.dragTargets.push(e.target);
}
if (e.dataTransfer && e.dataTransfer.types.includes('Files') && this.props.canUploadMore && this.context.identity.signedIn) {
if (e.dataTransfer && Array.from(e.dataTransfer.types).includes('Files') && this.props.canUploadMore && this.context.identity.signedIn) {
this.setState({ draggingOver: true });
}
};
handleDragOver = (e) => {
if (this.dataTransferIsText(e.dataTransfer)) return false;
e.preventDefault();
e.stopPropagation();
@ -372,14 +381,6 @@ class UI extends Component {
}
};
handleVisibilityChange = () => {
const visibility = !document[this.visibilityHiddenProp];
this.props.dispatch(notificationsSetVisibility(visibility));
if (visibility) {
this.props.dispatch(submitMarkers({ immediate: true }));
}
};
handleLayoutChange = debounce(() => {
this.props.dispatch(clearHeight()); // The cached heights are no longer accurate, invalidate
}, 500, {