Skip to content

Latest commit

 

History

History
210 lines (140 loc) · 5.28 KB

setup-wizard.md

File metadata and controls

210 lines (140 loc) · 5.28 KB

SetupWizard

Source

A set of steps the user has to go through sequentially.

Usage

You should have the chayns-components package installed. If that is not the case already, run

yarn add chayns-components

or

npm i chayns-components

After the chayns-components package is installed, you can import the component and use it with React:

import React from 'react'
import { SetupWizard } from 'chayns-components';

// ...

<SetupWizard {...} />

Methods

The setup wizard exposes several methods on its reference to control its flow:

  • nextStep() navigates to the next step
  • stepComplete(isComplete, stepIndex = currentStep) marks a step as complete/incomplete
  • resetToStep(stepIndex) resets the wizard up until a specific index
  • stepEnabled(isEnabled, stepIndex) enables or disables a specific step
  • stepRequired(isRequired, stepIndex) marks a specific step as required or optional

You can access them in any child components by using the withSetupWizardContext higher-order component:

const FirstStep = withSetupWizardContext(
    ({ nextStep, stepComplete /* ... */ }) => {
        // ...
    }
);

Props

The SetupWizard-component takes the following props:

Name Type Default Required
children ReactNode
ready function
notComplete function
className string
style { [key: string]: string | number }
contentStyle { [key: string]: string | number }
title string
description ReactNode
numberOfSteps number
allRequiredStepsCompleted function
initialStep number 0
disableShowStep boolean false
operationMode enum SetupWizard.operationMode.DEFAULT

children

children?: ReactNode

An array of SetupWizardItem components.

ready

ready?: function

A callback that is invoked after nextStep is called when the last step is active and all required steps are completed.

notComplete

notComplete?: function

A callback that is invoked after nextStep is called but some required steps are not completed.

className

className?: string

A classname string that will be applied to the container element.

style

style?: { [key: string]: string | number }

A React style object that will be applied to the container element.

contentStyle

contentStyle?: { [key: string]: string | number }

A React style object that will be applied to the content elements.

title

title?: string

The title of the wizard.

description

description?: ReactNode

The description of the wizard. Can be a string or a ReactNode.

numberOfSteps

numberOfSteps?: number

The number of steps in the wizard.

allRequiredStepsCompleted

allRequiredStepsCompleted?: function

A callback that is invoked when all required steps have been completed.

initialStep

initialStep?: number

The initial step of the wizard.

disableShowStep

disableShowStep?: boolean

Removes the number that is displayed in front of the title.

operationMode

operationMode?: enum

Specifies the mode of the wizard. 0 is the regular behavior, 1 means that all steps except the current one will be disabled and the user cannot manually navigate between steps.