feat(theme:modal): add size support percentage (#1626)

ng-alain · Aug 28, 2023 · 8b52a08 · 8b52a08
1 parent 96a3be6
commit 8b52a08
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 9 deletions.
diff --git a/packages/theme/src/services/modal/index.en-US.md b/packages/theme/src/services/modal/index.en-US.md
@@ -50,7 +50,7 @@ Your body content
 
 | Property | Description  | Type  | Default   |
 | --- | --- | --- | --- |
-| `size` | Specify modal size | `sm,md,lg,xl,number` | `lg` |
+| `size` | Specify modal size | `sm,md,lg,xl,number,string` | `lg` |
 | `exact` | Exact match return value, default is `true`, If the return value is not null (`null` or `undefined`) is considered successful, otherwise it is considered error. | `boolean` | `true` |
 | `includeTabs` | Whether to wrap the tab page | `boolean` | `false` |
 | `drag` | Drag | `boolean, ModalHelperDragOptions` | - |

diff --git a/packages/theme/src/services/modal/index.zh-CN.md b/packages/theme/src/services/modal/index.zh-CN.md
@@ -50,7 +50,7 @@ Your body content
 
 | 名称 | 类型 | 默认值 | 描述 |
 | --- | --- | --- | --- |
-| `size` | 指定对话框大小 | `sm,md,lg,xl,number` | `lg` |
+| `size` | 指定对话框大小 | `sm,md,lg,xl,number,string` | `lg` |
 | `exact` | 是否精准（默认：`true`），若返回值非空值（`null`或`undefined`）视为成功，否则视为错误 | `boolean` | `true` |
 | `includeTabs` | 是否包裹标签页 | `boolean` | `false` |
 | `drag` | 支持拖动 | `boolean, ModalHelperDragOptions` | - |

diff --git a/packages/theme/src/services/modal/modal.helper.ts b/packages/theme/src/services/modal/modal.helper.ts
@@ -8,8 +8,8 @@ import type { NzSafeAny } from 'ng-zorro-antd/core/types';
 import { ModalOptions, NzModalService } from 'ng-zorro-antd/modal';
 
 export interface ModalHelperOptions {
-  /** 大小；例如：lg、600，默认：`lg` */
-  size?: 'sm' | 'md' | 'lg' | 'xl' | '' | number;
+  /** 大小；例如：lg、600、80%，默认：`lg` */
+  size?: 'sm' | 'md' | 'lg' | 'xl' | '' | number | string;
   /** 对话框 [ModalOptions](https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/components/modal/modal-types.ts) 参数 */
   modalOptions?: ModalOptions;
   /** 是否精准（默认：`true`），若返回值非空值（`null`或`undefined`）视为成功，否则视为错误 */
@@ -100,8 +100,10 @@ export class ModalHelper {
       if (size) {
         if (typeof size === 'number') {
           width = `${size}px`;
-        } else {
+        } else if (['sm', 'md', 'lg', 'xl'].includes(size)) {
           cls = `modal-${size}`;
+        } else {
+          width = size;
         }
       }
       if (includeTabs) {
@@ -121,14 +123,14 @@ export class ModalHelper {
         };
         cls += ` ${this.dragClsPrefix} ${dragWrapCls}`;
       }
-      const defaultOptions: ModalOptions = {
+      const subject = this.srv.create({
         nzWrapClassName: cls,
         nzContent: comp,
         nzWidth: width ? width : undefined,
         nzFooter: null,
-        nzData: params
-      };
-      const subject = this.srv.create({ ...defaultOptions, ...modalOptions });
+        nzData: params,
+        ...modalOptions
+      });
       // 保留 nzComponentParams 原有风格，但依然可以通过 @Inject(NZ_MODAL_DATA) 获取
       if (useNzData !== true) {
         Object.assign(subject.componentInstance, params);

diff --git a/packages/theme/src/services/modal/modal.spec.ts b/packages/theme/src/services/modal/modal.spec.ts
@@ -145,6 +145,14 @@ describe('theme: ModalHelper', () => {
       tick(1000);
       fixture.detectChanges();
     }));
+    it('should be 80% size', fakeAsync(() => {
+      modal.create(TestModalComponent, { ret: 'true' }, { size: '10%' }).subscribe();
+      fixture.detectChanges();
+      tick(1000);
+      fixture.detectChanges();
+      const width = document.querySelector<HTMLElement>('.ant-modal')?.style.width;
+      expect(width).toBe('10%');
+    }));
   });
 });