diff options
3 files changed, 20 insertions, 8 deletions
diff --git a/app/javascript/mastodon/features/ui/components/columns_area.js b/app/javascript/mastodon/features/ui/components/columns_area.js index 47d5a2e20..de3a199c7 100644 --- a/app/javascript/mastodon/features/ui/components/columns_area.js +++ b/app/javascript/mastodon/features/ui/components/columns_area.js @@ -24,7 +24,7 @@ const componentMap = { 'FAVOURITES': FavouritedStatuses, }; -@injectIntl +@component => injectIntl(component, { withRef: true }) export default class ColumnsArea extends ImmutablePureComponent { static contextTypes = { @@ -51,13 +51,13 @@ export default class ColumnsArea extends ImmutablePureComponent { this.setState({ shouldAnimate: true }); } - componentDidUpdate(prevProps) { + componentDidUpdate() { this.lastIndex = getIndex(this.context.router.history.location.pathname); this.setState({ shouldAnimate: true }); + } - if (this.props.children !== prevProps.children && !this.props.singleColumn) { - scrollRight(this.node); - } + handleChildrenContentChange() { + scrollRight(this.node); } handleSwipe = (index) => { diff --git a/app/javascript/mastodon/features/ui/containers/columns_area_container.js b/app/javascript/mastodon/features/ui/containers/columns_area_container.js index 6420f0784..95f95618b 100644 --- a/app/javascript/mastodon/features/ui/containers/columns_area_container.js +++ b/app/javascript/mastodon/features/ui/containers/columns_area_container.js @@ -5,4 +5,4 @@ const mapStateToProps = state => ({ columns: state.getIn(['settings', 'columns']), }); -export default connect(mapStateToProps)(ColumnsArea); +export default connect(mapStateToProps, null, null, { withRef: true })(ColumnsArea); diff --git a/app/javascript/mastodon/features/ui/index.js b/app/javascript/mastodon/features/ui/index.js index 44243d370..34b59fcc5 100644 --- a/app/javascript/mastodon/features/ui/index.js +++ b/app/javascript/mastodon/features/ui/index.js @@ -1,12 +1,12 @@ import React from 'react'; import classNames from 'classnames'; -import Redirect from 'react-router-dom/Redirect'; import NotificationsContainer from './containers/notifications_container'; import PropTypes from 'prop-types'; import LoadingBarContainer from './containers/loading_bar_container'; import TabsBar from './components/tabs_bar'; import ModalContainer from './containers/modal_container'; import { connect } from 'react-redux'; +import { Redirect, withRouter } from 'react-router-dom'; import { isMobile } from '../../is_mobile'; import { debounce } from 'lodash'; import { uploadCompose } from '../../actions/compose'; @@ -48,6 +48,7 @@ const mapStateToProps = state => ({ }); @connect(mapStateToProps) +@withRouter export default class UI extends React.PureComponent { static contextTypes = { @@ -59,6 +60,7 @@ export default class UI extends React.PureComponent { children: PropTypes.node, systemFontUi: PropTypes.bool, isComposing: PropTypes.bool, + location: PropTypes.object, }; state = { @@ -168,6 +170,12 @@ export default class UI extends React.PureComponent { return true; } + componentDidUpdate (prevProps) { + if (![this.props.location.pathname, '/'].includes(prevProps.location.pathname)) { + this.columnsAreaNode.handleChildrenContentChange(); + } + } + componentWillUnmount () { window.removeEventListener('resize', this.handleResize); document.removeEventListener('dragenter', this.handleDragEnter); @@ -181,6 +189,10 @@ export default class UI extends React.PureComponent { this.node = c; } + setColumnsAreaRef = (c) => { + this.columnsAreaNode = c.getWrappedInstance().getWrappedInstance(); + } + render () { const { width, draggingOver } = this.state; const { children } = this.props; @@ -192,7 +204,7 @@ export default class UI extends React.PureComponent { return ( <div className={className} ref={this.setRef}> <TabsBar /> - <ColumnsAreaContainer singleColumn={isMobile(width)}> + <ColumnsAreaContainer ref={this.setColumnsAreaRef} singleColumn={isMobile(width)}> <WrappedSwitch> <Redirect from='/' to='/getting-started' exact /> <WrappedRoute path='/getting-started' component={GettingStarted} content={children} /> |