UNPKG

5.12 kBTypeScriptView Raw
1import * as React from 'react';
2import { WizardNavItemProps } from './WizardNavItem';
3import { PickOptional } from '../../helpers/typeUtils';
4export interface WizardStep {
5 /** Optional identifier */
6 id?: string | number;
7 /** The name of the step */
8 name: React.ReactNode;
9 /** The component to render in the main body */
10 component?: any;
11 /** Setting to true hides the side nav and footer */
12 isFinishedStep?: boolean;
13 /** Enables or disables the step in the navigation. Enabled by default. */
14 canJumpTo?: boolean;
15 /** Sub steps */
16 steps?: WizardStep[];
17 /** Props to pass to the WizardNavItem */
18 stepNavItemProps?: React.HTMLProps<HTMLButtonElement | HTMLAnchorElement> | WizardNavItemProps;
19 /** (Unused if footer is controlled) Can change the Next button text. If nextButtonText is also set for the Wizard, this step specific one overrides it. */
20 nextButtonText?: React.ReactNode;
21 /** (Unused if footer is controlled) The condition needed to enable the Next button */
22 enableNext?: boolean;
23 /** (Unused if footer is controlled) True to hide the Cancel button */
24 hideCancelButton?: boolean;
25 /** (Unused if footer is controlled) True to hide the Back button */
26 hideBackButton?: boolean;
27}
28export declare type WizardStepFunctionType = (newStep: {
29 id?: string | number;
30 name: React.ReactNode;
31}, prevStep: {
32 prevId?: string | number;
33 prevName: React.ReactNode;
34}) => void;
35export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
36 /** Custom width of the wizard */
37 width?: number | string;
38 /** Custom height of the wizard */
39 height?: number | string;
40 /** The wizard title to display if header is desired */
41 title?: string;
42 /** An optional id for the title */
43 titleId?: string;
44 /** An optional id for the description */
45 descriptionId?: string;
46 /** The wizard description */
47 description?: React.ReactNode;
48 /** Component type of the description */
49 descriptionComponent?: 'div' | 'p';
50 /** Flag indicating whether the close button should be in the header */
51 hideClose?: boolean;
52 /** Callback function to close the wizard */
53 onClose?: () => void;
54 /** Callback function when a step in the nav is clicked */
55 onGoToStep?: WizardStepFunctionType;
56 /** Additional classes spread to the Wizard */
57 className?: string;
58 /** The wizard steps configuration object */
59 steps: WizardStep[];
60 /** The current step the wizard is on (1 or higher) */
61 startAtStep?: number;
62 /** Aria-label for the Nav */
63 navAriaLabel?: string;
64 /** Sets aria-labelledby on nav element */
65 navAriaLabelledBy?: string;
66 /** Aria-label for the main element */
67 mainAriaLabel?: string;
68 /** Sets aria-labelledby on the main element */
69 mainAriaLabelledBy?: string;
70 /** Can remove the default padding around the main body content by setting this to true */
71 hasNoBodyPadding?: boolean;
72 /** (Use to control the footer) Passing in a footer component lets you control the buttons yourself */
73 footer?: React.ReactNode;
74 /** (Unused if footer is controlled) Callback function to save at the end of the wizard, if not specified uses onClose */
75 onSave?: () => void;
76 /** (Unused if footer is controlled) Callback function after Next button is clicked */
77 onNext?: WizardStepFunctionType;
78 /** (Unused if footer is controlled) Callback function after Back button is clicked */
79 onBack?: WizardStepFunctionType;
80 /** (Unused if footer is controlled) The Next button text */
81 nextButtonText?: React.ReactNode;
82 /** (Unused if footer is controlled) The Back button text */
83 backButtonText?: React.ReactNode;
84 /** (Unused if footer is controlled) The Cancel button text */
85 cancelButtonText?: React.ReactNode;
86 /** (Unused if footer is controlled) aria-label for the close button */
87 closeButtonAriaLabel?: string;
88 /** The parent container to append the modal to. Defaults to document.body */
89 appendTo?: HTMLElement | (() => HTMLElement);
90 /** Flag indicating Wizard modal is open. Wizard will be placed into a modal if this prop is provided */
91 isOpen?: boolean;
92 /** Flag indicating nav items with sub steps are expandable */
93 isNavExpandable?: boolean;
94}
95interface WizardState {
96 currentStep: number;
97 isNavOpen: boolean;
98}
99export declare class Wizard extends React.Component<WizardProps, WizardState> {
100 static displayName: string;
101 private static currentId;
102 static defaultProps: PickOptional<WizardProps>;
103 private titleId;
104 private descriptionId;
105 constructor(props: WizardProps);
106 private handleKeyClicks;
107 private onNext;
108 private onBack;
109 private goToStep;
110 private goToStepById;
111 private goToStepByName;
112 private getFlattenedSteps;
113 private getFlattenedStepsIndex;
114 private initSteps;
115 getElement: (appendTo: HTMLElement | (() => HTMLElement)) => HTMLElement;
116 componentDidMount(): void;
117 componentWillUnmount(): void;
118 render(): JSX.Element;
119}
120export {};
121//# sourceMappingURL=Wizard.d.ts.map
\No newline at end of file