Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import { FCWithChildren } from '@/shared/@types'
import { motion } from 'framer-motion'
import { useRef } from 'react'
export interface RollupWrapperProps {
isOpen: boolean
defaultOpen?: boolean
}
export const RollupWrapper: FCWithChildren<RollupWrapperProps> = ({
children,
defaultOpen = true,
isOpen,
className,
}) => {
const ref = useRef<HTMLDivElement>(null)
const scrollHeight = ref.current?.scrollHeight
return (
<motion.div
ref={ref}
initial={defaultOpen ? { height: scrollHeight } : { height: 0, overflow: 'hidden', marginTop: 0 }}
animate={{
height: isOpen ? scrollHeight : 0,
...(!isOpen && { overflow: 'hidden' }),
transitionEnd: isOpen ? { overflow: 'visible', height: 'max-content' } : { overflow: 'hidden', height: 0 },
}}
exit={{ overflow: 'visible' }}
transition={{ type: 'just' }}
className={className}
>
{children}
</motion.div>
)
}
|