import React from 'react';
import ReactDOM from 'react-dom';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import Flux from '../lib/flux/index';
import TutorialStore from '../stores/TutorialStore';
import WindowStore from '../stores/WindowStore';
import PopoutStore from '../stores/PopoutStore';
import '../styles/tutorial.styl';
import lodash from 'lodash';
import TutorialActionCreators from '../actions/TutorialActionCreators';
import TutorialData from '../data/tutorial_tips.json';
import Popout from './common/Popout';
import TutorialPopout from './TutorialPopout';
import classNames from 'classnames';
const TutorialIndicator = React.createClass({
mixins: [PureRenderMixin, Flux.StoreListenerMixin(PopoutStore)],
propTypes: {
position: React.PropTypes.oneOf(['left', 'top', 'right', 'bottom']).isRequired,
x: React.PropTypes.number.isRequired,
y: React.PropTypes.number.isRequired,
targetWidth: React.PropTypes.number.isRequired,
targetHeight: React.PropTypes.number.isRequired,
tutorialId: React.PropTypes.string.isRequired,
offset: React.PropTypes.shape({x: React.PropTypes.number, y: React.PropTypes.number}).isRequired,
offsetPercent: React.PropTypes.shape({x: React.PropTypes.number, y: React.PropTypes.number}).isRequired,
},
getInitialState() {
return {
offsetX: null,
offsetY: null,
definition: TutorialData[this.props.tutorialId],
};
},
getStateFromStores() {
return {
isPopoutOpen: PopoutStore.isOpen(this.props.tutorialId),
};
},
componentDidMount() {
this.updateCache();
},
componentDidUpdate({tutorialId, x, y, targetWidth, targetHeight, position, offset, offsetPercent}) {
if (
this.props.tutorialId != tutorialId ||
this.props.x !== x ||
this.props.y !== y ||
this.props.targetWidth !== targetWidth ||
this.props.targetHeight !== targetHeight ||
this.props.position !== position ||
this.props.offset.x !== offset.x ||
this.props.offset.y !== offset.y ||
this.props.offsetPercent.x !== offsetPercent.x ||
this.props.offsetPercent.y !== offsetPercent.y
) {
this.updateCache();
}
},
updateCache() {
const newState = {
offsetX: (this.props.targetWidth - ReactDOM.findDOMNode(this).offsetWidth) / 2,
offsetY: (this.props.targetHeight - ReactDOM.findDOMNode(this).offsetHeight) / 2,
};
const position = this.props.position;
switch (position) {
case 'left':
newState.offsetX = 0;
newState.offsetY = this.props.targetHeight / 2;
break;
case 'right':
newState.offsetX = this.props.targetWidth;
newState.offsetY = this.props.targetHeight / 2;
break;
case 'bottom':
newState.offsetX = this.props.targetWidth / 2;
newState.offsetY = this.props.targetHeight;
break;
case 'top':
default:
newState.offsetX = this.props.targetWidth / 2;
newState.offsetY = 0;
}
const sanititzedOffset = {
x: this.props.offset.x ? this.props.offset.x : 0,
y: this.props.offset.y ? this.props.offset.y : 0,
};
const sanititzedOffsetPercent = {
x: this.props.offsetPercent.x ? this.props.offsetPercent.x : 0,
y: this.props.offsetPercent.y ? this.props.offsetPercent.y : 0,
};
newState.offsetX += sanititzedOffset.x + sanititzedOffsetPercent.x / 100 * this.props.targetWidth;
newState.offsetY += sanititzedOffset.y + sanititzedOffsetPercent.y / 100 * this.props.targetHeight;
this.setState(newState);
},
handleSkipTips() {
TutorialActionCreators.suppressAll();
},
handlePopoutClose(wasConfirmed) {
if (wasConfirmed) {
TutorialActionCreators.dismiss(this.props.tutorialId);
}
},
renderTutorialPopout(props) {
return (