/
githubmirror
/
material-ui
Обзор
Документация
Войти
/
githubmirror
/
material-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
docs/data/material/components/popper/SpringPopper.js
66 строк
2 KB
renovate[bot]
Bump @react-spring/web to ^10.0.1 (#46524)
14 июл 2025, 15:37
Не верифицирован
14 июл 2025, 15:37
b34eae0
Код
Авторство
О чём код?
import * as React from 'react'; import PropTypes from 'prop-types'; import Box from '@mui/material/Box'; import Popper from '@mui/material/Popper'; import { useSpring, animated } from '@react-spring/web'; const Fade = React.forwardRef(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> ); }); Fade.propTypes = { children: PropTypes.element, in: PropTypes.bool, onEnter: PropTypes.func, onExited: PropTypes.func, }; export default function SpringPopper() { const [open, setOpen] = React.useState(false); const [anchorEl, setAnchorEl] = React.useState(null); const handleClick = (event) => { setAnchorEl(event.currentTarget); setOpen((previousOpen) => !previousOpen); }; const canBeOpen = open && Boolean(anchorEl); const id = canBeOpen ? 'spring-popper' : undefined; return ( <div> <button aria-describedby={id} type="button" onClick={handleClick}> Toggle Popper </button> <Popper id={id} open={open} anchorEl={anchorEl} transition> {({ TransitionProps }) => ( <Fade {...TransitionProps}> <Box sx={{ border: 1, p: 1, bgcolor: 'background.paper' }}> The content of the Popper. </Box> </Fade> )} </Popper> </div> ); }