UNPKG

2.96 kBTypeScriptView Raw
1import * as React from "react";
2import { AbstractPureComponent, Position } from "../../common";
3import { DialogProps } from "./dialog";
4import { DialogStepId } from "./dialogStep";
5import { DialogStepButtonProps } from "./dialogStepButton";
6export type MultistepDialogNavPosition = typeof Position.TOP | typeof Position.LEFT | typeof Position.RIGHT;
7export interface MultistepDialogProps extends DialogProps {
8 /**
9 * Props for the back button.
10 */
11 backButtonProps?: DialogStepButtonProps;
12 /** Dialog steps. */
13 children?: React.ReactNode;
14 /**
15 * Props for the close button that appears in the footer.
16 */
17 closeButtonProps?: DialogStepButtonProps;
18 /**
19 * Props for the button to display on the final step.
20 */
21 finalButtonProps?: DialogStepButtonProps;
22 /**
23 * Position of the step navigation within the dialog.
24 *
25 * @default "left"
26 */
27 navigationPosition?: MultistepDialogNavPosition;
28 /**
29 * Props for the next button.
30 */
31 nextButtonProps?: DialogStepButtonProps;
32 /**
33 * A callback that is invoked when the user selects a different step by clicking on back, next, or a step itself.
34 */
35 onChange?(newDialogStepId: DialogStepId, prevDialogStepId: DialogStepId | undefined, event: React.MouseEvent<HTMLElement>): void;
36 /**
37 * Whether to reset the dialog state to its initial state on close.
38 * By default, closing the dialog will reset its state.
39 *
40 * @default true
41 */
42 resetOnClose?: boolean;
43 /**
44 * Whether the footer close button is shown. When this value is true, the button will appear
45 * regardless of the value of `isCloseButtonShown`.
46 *
47 * @default false
48 */
49 showCloseButtonInFooter?: boolean;
50 /**
51 * A 0 indexed initial step to start off on, to start in the middle of the dialog, for example.
52 * If the provided index exceeds the number of steps, it defaults to the last step.
53 * If a negative index is provided, it defaults to the first step.
54 */
55 initialStepIndex?: number;
56}
57interface MultistepDialogState {
58 lastViewedIndex: number;
59 selectedIndex: number;
60}
61/**
62 * Multi-step dialog component.
63 *
64 * @see https://blueprintjs.com/docs/#core/components/dialog.multistep-dialog
65 */
66export declare class MultistepDialog extends AbstractPureComponent<MultistepDialogProps, MultistepDialogState> {
67 static displayName: string;
68 static defaultProps: Partial<MultistepDialogProps>;
69 state: MultistepDialogState;
70 render(): JSX.Element;
71 componentDidUpdate(prevProps: MultistepDialogProps): void;
72 private getDialogStyle;
73 private renderLeftPanel;
74 private renderDialogStep;
75 private maybeRenderRightPanel;
76 private renderFooter;
77 private renderButtons;
78 private getDialogStepChangeHandler;
79 /** Filters children to only `<DialogStep>`s */
80 private getDialogStepChildren;
81 private getInitialIndexFromProps;
82}
83export {};