diff --git a/src/modal/__tests__/__snapshots__/modal.test.tsx.snap b/src/modal/__tests__/__snapshots__/modal.test.tsx.snap
index 6a7bce918..c1df09f75 100644
--- a/src/modal/__tests__/__snapshots__/modal.test.tsx.snap
+++ b/src/modal/__tests__/__snapshots__/modal.test.tsx.snap
@@ -17,7 +17,7 @@ exports[`Test Modal Component Should Match snapshot 1`] = `
aria-modal="true"
class="ant-modal dt-modal"
role="dialog"
- style="width: 640px;"
+ style="width: 520px;"
>
{
test
);
- expect(modal.query(container)?.style.width).toBe('640px');
+ expect(modal.query(container)?.style.width).toBe('520px');
// small size
rerender(
@@ -36,6 +36,14 @@ describe('Test Modal Component', () => {
);
expect(modal.query(container)?.style.width).toBe('400px');
+ // middle size
+ rerender(
+
+ test
+
+ );
+ expect(modal.query(container)?.style.width).toBe('640px');
+
// large size
rerender(
diff --git a/src/modal/components/modal/index.scss b/src/modal/components/modal/index.scss
index e45f80a94..0df691039 100644
--- a/src/modal/components/modal/index.scss
+++ b/src/modal/components/modal/index.scss
@@ -1,13 +1,25 @@
-$modal-height: 600px;
-$modal-header: 55px;
-$modal-footer: 53px;
+$modal-max-height: 80vh;
.dt-modal {
- .ant-modal-body {
- max-height: calc($modal-height - $modal-header - $modal-footer);
- overflow-y: auto;
- }
- &-body {
- padding: 16px;
+ .ant-modal-content {
+ max-height: $modal-max-height;
+ display: flex;
+ flex-direction: column;
+ .ant-modal-body {
+ overflow: hidden;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ .dt-modal-body {
+ flex: 1;
+ padding: 16px 24px;
+ overflow-y: auto;
+ min-height: 0;
+ }
+ }
+ .ant-modal-header,
+ .ant-modal-footer {
+ flex: 0 1 auto;
+ }
}
}
diff --git a/src/modal/components/modal/index.tsx b/src/modal/components/modal/index.tsx
index 2e3e8fe54..65dd6a5a0 100644
--- a/src/modal/components/modal/index.tsx
+++ b/src/modal/components/modal/index.tsx
@@ -1,18 +1,20 @@
import React from 'react';
import { Alert, type AlertProps, Modal, type ModalProps } from 'antd';
+import classNames from 'classnames';
import { omit } from 'lodash';
import './index.scss';
export interface IModalProps extends ModalProps {
- size?: 'small' | 'default' | 'large';
+ size?: 'small' | 'default' | 'middle' | 'large';
banner?: AlertProps['message'] | Omit;
}
const getWidthFromSize = (size: IModalProps['size']) => {
if (size === 'small') return 400;
+ if (size === 'middle') return 640;
if (size === 'large') return 900;
- return 640;
+ return 520;
};
const isValidBanner = (banner: IModalProps['banner']): banner is AlertProps['message'] => {
@@ -26,13 +28,14 @@ export default function InternalModal({
size = 'default',
children,
width,
+ className,
...rest
}: IModalProps) {
const finalWidth = width ?? getWidthFromSize(size);
return (
setVisible(false)}
onOk={() => setVisible(false)}
@@ -22,7 +22,7 @@ export default function Basic() {
>
);
diff --git a/src/modal/demos/basic/size.tsx b/src/modal/demos/basic/size.tsx
index 57727e05e..8035535a7 100644
--- a/src/modal/demos/basic/size.tsx
+++ b/src/modal/demos/basic/size.tsx
@@ -26,7 +26,16 @@ export default function Size() {
setSize('default');
}}
>
- 正常尺寸
+ 默认尺寸
+
+