Add support key shortcut to Onboarding Modal (#3517)

* Add support key shortcut to Onboarding Modal

* this.state.pages -> this.pages
pull/17/head
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 ImmutablePropTypes from 'react-immutable-proptypes';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import classNames from 'classnames';
import Permalink from '../../../components/permalink';
import TransitionMotion from 'react-motion/lib/TransitionMotion';
import spring from 'react-motion/lib/spring';
@ -59,6 +60,7 @@ const PageTwo = ({ me }) => (
onClearSuggestions={noop}
onFetchSuggestions={noop}
onSuggestionSelected={noop}
showSearch
/>
</div>
@ -180,6 +182,25 @@ class OnboardingModal extends React.PureComponent {
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) => {
e.preventDefault();
this.props.onClose();
@ -191,27 +212,36 @@ class OnboardingModal extends React.PureComponent {
this.setState({ currentIndex: i });
}
handleNext = () => {
handlePrev = () => {
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 = () => {
this.props.onClose();
}
render () {
const { me, admin, domain, intl } = this.props;
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 { pages } = this;
const { currentIndex } = this.state;
const hasMore = currentIndex < pages.length - 1;
@ -231,21 +261,29 @@ class OnboardingModal extends React.PureComponent {
</button>
);
const styles = pages.map((page, i) => ({
const styles = pages.map((data, i) => ({
key: `page-${i}`,
style: { opacity: spring(i === currentIndex ? 1 : 0) },
data,
style: {
opacity: spring(i === currentIndex ? 1 : 0),
},
}));
return (
<div className='modal-root__modal onboarding-modal'>
<TransitionMotion styles={styles}>
{interpolatedStyles =>
{interpolatedStyles => (
<div className='onboarding-modal__pager'>
{pages.map((page, i) =>
<div key={`page-${i}`} style={{ opacity: interpolatedStyles[i].style.opacity, pointerEvents: i === currentIndex ? 'auto' : 'none' }}>{page}</div>
)}
{interpolatedStyles.map(({ key, data, style }, i) => {
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>
}
)}
</TransitionMotion>
<div className='onboarding-modal__paginator'>
@ -259,7 +297,21 @@ class OnboardingModal extends React.PureComponent {
</div>
<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>

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 {
cursor: default;
line-height: 21px;