forked from cybrespace/mastodon
Do not scroll the columns area due to redirection (#4541)
Commit 9d1f8b9d6a
scrolls the columns area
when the route changes since the user is likely to want to see the
rightmost column in such cases.
However, redirection is automatic and does not indicate users' intension.
Do not scroll the columns area due to one.
This commit is contained in:
parent
0827c09c44
commit
9958eba356
|
@ -24,7 +24,7 @@ const componentMap = {
|
||||||
'FAVOURITES': FavouritedStatuses,
|
'FAVOURITES': FavouritedStatuses,
|
||||||
};
|
};
|
||||||
|
|
||||||
@injectIntl
|
@component => injectIntl(component, { withRef: true })
|
||||||
export default class ColumnsArea extends ImmutablePureComponent {
|
export default class ColumnsArea extends ImmutablePureComponent {
|
||||||
|
|
||||||
static contextTypes = {
|
static contextTypes = {
|
||||||
|
@ -51,13 +51,13 @@ export default class ColumnsArea extends ImmutablePureComponent {
|
||||||
this.setState({ shouldAnimate: true });
|
this.setState({ shouldAnimate: true });
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidUpdate(prevProps) {
|
componentDidUpdate() {
|
||||||
this.lastIndex = getIndex(this.context.router.history.location.pathname);
|
this.lastIndex = getIndex(this.context.router.history.location.pathname);
|
||||||
this.setState({ shouldAnimate: true });
|
this.setState({ shouldAnimate: true });
|
||||||
|
|
||||||
if (this.props.children !== prevProps.children && !this.props.singleColumn) {
|
|
||||||
scrollRight(this.node);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
handleChildrenContentChange() {
|
||||||
|
scrollRight(this.node);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleSwipe = (index) => {
|
handleSwipe = (index) => {
|
||||||
|
|
|
@ -5,4 +5,4 @@ const mapStateToProps = state => ({
|
||||||
columns: state.getIn(['settings', 'columns']),
|
columns: state.getIn(['settings', 'columns']),
|
||||||
});
|
});
|
||||||
|
|
||||||
export default connect(mapStateToProps)(ColumnsArea);
|
export default connect(mapStateToProps, null, null, { withRef: true })(ColumnsArea);
|
||||||
|
|
|
@ -1,12 +1,12 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import Redirect from 'react-router-dom/Redirect';
|
|
||||||
import NotificationsContainer from './containers/notifications_container';
|
import NotificationsContainer from './containers/notifications_container';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import LoadingBarContainer from './containers/loading_bar_container';
|
import LoadingBarContainer from './containers/loading_bar_container';
|
||||||
import TabsBar from './components/tabs_bar';
|
import TabsBar from './components/tabs_bar';
|
||||||
import ModalContainer from './containers/modal_container';
|
import ModalContainer from './containers/modal_container';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
|
import { Redirect, withRouter } from 'react-router-dom';
|
||||||
import { isMobile } from '../../is_mobile';
|
import { isMobile } from '../../is_mobile';
|
||||||
import { debounce } from 'lodash';
|
import { debounce } from 'lodash';
|
||||||
import { uploadCompose } from '../../actions/compose';
|
import { uploadCompose } from '../../actions/compose';
|
||||||
|
@ -48,6 +48,7 @@ const mapStateToProps = state => ({
|
||||||
});
|
});
|
||||||
|
|
||||||
@connect(mapStateToProps)
|
@connect(mapStateToProps)
|
||||||
|
@withRouter
|
||||||
export default class UI extends React.PureComponent {
|
export default class UI extends React.PureComponent {
|
||||||
|
|
||||||
static contextTypes = {
|
static contextTypes = {
|
||||||
|
@ -59,6 +60,7 @@ export default class UI extends React.PureComponent {
|
||||||
children: PropTypes.node,
|
children: PropTypes.node,
|
||||||
systemFontUi: PropTypes.bool,
|
systemFontUi: PropTypes.bool,
|
||||||
isComposing: PropTypes.bool,
|
isComposing: PropTypes.bool,
|
||||||
|
location: PropTypes.object,
|
||||||
};
|
};
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
|
@ -168,6 +170,12 @@ export default class UI extends React.PureComponent {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
componentDidUpdate (prevProps) {
|
||||||
|
if (![this.props.location.pathname, '/'].includes(prevProps.location.pathname)) {
|
||||||
|
this.columnsAreaNode.handleChildrenContentChange();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
componentWillUnmount () {
|
componentWillUnmount () {
|
||||||
window.removeEventListener('resize', this.handleResize);
|
window.removeEventListener('resize', this.handleResize);
|
||||||
document.removeEventListener('dragenter', this.handleDragEnter);
|
document.removeEventListener('dragenter', this.handleDragEnter);
|
||||||
|
@ -181,6 +189,10 @@ export default class UI extends React.PureComponent {
|
||||||
this.node = c;
|
this.node = c;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
setColumnsAreaRef = (c) => {
|
||||||
|
this.columnsAreaNode = c.getWrappedInstance().getWrappedInstance();
|
||||||
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const { width, draggingOver } = this.state;
|
const { width, draggingOver } = this.state;
|
||||||
const { children } = this.props;
|
const { children } = this.props;
|
||||||
|
@ -192,7 +204,7 @@ export default class UI extends React.PureComponent {
|
||||||
return (
|
return (
|
||||||
<div className={className} ref={this.setRef}>
|
<div className={className} ref={this.setRef}>
|
||||||
<TabsBar />
|
<TabsBar />
|
||||||
<ColumnsAreaContainer singleColumn={isMobile(width)}>
|
<ColumnsAreaContainer ref={this.setColumnsAreaRef} singleColumn={isMobile(width)}>
|
||||||
<WrappedSwitch>
|
<WrappedSwitch>
|
||||||
<Redirect from='/' to='/getting-started' exact />
|
<Redirect from='/' to='/getting-started' exact />
|
||||||
<WrappedRoute path='/getting-started' component={GettingStarted} content={children} />
|
<WrappedRoute path='/getting-started' component={GettingStarted} content={children} />
|
||||||
|
|
Loading…
Reference in New Issue