Module: robo-wizard
Classes
Type aliases
BaseValues
Ƭ BaseValues: object
Base type describing an object of string keys and any value
Defined in
FlowStep
Ƭ FlowStep<Values>: string | StepConfig<Values>
Type parameters
| Name | Type | Description |
|---|---|---|
Values | extends object = BaseValues | Generic type for object of values being gathered through the wizard steps A step in the wizard can be described as a string for default progression, or an object for custom progression, see StepConfig for more details |
Defined in
StepConfig
Ƭ StepConfig<Values>: Object
Type parameters
| Name | Type | Description |
|---|---|---|
Values | extends object = BaseValues | Generic type for object of values being gathered through the wizard steps |
Type declaration
| Name | Type | Description |
|---|---|---|
name | string | Name of the step |
next? | string | StepTransition<Values>[] | boolean | Name of the next step in progression after calling goToNextStep. Passing false will prevent the wizard from progressing forward at this step. Passing a StepTransition array allows for conditional progression using the [[when]] helper. |
previous? | string | StepTransition<Values>[] | boolean | Name of the previous step in progression after calling goToPreviousStep. Passing false will prevent the wizard from progressing backwards at this step. Passing a StepTransition array allows for conditional progression using the [[when]] helper. |
Defined in
StepTransition
Ƭ StepTransition<Values>: string | (string | { cond: WhenFunction<Values> })[]
example
[
['conditionalStep', when((currentValues, { values }) => values.showConditional === true)],
'fallbackStep'
] // StepTransition[]
Type parameters
| Name | Type | Description |
|---|---|---|
Values | extends object = BaseValues | Generic type for object of values being gathered through the wizard steps A string is a shorthand for an always true conditional guard, i.e. ['nextStep', when(() => true)] The array version should be a tuple with the string name of a step, paired with a guard, like when: |
Defined in
WhenFunction
Ƭ WhenFunction<Values>: (values: Values, event: UpdateEvent<Values>) => boolean
Type parameters
| Name | Type | Description |
|---|---|---|
Values | extends object = BaseValues | Generic type for object of values being gathered through the wizard steps |
Type declaration
▸ (values, event): boolean
Parameters
| Name | Type | Description |
|---|---|---|
values | Values | Current state of values gathered through the wizard |
event | UpdateEvent<Values> | Event object containing any new values to be updated, see [[UpdateEvent]] |
Returns
boolean
Defined in
WizardEvent
Ƭ WizardEvent<Values>: { type: "next" ; values?: Partial<Values> } | { type: "previous" } | { type: string ; values?: Partial<Values> }
Type parameters
| Name | Type |
|---|---|
Values | extends object |
Defined in
WizardMachine
Ƭ WizardMachine<Values>: StateMachine.Machine<Values, WizardEvent<Values>, any>
Type parameters
| Name | Type |
|---|---|
Values | extends object = BaseValues |
Defined in
Functions
createWizard
▸ createWizard<Values>(steps, initialValues?, actions?): RoboWizard<Values>
example Initial set up with a listener for updates to the wizard
import { createWizard } from 'robo-wizard';
const wizard = createWizard(['first', 'second', 'third']);
wizard.start(updatedWizard => { console.log('Updated!', updatedWizard.currentStep) });
console.log(wizard.currentStep); // first
wizard.goToNextStep();
console.log(wizard.currentStep); // second
wizard.goToNextStep();
console.log(wizard.currentStep); // third
wizard.goToPreviousStep();
console.log(wizard.currentStep); // second
example Gathering values through each step when progressing forward
import { createWizard } from 'robo-wizard';
const wizard = createWizard(['first', 'second', 'third'], { firstName: '', lastName: '' });
wizard.start(updatedWizard => { console.log('Updated!', updatedWizard.currentStep), updatedWizard.currentValues });
console.log(wizard.currentValues); // { firstName: '', lastName: '' }
;
wizard.goToNextStep({ values: { firstName: 'Jane' } });
console.log(wizard.currentValues); // { firstName: 'Jane', lastName: '' }
wizard.goToNextStep({ values: { lastName: 'Doe' } });
console.log(wizard.currentValues); // { firstName: 'Jane', lastName: 'Doe' }
wizard.goToPreviousStep({ values: { firstName: '', lastName: '' } });
console.log(wizard.currentValues); // { firstName: '', lastName: '' }
By default, the wizard will progress linearly in the order of array passed to createWizard. That behavior can be overriden by passing an StepConfig to in place of the string step name:
example
import { createWizard } from 'robo-wizard';
const wizard = createWizard([
{ name: 'first', next: 'third' }, 'skipped', {name: 'third', previous: 'first'}
]);
wizard.start(updatedWizard => { console.log('Updated!', updatedWizard.currentStep) });
console.log(wizard.currentStep); // first
;
wizard.goToNextStep();
console.log(wizard.currentStep); // third
wizard.goToPreviousStep();
console.log(wizard.currentStep); // first
example Progression can be conditional using the when helper
import { createWizard, when } from 'robo-wizard';
const wizard = createWizard([
{ name: 'first', next: [['third', when((currentValues, { values }) => values.goToThird )], 'second'] },
'second',
{name: 'third', previous: 'first'}
], { goToThird: false });
wizard.start(updatedWizard => { console.log('Updated!', updatedWizard.currentStep) });
console.log(wizard.currentStep); // first
;
wizard.goToNextStep({ values: { goToThird: true } });
console.log(wizard.currentStep); // third
wizard.goToPreviousStep({ values: { goToThird: false } });
console.log(wizard.currentStep); // first
wizard.goToNextStep();
console.log(wizard.currentStep); // second
wizard.goToNextStep();
console.log(wizard.currentStep); // third
Type parameters
| Name | Type | Description |
|---|---|---|
Values | extends object = object | Generic type for object of values being gathered through the wizard steps |
Parameters
| Name | Type | Description |
|---|---|---|
steps | FlowStep<Values>[] | Configuration of steps for the wizard, see FlowStep |
initialValues | Values | Optional object with intial values to use when starting the wizard |
actions | Object | Optional object with navigate field with a function to be called when entering a step |
actions.navigate? | ActionFunction<Values, WizardEvent<Values>> | - |
Returns
RoboWizard<Values>
Defined in
when
▸ when<Values>(cond): Object
Type parameters
| Name | Type | Description |
|---|---|---|
Values | extends object = object | Generic type for object of values being gathered through the wizard steps |
Parameters
| Name | Type | Description |
|---|---|---|
cond | WhenFunction<Values> | Guard function to be called to test if the step should transition, see WhenFunction See createWizard for example usage |
Returns
Object
| Name | Type |
|---|---|
cond | WhenFunction<Values> |