blob: 3482a7cfaad124f8f6829f0ceb38ba46268da46b (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
const UserStore = require('../../stores/user_store.jsx');
const PreferenceStore = require('../../stores/preference_store.jsx');
const AsyncClient = require('../../utils/async_client.jsx');
const Constants = require('../../utils/constants.jsx');
const Preferences = Constants.Preferences;
const Overlay = ReactBootstrap.Overlay;
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) {
let preference = PreferenceStore.getPreference(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), {value: '0'});
const newValue = (parseInt(preference.value, 10) + 1).toString();
preference = PreferenceStore.setPreference(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), newValue);
AsyncClient.savePreferences([preference]);
}
}
handleNext() {
if (this.state.currentScreen < this.props.screens.length - 1) {
this.setState({currentScreen: this.state.currentScreen + 1});
return;
}
this.toggle();
}
skipTutorial(e) {
e.preventDefault();
const preference = PreferenceStore.setPreference(Preferences.TUTORIAL_STEP, UserStore.getCurrentId(), '999');
AsyncClient.savePreferences([preference]);
}
render() {
const buttonText = this.state.currentScreen === this.props.screens.length - 1 ? 'Okay' : 'Next';
const dots = [];
if (this.props.screens.length > 1) {
for (let i = 0; i < this.props.screens.length; i++) {
if (i === this.state.currentScreen) {
dots.push(
<div
className='circle active'
key={'dotactive' + i}
/>
);
} else {
dots.push(
<div
className='circle'
key={'dotinactive' + i}
/>
);
}
}
}
return (
<div className='tip-div'>
<img
className='tip-button'
src='/static/images/tutorialTip.gif'
width='35'
onClick={this.toggle}
ref='target'
/>
<Overlay
placement={this.props.placement}
show={this.state.show}
rootClose={true}
onHide={this.toggle}
target={() => this.refs.target}
>
<div className='tip-overlay'>
{this.props.screens[this.state.currentScreen]}
<div className='tutorial__circles'>{dots}</div>
<div className='text-right'>
<button
className='btn btn-default'
onClick={this.handleNext}
>
{buttonText}
</button>
<div className='tip-opt'>
{'Seen this before? '}
<a
href='#'
onClick={this.skipTutorial}
>
{'Opt out of these tips.'}
</a>
</div>
</div>
</div>
</Overlay>
</div>
);
}
}
TutorialTip.propTypes = {
screens: React.PropTypes.array.isRequired,
placement: React.PropTypes.string.isRequired
};
|
