import WizardModal from 'cloudify-stage/basic/wizard/WizardModal.js'

public class | source

WizardModal

Extends:

react~Component → WizardModal

WizardModal component allows you to present step-by-step process in modal window providing convenient way to navigate between steps and store step's data during the process.

Steps have to be constructed using createWizardStep function.

Access

Stage.Basic.Wizard.Modal

Usage

WizardModal

const wizardTitle = 'Hello World Wizard';
const helloWorldWizardSteps = [
    InfrastructureStep, PluginsStep, SecretsStep, InputsStep, ConfirmationStep, InstallStep
];

<Wizard.Modal header={wizardTitle} open={this.state.open} steps={helloWorldWizardSteps}
              onClose={this.closeWizard.bind(this)} toolbox={toolbox} />

Static Member Summary

Static Public Members
public static	ACTIVE_STATE: * Active step state
public static	COMPLETED_STATE: * Completed step state
public static	DISABLED_STATE: * Disabled step state
public static	propTypes: *

Static Method Summary

Static Public Methods
public static	getStepNameById(id: string): string

Method Summary

Public Methods
public	fetchStepData(id: string): Promise<{stepdata: object}, error> Function called to provide current step data from wizard
public	getStepNameByIndex(index: string): string
public	onError(id: string, errorMessage: string, errors: object): * Function called to show error in wizard.
public	onLoading(): * Function called to turn on loading state
public	onNext(id: string, stepOutputData: object) Function called on click on Next action button.
public	onPrev(id: string, stepOutputData: object) Function called on click on Back action button.
public	onReady(): * Function called to turn off loading state
public	onStartOver(resetData: boolean) Function called on click on Start Over action button.
public	onStepDataChanged(id: string, data: string, internal: object) Function called on step content update to update wizard state - either stepData or wizardData

Static Public Members

public static ACTIVE_STATE: * source

Active step state

public static COMPLETED_STATE: * source

Completed step state

public static DISABLED_STATE: * source

Disabled step state

public static propTypes: * source

Properties:

Name	Type	Attribute	Description
open	boolean		Controls whether or not the wizard modal is displayed
onClose	function(event: SyntheticEvent, data: object)		Function called when wizard is to be closed
steps	object[]		List of objects describing the steps (@see wizardUtils.createWizardStep function for details)
toolbox	object		Toolbox object

Static Public Methods

public static getStepNameById(id: string): string source

Params:

Name	Type	Attribute	Description
id	string		step ID

Return:

string

step name used in wizard state

Public Methods

public fetchStepData(id: string): Promise<{stepdata: object}, error> source

Function called to provide current step data from wizard

Params:

Name	Type	Attribute	Description
id	string		step ID

Return:

Promise<{stepdata: object}, error>

Promise containing step data object

public getStepNameByIndex(index: string): string source

Params:

Name	Type	Attribute	Description
index	string		step index in steps list

Return:

string

step name used in wizard state

public onError(id: string, errorMessage: string, errors: object): * source

Function called to show error in wizard. Changes WizardModal state to show error message and/or errors in the form

Params:

Name	Type	Attribute	Description
id	string		step ID
errorMessage	string		error message to be shown in wizard
errors	object	optional default: undefined	object with errors used to mark fields in form as 'containing errors'

Return:

public onLoading(): * source

Function called to turn on loading state

Return:

public onNext(id: string, stepOutputData: object) source

Function called on click on Next action button. Changes WizardModal state by merging stepOutputData with wizardData changing state of current step to WizardModal.COMPLETED_STATE and incrementing index of active step.

Params:

Name	Type	Attribute	Description
id	string		step ID
stepOutputData	object	optional	object with step data to be merged into wizardData

public onPrev(id: string, stepOutputData: object) source

Function called on click on Back action button. Changes WizardModal state by merging stepOutputData with wizardData changing state of current step to WizardModal.COMPLETED_STATE and decrementing index of active step.

Params:

Name	Type	Attribute	Description
id	string		step ID
stepOutputData	object	optional	object with step data to be merged into wizardData

public onReady(): * source

Function called to turn off loading state

Return:

public onStartOver(resetData: boolean) source

Function called on click on Start Over action button. Changes WizardModal state.

Params:

Name	Type	Attribute	Description
resetData	boolean		If set to true, then wizard data will be reset

public onStepDataChanged(id: string, data: string, internal: object) source

Function called on step content update to update wizard state - either stepData or wizardData

Params:

Name	Type	Attribute	Description
id	string		step ID
data	string		object with step data
internal	object	optional default: true	If true then data is treated as step internal data, if false, then as wizard global data