Skip to content

Instantly share code, notes, and snippets.

@ypcode
Created Apr 7, 2019
Embed
What would you like to do?
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
});
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment