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
|
import { LazyMotion, domAnimation, m } from 'framer-motion';
import React from 'react';
const { memo } = React;
const variantsCollpapsibleWrap = {
initialOpen: {
height: 'auto',
opacity: 1,
visibility: 'visible',
transition: { duration: 0 },
},
open: {
height: 'auto',
opacity: 1,
visibility: 'visible',
transition: { duration: 0.3 },
},
closed: {
height: 0,
opacity: 0,
visibility: 'hidden',
overflowY: 'hidden',
transition: { duration: 0.3 },
},
};
const Collapsible = memo(({ children, isOpen }: { children: React.ReactNode; isOpen: boolean }) => {
return (
<LazyMotion features={domAnimation}>
<m.div
initial={isOpen ? 'initialOpen' : 'closed'}
animate={isOpen ? 'open' : 'closed'}
variants={variantsCollpapsibleWrap}
style={{ overflow: 'hidden' }}
>
{children}
</m.div>
</LazyMotion>
);
});
export default Collapsible;
|
