forked from mui/material-ui
-
Notifications
You must be signed in to change notification settings - Fork 1
/
KeepMountedModal.tsx
78 lines (72 loc) · 1.81 KB
/
KeepMountedModal.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
import * as React from 'react';
import clsx from 'clsx';
import { styled, Box, Theme } from '@mui/system';
import ModalUnstyled from '@mui/base/ModalUnstyled';
const BackdropUnstyled = React.forwardRef<
HTMLDivElement,
{ open?: boolean; className: string }
>((props, ref) => {
const { open, className, ...other } = props;
return (
<div
className={clsx({ 'MuiBackdrop-open': open }, className)}
ref={ref}
{...other}
/>
);
});
const Modal = styled(ModalUnstyled)(`
position: fixed;
z-index: 1300;
right: 0;
bottom: 0;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
&.MuiModal-hidden {
visibility: hidden;
}
`);
const Backdrop = styled(BackdropUnstyled)`
z-index: -1;
position: fixed;
right: 0;
bottom: 0;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
-webkit-tap-highlight-color: transparent;
`;
const style = (theme: Theme) => ({
width: 400,
bgcolor: theme.palette.mode === 'dark' ? '#0A1929' : 'white',
border: '2px solid currentColor',
padding: '16px 32px 24px 32px',
});
export default function ModalUnstyledDemo() {
const [open, setOpen] = React.useState(false);
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);
return (
<div>
<button type="button" onClick={handleOpen}>
Open modal
</button>
<Modal
aria-labelledby="keep-mounted-modal-title"
aria-describedby="keep-mounted-modal-description"
open={open}
onClose={handleClose}
slots={{ backdrop: Backdrop }}
keepMounted
>
<Box sx={style}>
<h2 id="keep-mounted-modal-title">Text in a modal</h2>
<p id="keep-mounted-modal-description">Aliquid amet deserunt earum!</p>
</Box>
</Modal>
</div>
);
}