From 93ddc0d0168d6ea7716550ce7ef8b7ccc230f875 Mon Sep 17 00:00:00 2001 From: cipchk Date: Fri, 21 Jul 2023 23:03:25 +0800 Subject: [PATCH 1/2] feat(theme:modal): support size support percentage --- packages/theme/src/services/modal/index.en-US.md | 2 +- packages/theme/src/services/modal/index.zh-CN.md | 2 +- packages/theme/src/services/modal/modal.helper.ts | 8 +++++--- packages/theme/src/services/modal/modal.spec.ts | 8 ++++++++ 4 files changed, 15 insertions(+), 5 deletions(-) diff --git a/packages/theme/src/services/modal/index.en-US.md b/packages/theme/src/services/modal/index.en-US.md index e1acdc51b..18ce61aa2 100644 --- 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 index 3b21a2e32..51fa72ede 100644 --- 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 index 15a745d3d..f071dd687 100644 --- 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) { diff --git a/packages/theme/src/services/modal/modal.spec.ts b/packages/theme/src/services/modal/modal.spec.ts index ad36fb377..65ba9d9ee 100644 --- 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('.ant-modal')?.style.width; + expect(width).toBe('10%'); + })); }); }); From 17c279ca9132d483a93361115001c9a80758dc87 Mon Sep 17 00:00:00 2001 From: cipchk Date: Fri, 21 Jul 2023 23:10:49 +0800 Subject: [PATCH 2/2] chore: code style --- packages/theme/src/services/modal/modal.helper.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/theme/src/services/modal/modal.helper.ts b/packages/theme/src/services/modal/modal.helper.ts index f071dd687..ce155caa1 100644 --- a/packages/theme/src/services/modal/modal.helper.ts +++ b/packages/theme/src/services/modal/modal.helper.ts @@ -123,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);