Browse Source

Improve swiping (#4188)

* feat(components/columns_area): Toggle animation settings

* fix(components/media_modal): Center non-visible views

* fix(components/media_modal): Check for null

* refactor(columns_area): Better logic
custom
Sorin Davidoi 5 years ago
committed by Eugen Rochko
parent
commit
a9067167bb
  1. 20
      app/javascript/mastodon/features/ui/components/columns_area.js
  2. 2
      app/javascript/styles/components.scss

20
app/javascript/mastodon/features/ui/components/columns_area.js

@ -32,12 +32,19 @@ export default class ColumnsArea extends ImmutablePureComponent {
children: PropTypes.node,
};
componentDidUpdate() {
this.lastIndex = getIndex(this.context.router.history.location.pathname);
}
handleSwipe = (index) => {
window.requestAnimationFrame(() => {
window.requestAnimationFrame(() => {
this.context.router.history.push(getLink(index));
});
});
this.pendingIndex = index;
}
handleAnimationEnd = () => {
if (typeof this.pendingIndex === 'number') {
this.context.router.history.push(getLink(this.pendingIndex));
this.pendingIndex = null;
}
}
renderView = (link, index) => {
@ -68,10 +75,11 @@ export default class ColumnsArea extends ImmutablePureComponent {
const { columns, children, singleColumn } = this.props;
const columnIndex = getIndex(this.context.router.history.location.pathname);
const shouldAnimate = Math.abs(this.lastIndex - columnIndex) === 1;
if (singleColumn) {
return columnIndex !== -1 ? (
<ReactSwipeableViews index={columnIndex} onChangeIndex={this.handleSwipe} animateTransitions={false} style={{ height: '100%' }}>
<ReactSwipeableViews index={columnIndex} onChangeIndex={this.handleSwipe} onTransitionEnd={this.handleAnimationEnd} animateTransitions={shouldAnimate} springConfig={{ duration: '400ms', delay: '0s', easeFunction: 'ease' }} style={{ height: '100%' }}>
{links.map(this.renderView)}
</ReactSwipeableViews>
) : <div className='columns-area'>{children}</div>;

2
app/javascript/styles/components.scss

@ -1312,6 +1312,8 @@
}
.react-swipeable-view-container > * {
display: flex;
align-items: center;
height: 100%;
}

Loading…
Cancel
Save