Interface WizardPageProps<WizardFormState>

interface WizardPageProps<WizardFormState> {
    blockProps: BlockComponentProps;
    currentPageKey: string;
    currentSubPageKey?: string;
    onBack?: (() => void);
    onSkipOver: ((formState) => void);
    onSubPagesUpdated: ((pageKey, subPages) => void);
    onSubmit: ((formState) => void);
    progress: {
        current: number;
        isLastPage: boolean;
        total: number;
    };
    wizardFormState: Partial<WizardFormState>;
}

Type Parameters

  • WizardFormState

Properties

blockProps currentPageKey currentSubPageKey? onBack? onSkipOver onSubPagesUpdated onSubmit progress wizardFormState

Properties

blockProps

blockProps: BlockComponentProps

Block props (passed through from parent)

currentPageKey

currentPageKey: string

Current page key (same key as passed through from WizardOptions)

Optional currentSubPageKey

currentSubPageKey?: string

Current sub page (only present if the current page called onSubPagesUpdated beforehand)

Optional onBack

onBack?: (() => void)

Cancellation handler, moving to the previous page of the wizard.

  • If subpages are configured:
    • If not first subpage, go to the previous subPageKey
    • If first subpage, continue below
  • If not first page, go to previous page
  • If first page & no wizardCancelRoute is supplied, log error (we shouldn't let them go back from here)
  • If first page & wizardCancelRoute is supplied then redirect to wizardCancelRoute
  • If the page is skipped, go back another page and remove this page from skipped page list

Type declaration

    • (): void

    • Cancellation handler, moving to the previous page of the wizard.

      • If subpages are configured:
        • If not first subpage, go to the previous subPageKey
        • If first subpage, continue below
      • If not first page, go to previous page
      • If first page & no wizardCancelRoute is supplied, log error (we shouldn't let them go back from here)
      • If first page & wizardCancelRoute is supplied then redirect to wizardCancelRoute
      • If the page is skipped, go back another page and remove this page from skipped page list

      Returns void

onSkipOver

onSkipOver: ((formState) => void)

Skip handler, moving to the next page of the wizard without filling in current page (use to ignore a page)

  • Go to next page as with onSubmit but without updating the wizard form state
  • Mark this page as 'skipped'
  • On back button from next page, if a page is skipped, go back two pages

Type declaration

    • (formState): void

    • Skip handler, moving to the next page of the wizard without filling in current page (use to ignore a page)

      • Go to next page as with onSubmit but without updating the wizard form state
      • Mark this page as 'skipped'
      • On back button from next page, if a page is skipped, go back two pages

      Parameters

      Returns void

onSubPagesUpdated

onSubPagesUpdated: ((pageKey, subPages) => void)

Callback to set a number of sub pages for this page

Type declaration

    • (pageKey, subPages): void

    • Callback to set a number of sub pages for this page

      Parameters

      • pageKey: string
      • subPages: string[]

      Returns void

onSubmit

onSubmit: ((formState) => void)

Submission handler, moving to the next page of the wizard.

  • Save the given state into the wizard's current state
  • If subpages are configured:
    • If not last subpage, go to the next subPageKey
    • If last subpage, continue below
  • If not last page, go to the next page
  • If last page, clear formState and then redirect to wizardCompleteRoute

Type declaration

    • (formState): void

    • Submission handler, moving to the next page of the wizard.

      • Save the given state into the wizard's current state
      • If subpages are configured:
        • If not last subpage, go to the next subPageKey
        • If last subpage, continue below
      • If not last page, go to the next page
      • If last page, clear formState and then redirect to wizardCompleteRoute

      Parameters

      Returns void

progress

progress: {
    current: number;
    isLastPage: boolean;
    total: number;
}

Progress information (for displaying step component and similar)

Type declaration

  • current: number

    Current page number (indexed from 1)

  • isLastPage: boolean

    When true, this is the last page in the wizard

  • total: number

    Total number of pages

wizardFormState

wizardFormState: Partial<WizardFormState>

Current form state (combined across all pages)

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc