Files
FastGPT/packages/web/components/common/MyModal/index.tsx
Archer 0f3418daf5 Publish app - feishu and wecom (#2375)
* feat(app publish): feishu bot (#2290)

* feat: feishu publish channel fe

* feat: enable feishu fe,
feat: feishu token api

* feat: feishu bot

* chore: extract saveChat from projects/app

* chore: remove debug log output

* feat: Basic Info

* chore: feishu bot fe adjusting

* feat: feishu bot docs

* feat: new tmpData collection for all tmpdata

* chore: compress the image

* perf: feishu config

* feat: source name

* perf: text desc

* perf: load system plugins

* perf: chat source

* feat(publish): Wecom bot (#2343)

* chore: Wecom Config

* feat(fe): wecom config fe

* feat: wecom fe

* chore: uses the newest editmodal

* feat: update png; adjust the fe

* chore: adjust fe

* perf: publish app ui

---------

Co-authored-by: Finley Ge <32237950+FinleyGe@users.noreply.github.com>
2024-08-13 21:52:18 +08:00

107 lines
2.4 KiB
TypeScript

import React from 'react';
import {
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalCloseButton,
ModalContentProps,
Box
} from '@chakra-ui/react';
import MyBox from '../MyBox';
import { useSystem } from '../../../hooks/useSystem';
import Avatar from '../Avatar';
export interface MyModalProps extends ModalContentProps {
iconSrc?: string;
title?: any;
isCentered?: boolean;
isLoading?: boolean;
isOpen?: boolean;
onClose?: () => void;
closeOnOverlayClick?: boolean;
}
const MyModal = ({
isOpen = true,
onClose,
iconSrc,
title,
children,
isCentered,
isLoading,
w = 'auto',
maxW = ['90vw', '600px'],
closeOnOverlayClick = true,
...props
}: MyModalProps) => {
const isPc = useSystem();
return (
<Modal
isOpen={isOpen}
onClose={() => onClose && onClose()}
autoFocus={false}
isCentered={isPc ? isCentered : true}
blockScrollOnMount={false}
closeOnOverlayClick={closeOnOverlayClick}
>
<ModalOverlay />
<ModalContent
w={w}
minW={['90vw', '400px']}
maxW={maxW}
position={'relative'}
maxH={'85vh'}
boxShadow={'7'}
{...props}
>
{!title && onClose && <ModalCloseButton zIndex={1} />}
{!!title && (
<ModalHeader
display={'flex'}
alignItems={'center'}
background={'#FBFBFC'}
borderBottom={'1px solid #F4F6F8'}
roundedTop={'lg'}
py={'10px'}
fontSize={'md'}
fontWeight={'bold'}
>
{iconSrc && (
<>
<Avatar
objectFit={'contain'}
alt=""
src={iconSrc}
w={'1.5rem'}
borderRadius={'md'}
/>
</>
)}
<Box ml={3} color={'myGray.900'} fontWeight={'500'}>
{title}
</Box>
<Box flex={1} />
{onClose && (
<ModalCloseButton position={'relative'} fontSize={'xs'} top={0} right={0} />
)}
</ModalHeader>
)}
<MyBox
isLoading={isLoading}
overflow={props.overflow || 'overlay'}
h={'100%'}
display={'flex'}
flexDirection={'column'}
>
{children}
</MyBox>
</ModalContent>
</Modal>
);
};
export default React.memo(MyModal);