Tutorial-part.tsx

import * as React from "react";
import { TeachingBubble, autobind, Button, Link, IButtonProps } from "office-ui-fabric-react";

//...
import { ITutorial } from "../model/ITutorial";
import playTutorial, { shouldPlayTutorial } from "../core/TutorialCore";
//...
export interface ITutorialState {
    shouldPlayTutorial: boolean;
}

export interface ITutorialProps {
    showReplayTutorial?: boolean;
    replayTutorialLabel?: string;
    replayTutorialLabelProps?: any;
    tutorial: ITutorial;
}

export class Tutorial extends React.Component<ITutorialProps, ITutorialState> {

    constructor(props: ITutorialProps) {
        super(props);
    }

    public componentDidMount() {

        if (shouldPlayTutorial(this.props.tutorial)) {
            this.setState({ shouldPlayTutorial: true });
        }
    }

    public componentDidUpdate() {
        if (this.state.shouldPlayTutorial) {
            playTutorial(this.props.tutorial);
            return;
        }
    }

    public render(): React.ReactElement<ITutorialProps> {
        const content: any[] = [];

        if (this.props.showReplayTutorial) {
            const replayLabel = this.props.replayTutorialLabel || "Play tutorial again";
            content.push(<Link onClick={() => this._requestPlay()} {...this.props.replayTutorialLabelProps}>{replayLabel}</Link>);
        }

        return <div>
            {content}
        </div>;
    }

    private _requestPlay() {
        this.setState({
            shouldPlayTutorial: true
        });
    }
}