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:
parent
4addf051d4
commit
66ca7157db
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue