Add support key shortcut to Onboarding Modal (#3517)

* Add support key shortcut to Onboarding Modal

* this.state.pages -> this.pages
This commit is contained in:
Yamagishi Kazutoshi 2017-06-05 17:09:14 +09:00 committed by Eugen Rochko
parent 4addf051d4
commit 66ca7157db
2 changed files with 80 additions and 20 deletions

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 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';
import spring from 'react-motion/lib/spring'; import spring from 'react-motion/lib/spring';
@ -59,6 +60,7 @@ const PageTwo = ({ me }) => (
onClearSuggestions={noop} onClearSuggestions={noop}
onFetchSuggestions={noop} onFetchSuggestions={noop}
onSuggestionSelected={noop} onSuggestionSelected={noop}
showSearch
/> />
</div> </div>
@ -180,6 +182,25 @@ class OnboardingModal extends React.PureComponent {
currentIndex: 0, currentIndex: 0,
}; };
componentWillMount() {
const { me, admin, domain, intl } = this.props;
this.pages = [
<PageOne acct={me.get('acct')} domain={domain} />,
<PageTwo me={me} />,
<PageThree me={me} domain={domain} />,
<PageFour domain={domain} intl={intl} />,
<PageSix admin={admin} domain={domain} />,
];
};
componentDidMount() {
window.addEventListener('keyup', this.handleKeyUp);
}
componentWillUnmount() {
window.addEventListener('keyup', this.handleKeyUp);
}
handleSkip = (e) => { handleSkip = (e) => {
e.preventDefault(); e.preventDefault();
this.props.onClose(); this.props.onClose();
@ -191,27 +212,36 @@ class OnboardingModal extends React.PureComponent {
this.setState({ currentIndex: i }); this.setState({ currentIndex: i });
} }
handleNext = () => { handlePrev = () => {
this.setState(({ currentIndex }) => ({ this.setState(({ currentIndex }) => ({
currentIndex: currentIndex + 1, currentIndex: Math.max(0, currentIndex - 1),
})); }));
} }
handleNext = () => {
const { pages } = this;
this.setState(({ currentIndex }) => ({
currentIndex: Math.min(currentIndex + 1, pages.length - 1),
}));
}
handleKeyUp = ({ key }) => {
switch (key) {
case 'ArrowLeft':
this.handlePrev();
break;
case 'ArrowRight':
this.handleNext();
break;
}
}
handleClose = () => { handleClose = () => {
this.props.onClose(); this.props.onClose();
} }
render () { render () {
const { me, admin, domain, intl } = this.props; const { pages } = this;
const pages = [
<PageOne acct={me.get('acct')} domain={domain} />,
<PageTwo me={me} />,
<PageThree me={me} domain={domain} />,
<PageFour domain={domain} intl={intl} />,
<PageSix admin={admin} domain={domain} />,
];
const { currentIndex } = this.state; const { currentIndex } = this.state;
const hasMore = currentIndex < pages.length - 1; const hasMore = currentIndex < pages.length - 1;
@ -231,21 +261,29 @@ class OnboardingModal extends React.PureComponent {
</button> </button>
); );
const styles = pages.map((page, i) => ({ const styles = pages.map((data, i) => ({
key: `page-${i}`, key: `page-${i}`,
style: { opacity: spring(i === currentIndex ? 1 : 0) }, data,
style: {
opacity: spring(i === currentIndex ? 1 : 0),
},
})); }));
return ( return (
<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'> <div className='onboarding-modal__pager'>
{pages.map((page, i) => {interpolatedStyles.map(({ key, data, style }, i) => {
<div key={`page-${i}`} style={{ opacity: interpolatedStyles[i].style.opacity, pointerEvents: i === currentIndex ? 'auto' : 'none' }}>{page}</div> const className = classNames('onboarding-modal__page__wrapper', {
)} 'onboarding-modal__page__wrapper--active': i === currentIndex,
});
return (
<div key={key} style={style} className={className}>{data}</div>
);
})}
</div> </div>
} )}
</TransitionMotion> </TransitionMotion>
<div className='onboarding-modal__paginator'> <div className='onboarding-modal__paginator'>
@ -259,7 +297,21 @@ class OnboardingModal extends React.PureComponent {
</div> </div>
<div className='onboarding-modal__dots'> <div className='onboarding-modal__dots'>
{pages.map((_, i) => <div key={i} role='button' tabIndex='0' data-index={i} onClick={this.handleDot} className={`onboarding-modal__dot ${i === currentIndex ? 'active' : ''}`} />)} {pages.map((_, i) => {
const className = classNames('onboarding-modal__dot', {
active: i === currentIndex,
});
return (
<div
key={`dot-${i}`}
role='button'
tabIndex='0'
data-index={i}
onClick={this.handleDot}
className={className}
/>
);
})}
</div> </div>
<div> <div>

View File

@ -3073,6 +3073,14 @@ button.icon-button.active i.fa-retweet {
} }
} }
.onboarding-modal__page__wrapper {
pointer-events: none;
&.onboading-modal__page__wrapper--active {
pointer-events: auto;
}
}
.onboarding-modal__page { .onboarding-modal__page {
cursor: default; cursor: default;
line-height: 21px; line-height: 21px;