File size: 2,990 Bytes
4114d85 |
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 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 |
import PropTypes from 'prop-types'
import { forwardRef } from 'react'
// material-ui
import { Collapse, Fade, Box, Grow, Slide, Zoom } from '@mui/material'
// ==============================|| TRANSITIONS ||============================== //
const Transitions = forwardRef(function Transitions({ children, position, type, direction, ...others }, ref) {
let positionSX = {
transformOrigin: '0 0 0'
}
switch (position) {
case 'top-right':
positionSX = {
transformOrigin: 'top right'
}
break
case 'top':
positionSX = {
transformOrigin: 'top'
}
break
case 'bottom-left':
positionSX = {
transformOrigin: 'bottom left'
}
break
case 'bottom-right':
positionSX = {
transformOrigin: 'bottom right'
}
break
case 'bottom':
positionSX = {
transformOrigin: 'bottom'
}
break
case 'top-left':
default:
positionSX = {
transformOrigin: '0 0 0'
}
break
}
return (
<Box ref={ref}>
{type === 'grow' && (
<Grow {...others}>
<Box sx={positionSX}>{children}</Box>
</Grow>
)}
{type === 'collapse' && (
<Collapse {...others} sx={positionSX}>
{children}
</Collapse>
)}
{type === 'fade' && (
<Fade
{...others}
timeout={{
appear: 500,
enter: 600,
exit: 400
}}
>
<Box sx={positionSX}>{children}</Box>
</Fade>
)}
{type === 'slide' && (
<Slide
{...others}
timeout={{
appear: 0,
enter: 400,
exit: 200
}}
direction={direction}
>
<Box sx={positionSX}>{children}</Box>
</Slide>
)}
{type === 'zoom' && (
<Zoom {...others}>
<Box sx={positionSX}>{children}</Box>
</Zoom>
)}
</Box>
)
})
Transitions.propTypes = {
children: PropTypes.node,
type: PropTypes.oneOf(['grow', 'fade', 'collapse', 'slide', 'zoom']),
position: PropTypes.oneOf(['top-left', 'top-right', 'top', 'bottom-left', 'bottom-right', 'bottom']),
direction: PropTypes.oneOf(['up', 'down', 'left', 'right'])
}
Transitions.defaultProps = {
type: 'grow',
position: 'top-left',
direction: 'up'
}
export default Transitions
|