// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. import UserStore from 'stores/user_store.jsx'; import PreferenceStore from 'stores/preference_store.jsx'; import * as AsyncClient from 'utils/async_client.jsx'; import Constants from 'utils/constants.jsx'; import {FormattedMessage, FormattedHTMLMessage} from 'react-intl'; const Preferences = Constants.Preferences; import {Overlay} from 'react-bootstrap'; import React from 'react'; import tutorialGif from 'images/tutorialTip.gif'; import tutorialGifWhite from 'images/tutorialTipWhite.gif'; export default class TutorialTip extends React.Component { constructor(props) { super(props); this.handleNext = this.handleNext.bind(this); this.toggle = this.toggle.bind(this); this.state = {currentScreen: 0, show: false}; } toggle() { const show = !this.state.show; this.setState({show}); if (!show && this.state.currentScreen >= this.props.screens.length - 1) { const step = PreferenceStore.getInt(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), 0); AsyncClient.savePreference( Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), (step + 1).toString() ); } } handleNext() { if (this.state.currentScreen < this.props.screens.length - 1) { this.setState({currentScreen: this.state.currentScreen + 1}); return; } this.toggle(); } skipTutorial(e) { e.preventDefault(); AsyncClient.savePreference( Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), '999' ); } render() { const buttonText = this.state.currentScreen === this.props.screens.length - 1 ? ( ) : ( ); const dots = []; if (this.props.screens.length > 1) { for (let i = 0; i < this.props.screens.length; i++) { let className = 'circle'; if (i === this.state.currentScreen) { className += ' active'; } dots.push( { //eslint-disable-line no-loop-func e.preventDefault(); this.setState({currentScreen: i}); }} /> ); } } var tutorialGifImage = tutorialGif; if (this.props.overlayClass === 'tip-overlay--header' || this.props.overlayClass === 'tip-overlay--sidebar') { tutorialGifImage = tutorialGifWhite; } return ( this.refs.target} > {this.props.screens[this.state.currentScreen]} {dots} {buttonText} ); } } TutorialTip.defaultProps = { overlayClass: '' }; TutorialTip.propTypes = { screens: React.PropTypes.array.isRequired, placement: React.PropTypes.string.isRequired, overlayClass: React.PropTypes.string }; export function createMenuTip(toggleFunc, onBottom) { const screens = []; screens.push( ); let placement = 'right'; let arrow = 'left'; if (onBottom) { placement = 'bottom'; arrow = 'up'; } return ( ); }