|
|
@@ -1,82 +1,3 @@
|
|
|
-import css from './index.module.css';
|
|
|
-import {FC, FormEventHandler, ReactNode} from 'react';
|
|
|
-import ReactModal from 'react-modal';
|
|
|
-import {CloseCircleFilled} from '@ant-design/icons';
|
|
|
-import ModalBtnGroup from './BtnGroup';
|
|
|
-import {Space} from 'antd';
|
|
|
-import addIcon from '@assets/images/dialog/add.webp';
|
|
|
-import editIcon from '@assets/images/dialog/edit.webp';
|
|
|
-
|
|
|
-type ReactModalStyle = ReactModal.Styles;
|
|
|
-
|
|
|
-const styles: ReactModalStyle = {
|
|
|
- content: {
|
|
|
- height: '560px',
|
|
|
- width: '680px',
|
|
|
- overflow: 'visible',
|
|
|
- borderRadius: '10px',
|
|
|
- },
|
|
|
-};
|
|
|
-
|
|
|
-type Props = {
|
|
|
- visible: boolean,
|
|
|
- title: string,
|
|
|
- onClose?: () => void,
|
|
|
- isLoading?: boolean,
|
|
|
- onSubmit?: FormEventHandler<HTMLFormElement>
|
|
|
- children?: ReactNode,
|
|
|
- testId?: string,
|
|
|
-};
|
|
|
-
|
|
|
-const Modal: FC<Props> = function({
|
|
|
- visible,
|
|
|
- title,
|
|
|
- onClose,
|
|
|
- isLoading,
|
|
|
- onSubmit,
|
|
|
- children,
|
|
|
- testId,
|
|
|
-}) {
|
|
|
- return (
|
|
|
- <ReactModal
|
|
|
- isOpen={visible}
|
|
|
- style={styles}
|
|
|
- closeTimeoutMS={200}
|
|
|
- ariaHideApp={false}
|
|
|
- shouldCloseOnOverlayClick
|
|
|
- onRequestClose={onClose}
|
|
|
- >
|
|
|
- <section className={css.dialog} data-testid={testId}>
|
|
|
- <div className={css.dialogTitle}>
|
|
|
- <h3>{title}</h3>
|
|
|
- </div>
|
|
|
-
|
|
|
- <CloseCircleFilled className={css.dialogClose} onClick={onClose} />
|
|
|
-
|
|
|
- <div className={css.dialogDecorate}>
|
|
|
- <span className={css.dialogDecorateIcon1} />
|
|
|
- <div className={css.dialogDecorateCircle}>
|
|
|
- <img src={title.includes('新增') ? addIcon : editIcon} />
|
|
|
- </div>
|
|
|
- <span className={css.dialogDecorateIcon2} />
|
|
|
- </div>
|
|
|
-
|
|
|
- <form onSubmit={onSubmit} className={css.dialogForm}>
|
|
|
- <div className={css.dialogContent}>
|
|
|
- <Space direction='vertical' className='width-full'>
|
|
|
- {children}
|
|
|
- </Space>
|
|
|
- </div>
|
|
|
- <ModalBtnGroup isLoading={isLoading} onClose={onClose} />
|
|
|
- </form>
|
|
|
- </section>
|
|
|
- </ReactModal>
|
|
|
- );
|
|
|
-};
|
|
|
-
|
|
|
-export default Modal;
|
|
|
-export {
|
|
|
- ModalBtnGroup,
|
|
|
-};
|
|
|
-export type {ReactModalStyle};
|
|
|
+export {default as ModalBtnGroup} from './BtnGroup';
|
|
|
export {default as PageModal} from './PageModal';
|
|
|
+export {default as Modal} from './Modal';
|