Wizard

View Source

function Step({ name }) {
  return (
    <Wizard.Step name={name}>
      {(wizard) => (
        <Box padding={4}>
          <Input
            value={wizard.payload[name]}
            placeholder={name}
            onChange={(event) => {
              wizard.setPayload({
                [name]: event.target.value,
              })
            }}
          />
        </Box>
      )}
    </Wizard.Step>
  )
}

function sendPayload(payload, complete) {
  new Promise((resolve, reject) => {
    console.log('Sending payload...', payload)
    setTimeout(() => {
      if (Math.random() > 0.5) {
        resolve()
      } else {
        reject()
      }
      complete()
    }, 2500)
  })
    .then(() => {
      console.log('Payload was successful')
    })
    .catch(() => {
      console.log('Payload failed to send')
    })
}

render(
  <Wizard
    width="100%"
    padding={8}
    nextButtonTitle={({ activeStepIndex, steps, totalSteps }) =>
      activeStepIndex >= totalSteps - 1
        ? 'Finish'
        : `Next: ${steps[activeStepIndex + 1].name}`
    }
    initialPayload={{ 'Step 1': 'Initial wizard content' }}
    onSubmit={sendPayload}
  >
    <Step name="Step 1" />
    <Step name="Step 2" />
    <Step name="Step 3" />
  </Wizard>
)

function Step({ name }) {
  return (
    <Wizard.Step name={name}>
      {(wizard) => (
        <Box padding={4}>
          <Input
            value={wizard.payload[name]}
            placeholder={name}
            onChange={(event) => {
              wizard.setPayload({
                [name]: event.target.value,
              })
            }}
          />
        </Box>
      )}
    </Wizard.Step>
  )
}
function sendPayload(payload, complete) {
  new Promise((resolve, reject) => {
    console.log('Sending payload...', payload)
    setTimeout(() => {
      if (Math.random() > 0.5) {
        resolve()
      } else {
        reject()
      }
      complete()
    }, 2500)
  })
    .then(() => {
      console.log('Payload was successful')
    })
    .catch(() => {
      console.log('Payload failed to send')
    })
}
render(
  <Wizard
    width="100%"
    padding={8}
    nextButtonTitle={({ activeStepIndex, steps, totalSteps }) =>
      activeStepIndex >= totalSteps - 1
        ? 'Finish'
        : `Next: ${steps[activeStepIndex + 1].name}`
    }
    initialPayload={{ 'Step 1': 'Initial wizard content' }}
    onSubmit={sendPayload}
  >
    <Step name="Step 1" />
    <Step name="Step 2" />
    <Step name="Step 3" />
  </Wizard>
)

This is step number 1.

This is step number 2.

This is step number 3.

This is step number 4.

This is step number 5.

This is step number 6.

This is step number 7.

This is step number 8.

This is step number 9.

This is step number 10.

This is step number 11.

This is step number 12.

This is step number 13.

This is step number 14.

This is step number 15.

This is step number 16.

render(
  <Wizard
    buttonProps={{ size: 'sm' }}
    cancelButtonProps={{ theme: 'error', variant: 'fill' }}
    backButtonProps={{
      theme: 'dark',
      variant: 'outline',
      iconLeft: { name: 'general.leftChevron', size: 'xxs' },
    }}
    footerProps={{ backgroundColor: 'grey-2' }}
    nextButtonProps={{
      iconRight: { name: 'general.rightChevron', size: 'xxs' },
    }}
    onCancel={() => console.log('cancel')}
    onSubmit={() => console.log('submit')}
    padding={8}
    renderProgress={({ activeStepIndex, totalSteps }) => {
      const value = ((activeStepIndex + 1) / totalSteps) * 100

      return (
        <Box padding={4} width="100%">
          <Progress value={value} />
        </Box>
      )
    }}
    width="100%"
  >
    {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16].map((n) => (
      <Wizard.Step name={`Step ${n}`}>
        {() => (
          <Box padding={4}>
            <Text align="center">This is step number {n}.</Text>
          </Box>
        )}
      </Wizard.Step>
    ))}
  </Wizard>
)

render(
  <Wizard
    buttonProps={{ size: 'sm' }}
    cancelButtonProps={{ theme: 'error', variant: 'fill' }}
    backButtonProps={{
      theme: 'dark',
      variant: 'outline',
      iconLeft: { name: 'general.leftChevron', size: 'xxs' },
    }}
    footerProps={{ backgroundColor: 'grey-2' }}
    nextButtonProps={{
      iconRight: { name: 'general.rightChevron', size: 'xxs' },
    }}
    onCancel={() => console.log('cancel')}
    onSubmit={() => console.log('submit')}
    padding={8}
    renderProgress={({ activeStepIndex, totalSteps }) => {
      const value = ((activeStepIndex + 1) / totalSteps) * 100
      return (
        <Box padding={4} width="100%">
          <Progress value={value} />
        </Box>
      )
    }}
    width="100%"
  >
    {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16].map((n) => (
      <Wizard.Step name={`Step ${n}`}>
        {() => (
          <Box padding={4}>
            <Text align="center">This is step number {n}.</Text>
          </Box>
        )}
      </Wizard.Step>
    ))}
  </Wizard>
)

Props

Themeable

Accepts StackView props.

Use the wizard key in ThemeProvider to customize the default properties of this component.

alwaysCancellableboolean

Always display cancel button.

backButtonPropsButtonProps

Pass props to the back button.

buttonPropsButtonProps

Pass props to all Button components in the footer.

cancelButtonPropsButtonProps

Pass props to the cancel button.

childrenReactReactNode

The content of the component.

footerPropsButtonProps

Pass props to the Button components.

initialPayloadRecord

The initial payload state.

nextButtonPropsButtonProps

Pass props to the next button.

nextButtonTitle

(props: {
  activeStepIndex: number
  steps: StepProps[]
  totalSteps: number
}) => string

Determines what the next button title displays.

onCancel() => void

Creates a cancel button for canceling a process from the first step.

onSubmit(payload: Record<string, any>, complete: () => void) => void

Called when the Done button is pressed on the last view. Passes back the payload state as well as an option complete callback to revert the button spinner back to normal.

renderProgress

(props: {
  activeStepIndex: number
  steps: StepProps[]
  totalSteps: number
}) => React.ReactNode

Provide a custom progress component to render in place of StepperProgress.

Props

PreviousToolbar NextAvatar