1 | import * as React from 'react';
|
2 | import { StandardProps } from '..';
|
3 | import { PaperProps } from '../Paper';
|
4 | import { ModalProps } from '../Modal';
|
5 | import { TransitionHandlerProps, TransitionProps } from '../transitions/transition';
|
6 |
|
7 | export interface DialogProps
|
8 | extends StandardProps<ModalProps & Partial<TransitionHandlerProps>, DialogClassKey, 'children'> {
|
9 | /**
|
10 | * The id(s) of the element(s) that describe the dialog.
|
11 | */
|
12 | 'aria-describedby'?: string;
|
13 | /**
|
14 | * The id(s) of the element(s) that label the dialog.
|
15 | */
|
16 | 'aria-labelledby'?: string;
|
17 | /**
|
18 | * Dialog children, usually the included sub-components.
|
19 | */
|
20 | children?: React.ReactNode;
|
21 | /**
|
22 | * If `true`, clicking the backdrop will not fire the `onClose` callback.
|
23 | * @deprecated Use the onClose prop with the `reason` argument to filter the `backdropClick` events.
|
24 | */
|
25 | disableBackdropClick?: boolean;
|
26 | /**
|
27 | * If `true`, hitting escape will not fire the `onClose` callback.
|
28 | */
|
29 | disableEscapeKeyDown?: boolean;
|
30 | /**
|
31 | * If `true`, the dialog will be full-screen
|
32 | */
|
33 | fullScreen?: boolean;
|
34 | /**
|
35 | * If `true`, the dialog stretches to `maxWidth`.
|
36 | *
|
37 | * Notice that the dialog width grow is limited by the default margin.
|
38 | */
|
39 | fullWidth?: boolean;
|
40 | /**
|
41 | * Determine the max-width of the dialog.
|
42 | * The dialog width grows with the size of the screen.
|
43 | * Set to `false` to disable `maxWidth`.
|
44 | */
|
45 | maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;
|
46 | /**
|
47 | * Callback fired when the backdrop is clicked.
|
48 | * @deprecated Use the onClose prop with the `reason` argument to handle the `backdropClick` events.
|
49 | */
|
50 | onBackdropClick?: ModalProps['onBackdropClick'];
|
51 | /**
|
52 | * Callback fired when the component requests to be closed.
|
53 | *
|
54 | * @param {object} event The event source of the callback.
|
55 | * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`.
|
56 | */
|
57 | onClose?: ModalProps['onClose'];
|
58 | /**
|
59 | * Callback fired before the dialog enters.
|
60 | * @deprecated Use the `TransitionProps` prop instead.
|
61 | */
|
62 | onEnter?: TransitionHandlerProps['onEnter'];
|
63 | /**
|
64 | * Callback fired when the dialog has entered.
|
65 | * @deprecated Use the `TransitionProps` prop instead.
|
66 | */
|
67 | onEntered?: TransitionHandlerProps['onEntered'];
|
68 | /**
|
69 | * Callback fired when the dialog is entering.
|
70 | * @deprecated Use the `TransitionProps` prop instead.
|
71 | */
|
72 | onEntering?: TransitionHandlerProps['onEntering'];
|
73 | /**
|
74 | * Callback fired when the escape key is pressed,
|
75 | * `disableKeyboard` is false and the modal is in focus.
|
76 | * @deprecated Use the onClose prop with the `reason` argument to handle the `escapeKeyDown` events.
|
77 | */
|
78 | onEscapeKeyDown?: ModalProps['onEscapeKeyDown'];
|
79 | /**
|
80 | * Callback fired before the dialog exits.
|
81 | * @deprecated Use the `TransitionProps` prop instead.
|
82 | */
|
83 | onExit?: TransitionHandlerProps['onExit'];
|
84 | /**
|
85 | * Callback fired when the dialog has exited.
|
86 | * @deprecated Use the `TransitionProps` prop instead.
|
87 | */
|
88 | onExited?: TransitionHandlerProps['onExited'];
|
89 | /**
|
90 | * Callback fired when the dialog is exiting.
|
91 | * @deprecated Use the `TransitionProps` prop instead.
|
92 | */
|
93 | onExiting?: TransitionHandlerProps['onExiting'];
|
94 | /**
|
95 | * If `true`, the Dialog is open.
|
96 | */
|
97 | open: ModalProps['open'];
|
98 | /**
|
99 | * The component used to render the body of the dialog.
|
100 | */
|
101 | PaperComponent?: React.ComponentType<PaperProps>;
|
102 | /**
|
103 | * Props applied to the [`Paper`](/api/paper/) element.
|
104 | */
|
105 | PaperProps?: Partial<PaperProps>;
|
106 | /**
|
107 | * Determine the container for scrolling the dialog.
|
108 | */
|
109 | scroll?: 'body' | 'paper';
|
110 | /**
|
111 | * The component used for the transition.
|
112 | * [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
|
113 | */
|
114 | TransitionComponent?: React.ComponentType<
|
115 | TransitionProps & { children?: React.ReactElement<any, any> }
|
116 | >;
|
117 | /**
|
118 | * The duration for the transition, in milliseconds.
|
119 | * You may specify a single timeout for all transitions, or individually with an object.
|
120 | */
|
121 | transitionDuration?: TransitionProps['timeout'];
|
122 | /**
|
123 | * Props applied to the [`Transition`](http://reactcommunity.org/react-transition-group/transition#Transition-props) element.
|
124 | */
|
125 | TransitionProps?: TransitionProps;
|
126 | }
|
127 |
|
128 | export type DialogClassKey =
|
129 | | 'root'
|
130 | | 'scrollPaper'
|
131 | | 'scrollBody'
|
132 | | 'container'
|
133 | | 'paper'
|
134 | | 'paperScrollPaper'
|
135 | | 'paperScrollBody'
|
136 | | 'paperWidthFalse'
|
137 | | 'paperWidthXs'
|
138 | | 'paperWidthSm'
|
139 | | 'paperWidthMd'
|
140 | | 'paperWidthLg'
|
141 | | 'paperWidthXl'
|
142 | | 'paperFullWidth'
|
143 | | 'paperFullScreen';
|
144 |
|
145 | /**
|
146 | * Dialogs are overlaid modal paper based components with a backdrop.
|
147 | * Demos:
|
148 | *
|
149 | * - [Dialogs](https://material-ui.com/components/dialogs/)
|
150 | *
|
151 | * API:
|
152 | *
|
153 | * - [Dialog API](https://material-ui.com/api/dialog/)
|
154 | * - inherits [Modal API](https://material-ui.com/api/modal/)
|
155 | */
|
156 | export default function Dialog(props: DialogProps): JSX.Element;
|