/
githubmirror
/
material-ui
Обзор
Документация
Войти
/
githubmirror
/
material-ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
docs/data/material/components/popper/SpringPopper.tsx
65 строк
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 Box from '@mui/material/Box'; import Popper from '@mui/material/Popper'; import { useSpring, animated } from '@react-spring/web'; interface FadeProps { children?: React.ReactElement<unknown>; in?: boolean; onEnter?: () => void; onExited?: () => void; } 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 SpringPopper() { const [open, setOpen] = React.useState(false); const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null); const handleClick = (event: React.MouseEvent<HTMLElement>) => { 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> ); }