import ReactSwipeableViews from 'react-swipeable-views'; import classNames from 'classnames'; import { FormattedMessage } from 'react-intl'; import { closeOnboarding } from '../actions/onboarding'; // : todo : class FrameWelcome extends React.Component { static propTypes = { domain: PropTypes.string.isRequired, onNext: PropTypes.func.isRequired, }; shouldComponentUpdate(nextProps) { return nextProps.domain !== this.props.domain; } render() { const { domain, onNext } = this.props; return (

{domain} }} />

); } } class FrameFederation extends React.Component { static propTypes = { onNext: PropTypes.func.isRequired, } shouldComponentUpdate() { return false; } render() { return (

) } }; class FrameInteractions extends React.Component { static propTypes = { onNext: PropTypes.func.isRequired, }; shouldComponentUpdate() { return false; } render() { return (

); } } export default @connect(state => ({ domain: state.getIn(['meta', 'domain']) })) class Introduction extends PureComponent { static propTypes = { domain: PropTypes.string.isRequired, dispatch: PropTypes.func.isRequired, }; state = { currentIndex: 0, }; componentWillMount () { this.pages = [ , , , ]; } componentDidMount() { window.addEventListener('keyup', this.handleKeyUp); } componentWillUnmount() { window.addEventListener('keyup', this.handleKeyUp); } handleDot = (e) => { const i = Number(e.currentTarget.getAttribute('data-index')); e.preventDefault(); this.setState({ currentIndex: i }); } handlePrev = () => { this.setState(({ currentIndex }) => ({ currentIndex: Math.max(0, currentIndex - 1), })); } handleNext = () => { const { pages } = this; this.setState(({ currentIndex }) => ({ currentIndex: Math.min(currentIndex + 1, pages.length - 1), })); } handleSwipe = (index) => { this.setState({ currentIndex: index }); } handleFinish = () => { this.props.dispatch(closeOnboarding()); } handleKeyUp = ({ key }) => { switch (key) { case 'ArrowLeft': this.handlePrev(); break; case 'ArrowRight': this.handleNext(); break; } } render () { const { currentIndex } = this.state; const { pages } = this; return (
{pages.map((page, i) => (
{page}
))}
{pages.map((_, i) => (
))}
); } }