diff --git a/app/javascript/mastodon/components/column.js b/app/javascript/mastodon/components/column.js index 93f1d6260..05a7c1436 100644 --- a/app/javascript/mastodon/components/column.js +++ b/app/javascript/mastodon/components/column.js @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import detectPassiveEvents from 'detect-passive-events'; -import scrollTop from '../scroll'; +import { scrollTop } from '../scroll'; export default class Column extends React.PureComponent { diff --git a/app/javascript/mastodon/features/ui/components/column.js b/app/javascript/mastodon/features/ui/components/column.js index aea102aac..9031c16fc 100644 --- a/app/javascript/mastodon/features/ui/components/column.js +++ b/app/javascript/mastodon/features/ui/components/column.js @@ -2,7 +2,7 @@ import React from 'react'; import ColumnHeader from './column_header'; import PropTypes from 'prop-types'; import { debounce } from 'lodash'; -import scrollTop from '../../../scroll'; +import { scrollTop } from '../../../scroll'; import { isMobile } from '../../../is_mobile'; export default class Column extends React.PureComponent { diff --git a/app/javascript/mastodon/features/ui/components/columns_area.js b/app/javascript/mastodon/features/ui/components/columns_area.js index 63bd1b021..7652d67a0 100644 --- a/app/javascript/mastodon/features/ui/components/columns_area.js +++ b/app/javascript/mastodon/features/ui/components/columns_area.js @@ -12,6 +12,8 @@ import ColumnLoading from './column_loading'; import BundleColumnError from './bundle_column_error'; import { Compose, Notifications, HomeTimeline, CommunityTimeline, PublicTimeline, HashtagTimeline, FavouritedStatuses } from '../../ui/util/async-components'; +import { scrollRight } from '../../../scroll'; + const componentMap = { 'COMPOSE': Compose, 'HOME': HomeTimeline, @@ -49,9 +51,13 @@ export default class ColumnsArea extends ImmutablePureComponent { this.setState({ shouldAnimate: true }); } - componentDidUpdate() { + componentDidUpdate(prevProps) { this.lastIndex = getIndex(this.context.router.history.location.pathname); this.setState({ shouldAnimate: true }); + + if (this.props.children !== prevProps.children) { + scrollRight(this.node); + } } handleSwipe = (index) => { @@ -74,6 +80,10 @@ export default class ColumnsArea extends ImmutablePureComponent { } } + setRef = (node) => { + this.node = node; + } + renderView = (link, index) => { const columnIndex = getIndex(this.context.router.history.location.pathname); const title = this.props.intl.formatMessage({ id: link.props['data-preview-title-id'] }); @@ -114,7 +124,7 @@ export default class ColumnsArea extends ImmutablePureComponent { } return ( -
+
{columns.map(column => { const params = column.get('params', null) === null ? null : column.get('params').toJS(); diff --git a/app/javascript/mastodon/scroll.js b/app/javascript/mastodon/scroll.js index c089d37db..44f95b17f 100644 --- a/app/javascript/mastodon/scroll.js +++ b/app/javascript/mastodon/scroll.js @@ -1,9 +1,9 @@ const easingOutQuint = (x, t, b, c, d) => c * ((t = t / d - 1) * t * t * t * t + 1) + b; -const scrollTop = (node) => { +const scroll = (node, key, target) => { const startTime = Date.now(); - const offset = node.scrollTop; - const targetY = -offset; + const offset = node[key]; + const gap = target - offset; const duration = 1000; let interrupt = false; @@ -15,7 +15,7 @@ const scrollTop = (node) => { return; } - node.scrollTop = easingOutQuint(0, elapsed, offset, targetY, duration); + node[key] = easingOutQuint(0, elapsed, offset, gap, duration); requestAnimationFrame(step); }; @@ -26,4 +26,5 @@ const scrollTop = (node) => { }; }; -export default scrollTop; +export const scrollRight = (node) => scroll(node, 'scrollLeft', node.scrollWidth); +export const scrollTop = (node) => scroll(node, 'scrollTop', 0);