-
-
Notifications
You must be signed in to change notification settings - Fork 31.7k
/
SpringModal.tsx
92 lines (84 loc) · 2.19 KB
/
SpringModal.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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
import React from 'react';
import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
import Modal from '@material-ui/core/Modal';
import Backdrop from '@material-ui/core/Backdrop';
import { useSpring, animated } from 'react-spring/web.cjs'; // web.cjs is required for IE 11 support
const useStyles = makeStyles((theme: Theme) =>
createStyles({
modal: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
paper: {
backgroundColor: theme.palette.background.paper,
border: '2px solid #000',
boxShadow: theme.shadows[5],
padding: theme.spacing(2, 4, 3),
},
}),
);
interface FadeProps {
children?: React.ReactElement;
in: boolean;
onEnter?: () => {};
onExited?: () => {};
}
const Fade = React.forwardRef<HTMLDivElement, FadeProps>(function Fade(props, ref) {
const { in: open, children, onEnter, onExited, ...other } = props;
const style = useSpring({
from: { opacity: 0 },
to: { opacity: open ? 1 : 0 },
onStart: () => {
if (open && onEnter) {
onEnter();
}
},
onRest: () => {
if (!open && onExited) {
onExited();
}
},
});
return (
<animated.div ref={ref} style={style} {...other}>
{children}
</animated.div>
);
});
export default function SpringModal() {
const classes = useStyles();
const [open, setOpen] = React.useState(false);
const handleOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return (
<div>
<button type="button" onClick={handleOpen}>
react-spring
</button>
<Modal
aria-labelledby="spring-modal-title"
aria-describedby="spring-modal-description"
className={classes.modal}
open={open}
onClose={handleClose}
closeAfterTransition
BackdropComponent={Backdrop}
BackdropProps={{
timeout: 500,
}}
>
<Fade in={open}>
<div className={classes.paper}>
<h2 id="spring-modal-title">Spring modal</h2>
<p id="spring-modal-description">react-spring animates me.</p>
</div>
</Fade>
</Modal>
</div>
);
}