-
Notifications
You must be signed in to change notification settings - Fork 0
/
GBlock.tsx
60 lines (55 loc) · 1.69 KB
/
GBlock.tsx
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
import { Box } from '@mui/material';
import { useGContext } from '../GContext';
import { motion } from 'framer-motion';
import { useMemo } from 'react';
import GButton from '../GButton';
import { Effect, GBlockProps, LoadOn } from './types';
import { defaultProps, effects } from './utils';
import useIsShown from './useIsShown';
/**
* GBlock component
* is a container for content that can be shown on button click or other event
* @param props - GBlockProps
* @constructor - returns GBlock component
* @example
* <GBlock loadOn="button" buttonName="Show more">
* <div>Content</div>
* </GBlock>
* @returns GBlock component
* @see GBlockProps
* @see GButton
* @see useIsShown
* @see GContext
*/
const GBlock = (props: GBlockProps) => {
const { block } = useGContext();
const {
className,
children,
buttonName = block?.buttonName as string,
loadOn = block?.loadOn as LoadOn,
effect = block?.effect as Effect,
sx,
} = props;
const { isShown, setIsShown } = useIsShown({ loadOn });
const motionProps = useMemo(
() => (loadOn === 'default' ? {} : { initial: effects[effect], ...defaultProps }),
[loadOn, effect],
);
return (
<Box
data-testid='g-block'
className={`g-block ${className || ''}`}
sx={{ paddingBottom: 40, position: 'relative', ...sx }}
>
{isShown ? (
<motion.div {...motionProps}>{children}</motion.div>
) : (
<GButton className='g-block-button' onClick={() => setIsShown(true)}>
{buttonName}
</GButton>
)}
</Box>
);
};
export default GBlock;