fix(modal): improve modal's size (#452)

* feat(modal): improve modal's size and calc maxHeight for modal's body

Author: mortalYoung

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;"
       >
         <div
           aria-hidden="true"

src/modal/__tests__/modal.test.tsx

@@ -26,7 +26,7 @@ describe('Test Modal Component', () => {
                 test
             </Modal>
         );
-        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(
+            <Modal visible title="title" getContainer={false} size="middle">
+                test
+            </Modal>
+        );
+        expect(modal.query(container)?.style.width).toBe('640px');
+
         // large size
         rerender(
             <Modal visible title="title" getContainer={false} size="large">

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;
+        }
     }
 }

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<AlertProps, 'banner'>;
 }
 
 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 (
         <Modal
-            className="dt-modal"
+            className={classNames('dt-modal', className)}
             bodyStyle={{ padding: 0, ...bodyStyle }}
             width={finalWidth}
             {...rest}

src/modal/demos/basic/basic.tsx

@@ -8,7 +8,7 @@ export default function Basic() {
     return (
         <>
             <Modal
-                title="最大高度限制 600px"
+                title="最大高度限制"
                 visible={visible}
                 onCancel={() => setVisible(false)}
                 onOk={() => setVisible(false)}
@@ -22,7 +22,7 @@ export default function Basic() {
                 </ul>
             </Modal>
             <Button type="primary" onClick={() => setVisible(true)}>
-                最大高度限制 600px
+                最大高度限制
             </Button>
         </>
     );

src/modal/demos/basic/size.tsx

@@ -26,7 +26,16 @@ export default function Size() {
                         setSize('default');
                     }}
                 >
-                    正常尺寸
+                    默认尺寸
+                </Button>
+                <Button
+                    type="primary"
+                    onClick={() => {
+                        setVisible(true);
+                        setSize('middle');
+                    }}
+                >
+                    中等尺寸
                 </Button>
                 <Button
                     type="primary"

src/modal/index.md

@@ -10,7 +10,7 @@ toc: content
 
 ## 示例
 
-<code src="./demos/basic/basic.tsx" title="高度限制 600px"></code>
+<code src="./demos/basic/basic.tsx" title="最大高度限制"></code>
 <code src="./demos/basic/size.tsx" title="尺寸"></code>
 <code src="./demos/basic/banner.tsx" title="支持 banner"></code>
 <code src="./demos/basic/bannerProps.tsx" title="支持传 banner 的 Props 属性"></code>
@@ -21,10 +21,10 @@ toc: content
 
 [AlertProps](https://4x-ant-design.antgroup.com/components/alert-cn/#API)
 
-| 参数   | 说明 | 类型                              | 默认值    |
-| ------ | ---- | --------------------------------- | --------- |
-| size   | 尺寸 | `'small' \| 'default' \| 'large'` | `default` |
-| banner | 提示 | `React.ReactNode \| AlertProps`   |           |
+| 参数   | 说明 | 类型                                          | 默认值    |
+| ------ | ---- | --------------------------------------------- | --------- |
+| size   | 尺寸 | `'small' \| 'default' \| 'middle' \| 'large'` | `default` |
+| banner | 提示 | `React.ReactNode \| AlertProps`               |           |
 
 :::info
 其余参数继承 antd4.x 的 [Modal](https://4x.ant.design/components/modal-cn/#API)