treehouse
/
mastodon
22
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

feat(components/onboarding_modal): Swipe between pages (#3934)

lolsob-rspec
Sorin Davidoi 2017-06-24 23:17:39 +02:00 committed by Eugen Rochko
parent 741fd15f4e
commit 8180d8bc35
1 changed files with 3 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/javascript/mastodon/features/ui/components/onboarding_modal.js
View File

@ -3,6 +3,7 @@ import { connect } from 'react-redux';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePropTypes from 'react-immutable-proptypes';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import ReactSwipeable from 'react-swipeable';
import classNames from 'classnames'; import classNames from 'classnames';
import Permalink from '../../../components/permalink'; import Permalink from '../../../components/permalink';
import TransitionMotion from 'react-motion/lib/TransitionMotion'; 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'> <div className='modal-root__modal onboarding-modal'>
<TransitionMotion styles={styles}> <TransitionMotion styles={styles}>
{interpolatedStyles => ( {interpolatedStyles => (
<div className='onboarding-modal__pager'> <ReactSwipeable onSwipedRight={this.handlePrev} onSwipedLeft={this.handleNext} className='onboarding-modal__pager'>
{interpolatedStyles.map(({ key, data, style }, i) => { {interpolatedStyles.map(({ key, data, style }, i) => {
const className = classNames('onboarding-modal__page__wrapper', { const className = classNames('onboarding-modal__page__wrapper', {
'onboarding-modal__page__wrapper--active': i === currentIndex, '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 key={key} style={style} className={className}>{data}</div>
); );
})} })}
</div> </ReactSwipeable>
)} )}
</TransitionMotion> </TransitionMotion>