78 lines
1.7 KiB
TypeScript
78 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
import MyIcon from '../Icon';
|
|
import {
|
|
Drawer,
|
|
DrawerBody,
|
|
DrawerHeader,
|
|
DrawerOverlay,
|
|
DrawerContent,
|
|
DrawerCloseButton,
|
|
DrawerContentProps,
|
|
Flex,
|
|
Image,
|
|
Box
|
|
} from '@chakra-ui/react';
|
|
import { useLoading } from '../../../hooks/useLoading';
|
|
import Avatar from '../Avatar';
|
|
|
|
type Props = DrawerContentProps & {
|
|
onClose: () => void;
|
|
iconSrc?: string;
|
|
title?: any;
|
|
isLoading?: boolean;
|
|
};
|
|
|
|
const MyRightDrawer = ({
|
|
onClose,
|
|
iconSrc,
|
|
title,
|
|
maxW = ['90vw', '500px'],
|
|
children,
|
|
isLoading,
|
|
...props
|
|
}: Props) => {
|
|
const { Loading } = useLoading();
|
|
return (
|
|
<Drawer isOpen placement="right" onClose={onClose}>
|
|
<DrawerOverlay />
|
|
<DrawerContent
|
|
maxW={maxW}
|
|
{...props}
|
|
h={'94%'}
|
|
mt={'2%'}
|
|
borderLeftRadius={'lg'}
|
|
overflow={'hidden'}
|
|
>
|
|
<Flex
|
|
display={'flex'}
|
|
alignItems={'center'}
|
|
fontWeight={500}
|
|
background={'#FBFBFC'}
|
|
borderBottom={'1px solid #F4F6F8'}
|
|
roundedTop={'lg'}
|
|
py={'10px'}
|
|
px={5}
|
|
>
|
|
{iconSrc && <Avatar mr={3} w={'20px'} src={iconSrc} />}
|
|
<Box flex={'1'} fontSize={'md'}>
|
|
{title}
|
|
</Box>
|
|
<DrawerCloseButton position={'relative'} fontSize={'sm'} top={0} right={0} />
|
|
</Flex>
|
|
|
|
<DrawerBody
|
|
overflowY={props?.overflowY || 'auto'}
|
|
display={'flex'}
|
|
flexDirection={'column'}
|
|
px={props?.px ?? 4}
|
|
>
|
|
{children}
|
|
<Loading loading={isLoading} fixed={false} />
|
|
</DrawerBody>
|
|
</DrawerContent>
|
|
</Drawer>
|
|
);
|
|
};
|
|
|
|
export default MyRightDrawer;
|