From d23293c762f703e334607882c66de028fa216ca2 Mon Sep 17 00:00:00 2001
From: Sorin Davidoi <sorin.davidoi@gmail.com>
Date: Sat, 24 Jun 2017 23:17:39 +0200
Subject: [PATCH] feat(components/onboarding_modal): Swipe between pages
 (#3934)

---
 .../mastodon/features/ui/components/onboarding_modal.js      | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/javascript/mastodon/features/ui/components/onboarding_modal.js b/app/javascript/mastodon/features/ui/components/onboarding_modal.js
index d2e02d63b4..b056357a22 100644
--- a/app/javascript/mastodon/features/ui/components/onboarding_modal.js
+++ b/app/javascript/mastodon/features/ui/components/onboarding_modal.js
@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import ReactSwipeable from 'react-swipeable';
 import classNames from 'classnames';
 import Permalink from '../../../components/permalink';
 import TransitionMotion from 'react-motion/lib/TransitionMotion';
@@ -274,7 +275,7 @@ export default class OnboardingModal extends React.PureComponent {
       <div className='modal-root__modal onboarding-modal'>
         <TransitionMotion styles={styles}>
           {interpolatedStyles => (
-            <div className='onboarding-modal__pager'>
+            <ReactSwipeable onSwipedRight={this.handlePrev} onSwipedLeft={this.handleNext} className='onboarding-modal__pager'>
               {interpolatedStyles.map(({ key, data, style }, i) => {
                 const className = classNames('onboarding-modal__page__wrapper', {
                   'onboarding-modal__page__wrapper--active': i === currentIndex,
@@ -283,7 +284,7 @@ export default class OnboardingModal extends React.PureComponent {
                   <div key={key} style={style} className={className}>{data}</div>
                 );
               })}
-            </div>
+            </ReactSwipeable>
           )}
         </TransitionMotion>