Skip to content

Commit d959488

Browse files
author
yjj02304339
committed
feat(module:modal): support global nzCentered configuration
1 parent 75589bd commit d959488

9 files changed

Lines changed: 35 additions & 9 deletions

File tree

‎components/core/config/config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -238,6 +238,7 @@ export interface ModalConfig {
238238
nzMaskClosable?: boolean;
239239
nzCloseOnNavigation?: boolean;
240240
nzDirection?: Direction;
241+
nzCentered?: boolean;
241242
}
242243

243244
export interface NotificationConfig extends MessageConfig {

‎components/modal/doc/index.en-US.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ different.
3131
| `nzAfterClose` | Specify a EventEmitter that will be emitted when modal is closed completely (Can listen for parameters passed in the close/destroy method) | `EventEmitter` | - |
3232
| `nzBodyStyle` | Body style for modal body element. Such as height, padding etc. | `object` | - |
3333
| `nzCancelText` | Text of the Cancel button. <i>Set to null to show no cancel button (this value is invalid if the nzFooter parameter is used in normal mode)</i> | `string` | `'Cancel'` |
34-
| `nzCentered` | Centered Modal | `boolean` | `false` |
34+
| `nzCentered` | Centered Modal | `boolean` | `false` | ✅ |
3535
| `nzClosable` | Whether a close (x) button is visible on top right of the modal dialog or not. <i>Invalid value in confirm box mode (default will be hidden)</i> | `boolean` | `true` |
3636
| `nzOkLoading` | Whether to apply loading visual effect for OK button or not | `boolean` | `false` |
3737
| `nzCancelLoading` | Whether to apply loading visual effect for Cancel button or not | `boolean` | `false` |

‎components/modal/doc/index.zh-CN.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ description: 展示一个对话框，提供标题、内容区、操作区。
2929
| `nzAfterClose` | Modal 完全关闭后的回调，可监听 close/destroy 方法传入的参数 | `EventEmitter` | - |
3030
| `nzBodyStyle` | Modal body 样式 | `object` | - |
3131
| `nzCancelText` | 取消按钮文字。<i>设为 null 表示不显示取消按钮（若在普通模式下使用了 nzFooter 参数，则该值无效）</i> | `string` | `'取消'` |
32-
| `nzCentered` | 垂直居中展示 Modal | `boolean` | `false` |
32+
| `nzCentered` | 垂直居中展示 Modal | `boolean` | `false` | ✅ |
3333
| `nzClosable` | 是否显示右上角的关闭按钮。<i>确认框模式下该值无效（默认会被隐藏）</i> | `boolean` | `true` |
3434
| `nzOkLoading` | 确定按钮 loading | `boolean` | `false` |
3535
| `nzCancelLoading` | 取消按钮 loading | `boolean` | `false` |

‎components/modal/modal-container.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ import { NzModalTitleComponent } from './modal-title.component';
6565
role: 'dialog',
6666
'[class]': 'config.nzWrapClassName ? "ant-modal-wrap " + config.nzWrapClassName : "ant-modal-wrap"',
6767
'[class.ant-modal-wrap-rtl]': `dir === 'rtl'`,
68-
'[class.ant-modal-centered]': 'config.nzCentered',
68+
'[class.ant-modal-centered]': 'centered',
6969
'[style.zIndex]': 'config.nzZIndex',
7070
'[@.disabled]': 'config.nzNoAnimation',
7171
'[@modalContainer]': 'state',

‎components/modal/modal-container.directive.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,12 @@ export class BaseModalContainerComponent extends BasePortalOutlet {
8181
return !!getValueWithConfig<boolean>(this.config.nzMaskClosable, defaultConfig.nzMaskClosable, true);
8282
}
8383

84+
get centered(): boolean {
85+
const defaultConfig: NzSafeAny = this.nzConfigService.getConfigForComponent(NZ_CONFIG_MODULE_NAME) || {};
86+
87+
return !!getValueWithConfig<boolean>(this.config.nzCentered, defaultConfig.nzCentered, false);
88+
}
89+
8490
constructor() {
8591
super();
8692
this.dir = this.overlayRef.getDirection();

‎components/modal/modal-types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export interface StyleObjectLike {
2222
const noopFun = () => void 0;
2323

2424
export class ModalOptions<T = NzSafeAny, D = NzSafeAny, R = NzSafeAny> {
25-
nzCentered?: boolean = false;
25+
nzCentered?: boolean;
2626
nzClosable?: boolean = true;
2727
nzOkLoading?: boolean = false;
2828
nzOkDisabled?: boolean = false;

‎components/modal/modal.component.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
2525
import { Observable } from 'rxjs';
2626

2727
import { NzButtonType } from 'ng-zorro-antd/button';
28+
import { WithConfig } from 'ng-zorro-antd/core/config';
2829
import { NzSafeAny } from 'ng-zorro-antd/core/types';
2930

3031
import { NzModalContentDirective } from './modal-content.directive';
@@ -53,6 +54,7 @@ export class NzModalComponent<T extends ModalOptions = NzSafeAny, R = NzSafeAny>
5354
@Input({ transform: booleanAttribute }) nzMask?: boolean;
5455
@Input({ transform: booleanAttribute }) nzMaskClosable?: boolean;
5556
@Input({ transform: booleanAttribute }) nzCloseOnNavigation?: boolean;
57+
@Input({ transform: booleanAttribute }) @WithConfig() nzCentered?: boolean;
5658
@Input({ transform: booleanAttribute }) nzVisible: boolean = false;
5759
@Input({ transform: booleanAttribute }) nzClosable: boolean = true;
5860
@Input({ transform: booleanAttribute }) nzOkLoading: boolean = false;
@@ -61,7 +63,6 @@ export class NzModalComponent<T extends ModalOptions = NzSafeAny, R = NzSafeAny>
6163
@Input({ transform: booleanAttribute }) nzCancelLoading: boolean = false;
6264
@Input({ transform: booleanAttribute }) nzKeyboard: boolean = true;
6365
@Input({ transform: booleanAttribute }) nzNoAnimation = false;
64-
@Input({ transform: booleanAttribute }) nzCentered = false;
6566
@Input({ transform: booleanAttribute }) nzDraggable = false;
6667
@Input() nzContent?: string | TemplateRef<{}> | Type<T>;
6768
@Input() nzFooter?: string | TemplateRef<{}> | Array<ModalButtonOptions<T>> | null;

‎components/modal/modal.service.ts‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -96,8 +96,12 @@ export class NzModalService implements OnDestroy {
9696
}
9797

9898
private open<T, D, R>(componentOrTemplateRef: ContentType<T>, config?: ModalOptions<T, D, R>): NzModalRef<T, R> {
99+
const globalConfig: NzSafeAny = this.nzConfigService.getConfigForComponent(NZ_CONFIG_MODULE_NAME) || {};
100+
if (config) {
101+
config.nzCentered = getValueWithConfig(config.nzCentered, globalConfig.nzCentered, false);
102+
}
99103
const configMerged = applyConfigDefaults(config || {}, new ModalOptions());
100-
const overlayRef = this.createOverlay(configMerged);
104+
const overlayRef = this.createOverlay(configMerged, globalConfig);
101105
const modalContainer = this.attachModalContainer(overlayRef, configMerged);
102106
const modalRef = this.attachModalContent<T, D, R>(componentOrTemplateRef, modalContainer, overlayRef, configMerged);
103107
modalContainer.modalRef = modalRef;
@@ -131,9 +135,7 @@ export class NzModalService implements OnDestroy {
131135
}
132136
}
133137

134-
private createOverlay(config: ModalOptions): OverlayRef {
135-
const globalConfig: NzSafeAny = this.nzConfigService.getConfigForComponent(NZ_CONFIG_MODULE_NAME) || {};
136-
138+
private createOverlay(config: ModalOptions, globalConfig: NzSafeAny): OverlayRef {
137139
return createOverlayRef(this.injector, {
138140
hasBackdrop: true,
139141
scrollStrategy: createBlockScrollStrategy(this.injector),

‎components/modal/modal.spec.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -506,6 +506,22 @@ describe('NzModal', () => {
506506
flush();
507507
}));
508508

509+
it('should global config nzCentered work', fakeAsync(() => {
510+
configService.set('modal', { nzCentered: true });
511+
512+
const modalRef = modalService.create({
513+
nzContent: TestWithModalContentComponent
514+
});
515+
516+
fixture.detectChanges();
517+
518+
const modal = overlayContainerElement.querySelector('nz-modal-container') as HTMLElement;
519+
520+
expect(modal.classList).withContext('should use global config').toContain('ant-modal-centered');
521+
modalRef.close();
522+
flush();
523+
}));
524+
509525
it('nzMask work', fakeAsync(() => {
510526
configService.set('modal', { nzMask: false });
511527

0 commit comments

Comments
 (0)