mirror of
https://github.com/labring/FastGPT.git
synced 2025-07-27 08:25:07 +00:00
2d3117c5da
* update: Add type * fix: update import statement for NextApiRequest type * fix: update imports to use type for LexicalEditor and EditorState * Refactor imports to use 'import type' for type-only imports across multiple files - Updated imports in various components and API files to use 'import type' for better clarity and to optimize TypeScript's type checking. - Ensured consistent usage of type imports in files related to chat, dataset, workflow, and user management. - Improved code readability and maintainability by distinguishing between value and type imports. * refactor: remove old ESLint configuration and add new rules - Deleted the old ESLint configuration file from the app project. - Added a new ESLint configuration file with updated rules and settings. - Changed imports to use type-only imports in various files for better clarity and performance. - Updated TypeScript configuration to remove unnecessary options. - Added an ESLint ignore file to exclude build and dependency directories from linting. * fix: update imports to use 'import type' for type-only imports in schema files
76 lines
1.6 KiB
TypeScript
76 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import { Flex, Box, CloseButton, type FlexProps } from '@chakra-ui/react';
|
|
import { useLoading } from '../../../hooks/useLoading';
|
|
import Avatar from '../Avatar';
|
|
|
|
type Props = FlexProps & {
|
|
onClose: () => void;
|
|
iconSrc?: string;
|
|
title?: any;
|
|
isLoading?: boolean;
|
|
showMask?: boolean;
|
|
};
|
|
|
|
const CustomRightDrawer = ({
|
|
onClose,
|
|
iconSrc,
|
|
title,
|
|
maxW = ['90vw', '30vw'],
|
|
top = 16,
|
|
bottom = 0,
|
|
children,
|
|
isLoading,
|
|
showMask = true,
|
|
...props
|
|
}: Props) => {
|
|
const { Loading } = useLoading();
|
|
return (
|
|
<Flex
|
|
flexDirection={'column'}
|
|
position={'fixed'}
|
|
right={0}
|
|
bg={'white'}
|
|
zIndex={100}
|
|
maxW={maxW}
|
|
w={'100%'}
|
|
top={top}
|
|
bottom={bottom}
|
|
borderLeftRadius={'lg'}
|
|
border={'base'}
|
|
boxShadow={'2'}
|
|
{...props}
|
|
>
|
|
<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>
|
|
<CloseButton position={'relative'} fontSize={'sm'} top={0} right={0} onClick={onClose} />
|
|
</Flex>
|
|
|
|
<Box
|
|
flex={'1 0 0'}
|
|
py={props.py ?? 3}
|
|
px={props.px ?? 5}
|
|
overflow={props?.overflow ?? 'auto'}
|
|
display={'flex'}
|
|
flexDirection={'column'}
|
|
>
|
|
{children}
|
|
</Box>
|
|
<Loading loading={isLoading} fixed={false} />
|
|
</Flex>
|
|
);
|
|
};
|
|
|
|
export default React.memo(CustomRightDrawer);
|