1 | import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
2 | import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
3 | import _extends from "@babel/runtime/helpers/esm/extends";
|
4 | import * as React from 'react';
|
5 | import PropTypes from 'prop-types';
|
6 | import clsx from 'clsx';
|
7 | import { unstable_composeClasses as composeClasses } from '@mui/base';
|
8 | import { unstable_useId as useId } from '@mui/utils';
|
9 | import capitalize from '../utils/capitalize';
|
10 | import Modal from '../Modal';
|
11 | import Fade from '../Fade';
|
12 | import Paper from '../Paper';
|
13 | import useThemeProps from '../styles/useThemeProps';
|
14 | import styled from '../styles/styled';
|
15 | import dialogClasses, { getDialogUtilityClass } from './dialogClasses';
|
16 | import DialogContext from './DialogContext';
|
17 | import Backdrop from '../Backdrop';
|
18 | import useTheme from '../styles/useTheme';
|
19 | import { jsx as _jsx } from "react/jsx-runtime";
|
20 | var DialogBackdrop = styled(Backdrop, {
|
21 | name: 'MuiDialog',
|
22 | slot: 'Backdrop',
|
23 | overrides: function overrides(props, styles) {
|
24 | return styles.backdrop;
|
25 | }
|
26 | })({
|
27 |
|
28 | zIndex: -1
|
29 | });
|
30 |
|
31 | var useUtilityClasses = function useUtilityClasses(ownerState) {
|
32 | var classes = ownerState.classes,
|
33 | scroll = ownerState.scroll,
|
34 | maxWidth = ownerState.maxWidth,
|
35 | fullWidth = ownerState.fullWidth,
|
36 | fullScreen = ownerState.fullScreen;
|
37 | var slots = {
|
38 | root: ['root'],
|
39 | container: ['container', "scroll".concat(capitalize(scroll))],
|
40 | paper: ['paper', "paperScroll".concat(capitalize(scroll)), "paperWidth".concat(capitalize(String(maxWidth))), fullWidth && 'paperFullWidth', fullScreen && 'paperFullScreen']
|
41 | };
|
42 | return composeClasses(slots, getDialogUtilityClass, classes);
|
43 | };
|
44 |
|
45 | var DialogRoot = styled(Modal, {
|
46 | name: 'MuiDialog',
|
47 | slot: 'Root',
|
48 | overridesResolver: function overridesResolver(props, styles) {
|
49 | return styles.root;
|
50 | }
|
51 | })({
|
52 | '@media print': {
|
53 |
|
54 | position: 'absolute !important'
|
55 | }
|
56 | });
|
57 | var DialogContainer = styled('div', {
|
58 | name: 'MuiDialog',
|
59 | slot: 'Container',
|
60 | overridesResolver: function overridesResolver(props, styles) {
|
61 | var ownerState = props.ownerState;
|
62 | return [styles.container, styles["scroll".concat(capitalize(ownerState.scroll))]];
|
63 | }
|
64 | })(function (_ref) {
|
65 | var ownerState = _ref.ownerState;
|
66 | return _extends({
|
67 | height: '100%',
|
68 | '@media print': {
|
69 | height: 'auto'
|
70 | },
|
71 |
|
72 | outline: 0
|
73 | }, ownerState.scroll === 'paper' && {
|
74 | display: 'flex',
|
75 | justifyContent: 'center',
|
76 | alignItems: 'center'
|
77 | }, ownerState.scroll === 'body' && {
|
78 | overflowY: 'auto',
|
79 | overflowX: 'hidden',
|
80 | textAlign: 'center',
|
81 | '&:after': {
|
82 | content: '""',
|
83 | display: 'inline-block',
|
84 | verticalAlign: 'middle',
|
85 | height: '100%',
|
86 | width: '0'
|
87 | }
|
88 | });
|
89 | });
|
90 | var DialogPaper = styled(Paper, {
|
91 | name: 'MuiDialog',
|
92 | slot: 'Paper',
|
93 | overridesResolver: function overridesResolver(props, styles) {
|
94 | var ownerState = props.ownerState;
|
95 | return [styles.paper, styles["scrollPaper".concat(capitalize(ownerState.scroll))], styles["paperWidth".concat(capitalize(String(ownerState.maxWidth)))], ownerState.fullWidth && styles.paperFullWidth, ownerState.fullScreen && styles.paperFullScreen];
|
96 | }
|
97 | })(function (_ref2) {
|
98 | var theme = _ref2.theme,
|
99 | ownerState = _ref2.ownerState;
|
100 | return _extends({
|
101 | margin: 32,
|
102 | position: 'relative',
|
103 | overflowY: 'auto',
|
104 |
|
105 | '@media print': {
|
106 | overflowY: 'visible',
|
107 | boxShadow: 'none'
|
108 | }
|
109 | }, ownerState.scroll === 'paper' && {
|
110 | display: 'flex',
|
111 | flexDirection: 'column',
|
112 | maxHeight: 'calc(100% - 64px)'
|
113 | }, ownerState.scroll === 'body' && {
|
114 | display: 'inline-block',
|
115 | verticalAlign: 'middle',
|
116 | textAlign: 'left'
|
117 |
|
118 | }, !ownerState.maxWidth && {
|
119 | maxWidth: 'calc(100% - 64px)'
|
120 | }, ownerState.maxWidth === 'xs' && _defineProperty({
|
121 | maxWidth: theme.breakpoints.unit === 'px' ? Math.max(theme.breakpoints.values.xs, 444) : "".concat(theme.breakpoints.values.xs).concat(theme.breakpoints.unit)
|
122 | }, "&.".concat(dialogClasses.paperScrollBody), _defineProperty({}, theme.breakpoints.down(Math.max(theme.breakpoints.values.xs, 444) + 32 * 2), {
|
123 | maxWidth: 'calc(100% - 64px)'
|
124 | })), ownerState.maxWidth && ownerState.maxWidth !== 'xs' && _defineProperty({
|
125 | maxWidth: "".concat(theme.breakpoints.values[ownerState.maxWidth]).concat(theme.breakpoints.unit)
|
126 | }, "&.".concat(dialogClasses.paperScrollBody), _defineProperty({}, theme.breakpoints.down(theme.breakpoints.values[ownerState.maxWidth] + 32 * 2), {
|
127 | maxWidth: 'calc(100% - 64px)'
|
128 | })), ownerState.fullWidth && {
|
129 | width: 'calc(100% - 64px)'
|
130 | }, ownerState.fullScreen && _defineProperty({
|
131 | margin: 0,
|
132 | width: '100%',
|
133 | maxWidth: '100%',
|
134 | height: '100%',
|
135 | maxHeight: 'none',
|
136 | borderRadius: 0
|
137 | }, "&.".concat(dialogClasses.paperScrollBody), {
|
138 | margin: 0,
|
139 | maxWidth: '100%'
|
140 | }));
|
141 | });
|
142 |
|
143 |
|
144 |
|
145 |
|
146 | var Dialog = React.forwardRef(function Dialog(inProps, ref) {
|
147 | var props = useThemeProps({
|
148 | props: inProps,
|
149 | name: 'MuiDialog'
|
150 | });
|
151 | var theme = useTheme();
|
152 | var defaultTransitionDuration = {
|
153 | enter: theme.transitions.duration.enteringScreen,
|
154 | exit: theme.transitions.duration.leavingScreen
|
155 | };
|
156 |
|
157 | var ariaDescribedby = props['aria-describedby'],
|
158 | ariaLabelledbyProp = props['aria-labelledby'],
|
159 | BackdropComponent = props.BackdropComponent,
|
160 | BackdropProps = props.BackdropProps,
|
161 | children = props.children,
|
162 | className = props.className,
|
163 | _props$disableEscapeK = props.disableEscapeKeyDown,
|
164 | disableEscapeKeyDown = _props$disableEscapeK === void 0 ? false : _props$disableEscapeK,
|
165 | _props$fullScreen = props.fullScreen,
|
166 | fullScreen = _props$fullScreen === void 0 ? false : _props$fullScreen,
|
167 | _props$fullWidth = props.fullWidth,
|
168 | fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
|
169 | _props$maxWidth = props.maxWidth,
|
170 | maxWidth = _props$maxWidth === void 0 ? 'sm' : _props$maxWidth,
|
171 | onBackdropClick = props.onBackdropClick,
|
172 | onClose = props.onClose,
|
173 | open = props.open,
|
174 | _props$PaperComponent = props.PaperComponent,
|
175 | PaperComponent = _props$PaperComponent === void 0 ? Paper : _props$PaperComponent,
|
176 | _props$PaperProps = props.PaperProps,
|
177 | PaperProps = _props$PaperProps === void 0 ? {} : _props$PaperProps,
|
178 | _props$scroll = props.scroll,
|
179 | scroll = _props$scroll === void 0 ? 'paper' : _props$scroll,
|
180 | _props$TransitionComp = props.TransitionComponent,
|
181 | TransitionComponent = _props$TransitionComp === void 0 ? Fade : _props$TransitionComp,
|
182 | _props$transitionDura = props.transitionDuration,
|
183 | transitionDuration = _props$transitionDura === void 0 ? defaultTransitionDuration : _props$transitionDura,
|
184 | TransitionProps = props.TransitionProps,
|
185 | other = _objectWithoutProperties(props, ["aria-describedby", "aria-labelledby", "BackdropComponent", "BackdropProps", "children", "className", "disableEscapeKeyDown", "fullScreen", "fullWidth", "maxWidth", "onBackdropClick", "onClose", "open", "PaperComponent", "PaperProps", "scroll", "TransitionComponent", "transitionDuration", "TransitionProps"]);
|
186 |
|
187 | var ownerState = _extends({}, props, {
|
188 | disableEscapeKeyDown: disableEscapeKeyDown,
|
189 | fullScreen: fullScreen,
|
190 | fullWidth: fullWidth,
|
191 | maxWidth: maxWidth,
|
192 | scroll: scroll
|
193 | });
|
194 |
|
195 | var classes = useUtilityClasses(ownerState);
|
196 | var backdropClick = React.useRef();
|
197 |
|
198 | var handleMouseDown = function handleMouseDown(event) {
|
199 |
|
200 |
|
201 | backdropClick.current = event.target === event.currentTarget;
|
202 | };
|
203 |
|
204 | var handleBackdropClick = function handleBackdropClick(event) {
|
205 |
|
206 | if (!backdropClick.current) {
|
207 | return;
|
208 | }
|
209 |
|
210 | backdropClick.current = null;
|
211 |
|
212 | if (onBackdropClick) {
|
213 | onBackdropClick(event);
|
214 | }
|
215 |
|
216 | if (onClose) {
|
217 | onClose(event, 'backdropClick');
|
218 | }
|
219 | };
|
220 |
|
221 | var ariaLabelledby = useId(ariaLabelledbyProp);
|
222 | var dialogContextValue = React.useMemo(function () {
|
223 | return {
|
224 | titleId: ariaLabelledby
|
225 | };
|
226 | }, [ariaLabelledby]);
|
227 | return _jsx(DialogRoot, _extends({
|
228 | className: clsx(classes.root, className),
|
229 | closeAfterTransition: true,
|
230 | components: {
|
231 | Backdrop: DialogBackdrop
|
232 | },
|
233 | componentsProps: {
|
234 | backdrop: _extends({
|
235 | transitionDuration: transitionDuration,
|
236 | as: BackdropComponent
|
237 | }, BackdropProps)
|
238 | },
|
239 | disableEscapeKeyDown: disableEscapeKeyDown,
|
240 | onClose: onClose,
|
241 | open: open,
|
242 | ref: ref,
|
243 | onClick: handleBackdropClick,
|
244 | ownerState: ownerState
|
245 | }, other, {
|
246 | children: _jsx(TransitionComponent, _extends({
|
247 | appear: true,
|
248 | in: open,
|
249 | timeout: transitionDuration,
|
250 | role: "presentation"
|
251 | }, TransitionProps, {
|
252 | children: _jsx(DialogContainer, {
|
253 | className: clsx(classes.container),
|
254 | onMouseDown: handleMouseDown,
|
255 | ownerState: ownerState,
|
256 | children: _jsx(DialogPaper, _extends({
|
257 | as: PaperComponent,
|
258 | elevation: 24,
|
259 | role: "dialog",
|
260 | "aria-describedby": ariaDescribedby,
|
261 | "aria-labelledby": ariaLabelledby
|
262 | }, PaperProps, {
|
263 | className: clsx(classes.paper, PaperProps.className),
|
264 | ownerState: ownerState,
|
265 | children: _jsx(DialogContext.Provider, {
|
266 | value: dialogContextValue,
|
267 | children: children
|
268 | })
|
269 | }))
|
270 | })
|
271 | }))
|
272 | }));
|
273 | });
|
274 | process.env.NODE_ENV !== "production" ? Dialog.propTypes
|
275 |
|
276 | = {
|
277 |
|
278 |
|
279 |
|
280 |
|
281 |
|
282 | |
283 |
|
284 |
|
285 | 'aria-describedby': PropTypes.string,
|
286 |
|
287 | |
288 |
|
289 |
|
290 | 'aria-labelledby': PropTypes.string,
|
291 |
|
292 | |
293 |
|
294 |
|
295 |
|
296 |
|
297 |
|
298 |
|
299 |
|
300 |
|
301 |
|
302 |
|
303 |
|
304 |
|
305 |
|
306 | BackdropComponent: PropTypes.elementType,
|
307 |
|
308 | |
309 |
|
310 |
|
311 | BackdropProps: PropTypes.object,
|
312 |
|
313 | |
314 |
|
315 |
|
316 | children: PropTypes.node,
|
317 |
|
318 | |
319 |
|
320 |
|
321 | classes: PropTypes.object,
|
322 |
|
323 | |
324 |
|
325 |
|
326 | className: PropTypes.string,
|
327 |
|
328 | |
329 |
|
330 |
|
331 |
|
332 | disableEscapeKeyDown: PropTypes.bool,
|
333 |
|
334 | |
335 |
|
336 |
|
337 |
|
338 | fullScreen: PropTypes.bool,
|
339 |
|
340 | |
341 |
|
342 |
|
343 |
|
344 |
|
345 |
|
346 | fullWidth: PropTypes.bool,
|
347 |
|
348 | |
349 |
|
350 |
|
351 |
|
352 |
|
353 |
|
354 | maxWidth: PropTypes
|
355 |
|
356 | .oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]), PropTypes.string]),
|
357 |
|
358 | |
359 |
|
360 |
|
361 |
|
362 | onBackdropClick: PropTypes.func,
|
363 |
|
364 | |
365 |
|
366 |
|
367 |
|
368 |
|
369 |
|
370 | onClose: PropTypes.func,
|
371 |
|
372 | |
373 |
|
374 |
|
375 | open: PropTypes.bool.isRequired,
|
376 |
|
377 | |
378 |
|
379 |
|
380 |
|
381 | PaperComponent: PropTypes.elementType,
|
382 |
|
383 | |
384 |
|
385 |
|
386 |
|
387 | PaperProps: PropTypes.object,
|
388 |
|
389 | |
390 |
|
391 |
|
392 |
|
393 | scroll: PropTypes.oneOf(['body', 'paper']),
|
394 |
|
395 | |
396 |
|
397 |
|
398 | sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
|
399 |
|
400 | |
401 |
|
402 |
|
403 |
|
404 |
|
405 | TransitionComponent: PropTypes.elementType,
|
406 |
|
407 | |
408 |
|
409 |
|
410 |
|
411 |
|
412 |
|
413 |
|
414 |
|
415 | transitionDuration: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
|
416 | appear: PropTypes.number,
|
417 | enter: PropTypes.number,
|
418 | exit: PropTypes.number
|
419 | })]),
|
420 |
|
421 | |
422 |
|
423 |
|
424 |
|
425 | TransitionProps: PropTypes.object
|
426 | } : void 0;
|
427 | export default Dialog; |
\ | No newline at end of file |