WizardHost-ex2.tsx

import { BaseWizard, WizardStep, IWizardStepValidationResult } from "../../../common/components/Wizard";
//...


  private _closeWizard(completed: boolean = false) {
    this.setState({
      isWizardOpened: false,
      statusMessage: completed ? "The wizard has been completed" : "The wizard has been canceled",
      statusType: completed ? "OK" : "KO"
    });

    setTimeout(() => {
      this.setState({
        statusMessage: null,
        statusType: null
      });
    }, 3000);
  }

  private _onValidateStep(step: MyWizardSteps): IWizardStepValidationResult | Promise<IWizardStepValidationResult> {

    let isValid = true;
    switch (step) {
      case MyWizardSteps.FirstStep:
        isValid = this.state.firstStepInput == 'first';
        return {
          isValidStep: isValid,
          errorMessage: !isValid ? "Your input to first step is invalid" : null
        };
      case MyWizardSteps.ThirdStep:

        return new Promise((resolve) => {
          isValid = this.state.thirdStepInput == 'third';
          setTimeout(() => {
            resolve({
              isValidStep: isValid,
              errorMessage: !isValid ? "Your input to third step is invalid" : null
            });
          }, 3000);
        });
      case MyWizardSteps.LastStep:
        this.setState({
          wizardValidatingMessage: 'Validating all the information you entered...'
        });
        return new Promise((resolve) => {
          isValid = this.state.thirdStepInput == 'third';
          setTimeout(() => {
            resolve({
              isValidStep: isValid,
              errorMessage: !isValid ? "One of your input is invalid" : null
            });
            this.setState({
              wizardValidatingMessage: null
            });
          }, 3000);
        });
      default:
        return { isValidStep: true };
    }
  }


  private _renderMyWizard() {

    return <MyWizard
      mainCaption="My Wizard"
      onCancel={() => this._closeWizard(false)}
      onCompleted={() => this._closeWizard(true)}
      onValidateStep={(step) => this._onValidateStep(step)}
      validatingMessage={this.state.wizardValidatingMessage}
    >
      <WizardStep caption="My first step" step={MyWizardSteps.FirstStep}>
        <div className={styles.wizardStep}>
          <h1>Hello from first step</h1>
          <TextField
            value={this.state.firstStepInput}
            placeholder="Type 'first' to validate the step"
            onChanged={(v) => this.setState({ firstStepInput: v })}></TextField>
        </div>
      </WizardStep>

      <WizardStep caption="My second step" step={MyWizardSteps.SecondStep}>
        <div className={styles.wizardStep}>
          <h1>Hello from second step</h1>
        </div>
      </WizardStep>

      <WizardStep caption="My third step" step={MyWizardSteps.ThirdStep}>
        <div className={styles.wizardStep}>
          <h1>Hello from third step</h1>
          <TextField
            value={this.state.thirdStepInput}
            placeholder="Type 'third' to validate the step (async validation)"
            onChanged={(v) => this.setState({ thirdStepInput: v })}></TextField>
        </div>
      </WizardStep>

      <WizardStep caption="My final step" step={MyWizardSteps.LastStep}>
        <div className={styles.wizardStep}>
          <h1>Hello from final step</h1>
        </div>
      </WizardStep>
    </MyWizard>;
  }