1 | import * as React from 'react';
|
2 | import { WizardNavItemProps } from './WizardNavItem';
|
3 | import { PickOptional } from '../../helpers/typeUtils';
|
4 | export 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 | }
|
28 | export declare type WizardStepFunctionType = (newStep: {
|
29 | id?: string | number;
|
30 | name: React.ReactNode;
|
31 | }, prevStep: {
|
32 | prevId?: string | number;
|
33 | prevName: React.ReactNode;
|
34 | }) => void;
|
35 | export 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 | }
|
95 | interface WizardState {
|
96 | currentStep: number;
|
97 | isNavOpen: boolean;
|
98 | }
|
99 | export 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 | }
|
120 | export {};
|
121 | //# sourceMappingURL=Wizard.d.ts.map |
\ | No newline at end of file |