Skip to content

Commit 3c6ed6d

Browse files
author
yjj02304339
committed
feat(module:modal): support global nzCentered configuration
1 parent b0a4287 commit 3c6ed6d

9 files changed

Lines changed: 57 additions & 8 deletions

File tree

‎components/core/config/config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -235,6 +235,7 @@ export interface ModalConfig {
235235
nzMaskClosable?: boolean;
236236
nzCloseOnNavigation?: boolean;
237237
nzDirection?: Direction;
238+
nzCentered?: boolean;
238239
}
239240

240241
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: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ export class NzModalComponent<T extends ModalOptions = NzSafeAny, R = NzSafeAny>
5353
@Input({ transform: booleanAttribute }) nzMask?: boolean;
5454
@Input({ transform: booleanAttribute }) nzMaskClosable?: boolean;
5555
@Input({ transform: booleanAttribute }) nzCloseOnNavigation?: boolean;
56+
@Input({ transform: booleanAttribute }) nzCentered?: boolean;
5657
@Input({ transform: booleanAttribute }) nzVisible: boolean = false;
5758
@Input({ transform: booleanAttribute }) nzClosable: boolean = true;
5859
@Input({ transform: booleanAttribute }) nzOkLoading: boolean = false;
@@ -61,7 +62,6 @@ export class NzModalComponent<T extends ModalOptions = NzSafeAny, R = NzSafeAny>
6162
@Input({ transform: booleanAttribute }) nzCancelLoading: boolean = false;
6263
@Input({ transform: booleanAttribute }) nzKeyboard: boolean = true;
6364
@Input({ transform: booleanAttribute }) nzNoAnimation = false;
64-
@Input({ transform: booleanAttribute }) nzCentered = false;
6565
@Input({ transform: booleanAttribute }) nzDraggable = false;
6666
@Input() nzContent?: string | TemplateRef<{}> | Type<T>;
6767
@Input() nzFooter?: string | TemplateRef<{}> | Array<ModalButtonOptions<T>> | null;

‎components/modal/modal.service.ts‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -91,8 +91,12 @@ export class NzModalService implements OnDestroy {
9191
}
9292

9393
private open<T, D, R>(componentOrTemplateRef: ContentType<T>, config?: ModalOptions<T, D, R>): NzModalRef<T, R> {
94+
const globalConfig: NzSafeAny = this.nzConfigService.getConfigForComponent(NZ_CONFIG_MODULE_NAME) || {};
95+
if (config) {
96+
config.nzCentered = getValueWithConfig(config.nzCentered, globalConfig.nzCentered, false);
97+
}
9498
const configMerged = applyConfigDefaults(config || {}, new ModalOptions());
95-
const overlayRef = this.createOverlay(configMerged);
99+
const overlayRef = this.createOverlay(configMerged, globalConfig);
96100
const modalContainer = this.attachModalContainer(overlayRef, configMerged);
97101
const modalRef = this.attachModalContent<T, D, R>(componentOrTemplateRef, modalContainer, overlayRef, configMerged);
98102
modalContainer.modalRef = modalRef;
@@ -126,8 +130,7 @@ export class NzModalService implements OnDestroy {
126130
}
127131
}
128132

129-
private createOverlay(config: ModalOptions): OverlayRef {
130-
const globalConfig: NzSafeAny = this.nzConfigService.getConfigForComponent(NZ_CONFIG_MODULE_NAME) || {};
133+
private createOverlay(config: ModalOptions, globalConfig: NzSafeAny): OverlayRef {
131134
const overlayConfig = new OverlayConfig({
132135
hasBackdrop: true,
133136
scrollStrategy: this.overlay.scrollStrategies.block(),

‎components/modal/modal.spec.ts‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -506,6 +506,45 @@ 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+
let modal = overlayContainerElement.querySelector('nz-modal-container') as HTMLElement;
519+
expect(modal.classList).withContext('should use global config').toContain('ant-modal-centered');
520+
521+
configService.set('modal', { nzCentered: false });
522+
fixture.detectChanges();
523+
524+
modal = overlayContainerElement.querySelector('nz-modal-container') as HTMLElement;
525+
expect(modal.classList)
526+
.withContext('should not contain class when global config changed')
527+
.not.toContain('ant-modal-centered');
528+
529+
modalRef.close();
530+
const modalRef2 = modalService.create({
531+
nzContent: TestWithModalContentComponent,
532+
nzCentered: true
533+
});
534+
535+
fixture.detectChanges();
536+
537+
modal = overlayContainerElement.querySelector('nz-modal-container') as HTMLElement;
538+
expect(modal.classList)
539+
.withContext('should use explicit setting even if global config is different')
540+
.toContain('ant-modal-centered');
541+
542+
configService.set('modal', { nzCentered: false });
543+
modalRef2.close();
544+
fixture.detectChanges();
545+
flush();
546+
}));
547+
509548
it('nzMask work', fakeAsync(() => {
510549
configService.set('modal', { nzMask: false });
511550

0 commit comments

Comments
 (0)