Wizard

View Source

Finish

Copy

Edit

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.

Cancel

Finish

Copy

Edit

render(
  <Wizard
    buttonProps={{ size: 'sm' }}
    cancelButtonProps={{ theme: 'error', variant: 'fill' }}
    backButtonProps={{ theme: 'dark', variant: 'outline' }}
    footerProps={{ backgroundColor: 'grey-2' }}
    nextButtonProps={{ iconRight: { name: 'caret-right' } }}
    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' }}
    footerProps={{ backgroundColor: 'grey-2' }}
    nextButtonProps={{ iconRight: { name: 'caret-right' } }}
    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

backButtonPropsObject

Pass props to the back button.

buttonPropsObject

Pass props to all Button components in the footer.

cancelButtonPropsObject

Pass props to the cancel button.

footerPropsObject

Pass props to the Button components.

initialPayloadObject

The initial payload state.

nextButtonPropsObject

Pass props to the next button.

nextButtonTitle

(props: {
  activeStepIndex: number,
  steps: Array<string>,
  totalSteps: number,
}) => null

Determines what the next button title displays.

onCancelFunction

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

onSubmit(payload: Object, complete: () => null) => null

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: Array<string>,
  totalSteps: number,
}) => null

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

Props

PreviousToolbar NextAvatar