Skip to content

Commit

Permalink
fix(module:modal): some cases there is no changes detected
Browse files Browse the repository at this point in the history 
close NG-ZORRO#5328, close NG-ZORRO#5287
  • Loading branch information
@hsuanxyz
hsuanxyz committed May 26, 2020
1 parent 7ad64b8 commit ee0ff42
Show file tree
Hide file tree
Showing 6 changed files with 115 additions and 84 deletions.
8 changes: 3 additions & 5 deletions components/modal/modal-confirm-container.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/

import { FocusTrapFactory } from '@angular/cdk/a11y';
import { ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';
import { OverlayRef } from '@angular/cdk/overlay';
import { CdkPortalOutlet } from '@angular/cdk/portal';
import { DOCUMENT } from '@angular/common';
Expand All @@ -17,7 +17,6 @@ import {
ElementRef,
EventEmitter,
Inject,
NgZone,
Optional,
Output,
Renderer2,
Expand Down Expand Up @@ -117,17 +116,16 @@ export class NzModalConfirmContainerComponent extends BaseModalContainer {
constructor(
private i18n: NzI18nService,
elementRef: ElementRef,
focusTrapFactory: FocusTrapFactory,
focusTrapFactory: ConfigurableFocusTrapFactory,
cdr: ChangeDetectorRef,
render: Renderer2,
zone: NgZone,
overlayRef: OverlayRef,
nzConfigService: NzConfigService,
public config: ModalOptions,
@Optional() @Inject(DOCUMENT) document: NzSafeAny,
@Optional() @Inject(ANIMATION_MODULE_TYPE) animationType: string
) {
super(elementRef, focusTrapFactory, cdr, render, zone, overlayRef, nzConfigService, config, document, animationType);
super(elementRef, focusTrapFactory, cdr, render, overlayRef, nzConfigService, config, document, animationType);
this.i18n.localeChange.pipe(takeUntil(this.destroy$)).subscribe(() => {
this.locale = this.i18n.getLocaleData('Modal');
});
Expand Down
19 changes: 4 additions & 15 deletions components/modal/modal-container.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,11 @@
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/

import { FocusTrapFactory } from '@angular/cdk/a11y';
import { ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';
import { OverlayRef } from '@angular/cdk/overlay';
import { CdkPortalOutlet } from '@angular/cdk/portal';
import { DOCUMENT } from '@angular/common';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
ElementRef,
Inject,
NgZone,
Optional,
Renderer2,
ViewChild
} from '@angular/core';
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, Inject, Optional, Renderer2, ViewChild } from '@angular/core';
import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
import { NzConfigService } from 'ng-zorro-antd/core/config';
import { NzSafeAny } from 'ng-zorro-antd/core/types';
Expand Down Expand Up @@ -79,16 +69,15 @@ export class NzModalContainerComponent extends BaseModalContainer {
@ViewChild('modalElement', { static: true }) modalElementRef!: ElementRef<HTMLDivElement>;
constructor(
elementRef: ElementRef,
focusTrapFactory: FocusTrapFactory,
focusTrapFactory: ConfigurableFocusTrapFactory,
cdr: ChangeDetectorRef,
render: Renderer2,
zone: NgZone,
overlayRef: OverlayRef,
nzConfigService: NzConfigService,
public config: ModalOptions,
@Optional() @Inject(DOCUMENT) document: NzSafeAny,
@Optional() @Inject(ANIMATION_MODULE_TYPE) animationType: string
) {
super(elementRef, focusTrapFactory, cdr, render, zone, overlayRef, nzConfigService, config, document, animationType);
super(elementRef, focusTrapFactory, cdr, render, overlayRef, nzConfigService, config, document, animationType);
}
}
106 changes: 53 additions & 53 deletions components/modal/modal-container.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,10 @@
*/

import { AnimationEvent } from '@angular/animations';
import { FocusTrap, FocusTrapFactory } from '@angular/cdk/a11y';
import { ConfigurableFocusTrapFactory, FocusTrap } from '@angular/cdk/a11y';
import { OverlayRef } from '@angular/cdk/overlay';
import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
import { ChangeDetectorRef, ComponentRef, ElementRef, EmbeddedViewRef, EventEmitter, NgZone, OnDestroy, Renderer2 } from '@angular/core';
import { ChangeDetectorRef, ComponentRef, ElementRef, EmbeddedViewRef, EventEmitter, OnDestroy, Renderer2 } from '@angular/core';
import { NzConfigService } from 'ng-zorro-antd/core/config';
import { NzSafeAny } from 'ng-zorro-antd/core/types';
import { getElementOffset } from 'ng-zorro-antd/core/util';
Expand All @@ -34,7 +34,6 @@ export class BaseModalContainer extends BasePortalOutlet implements OnDestroy {
containerClick = new EventEmitter<void>();
cancelTriggered = new EventEmitter<void>();
okTriggered = new EventEmitter<void>();
onDestroy = new EventEmitter<void>();

state: 'void' | 'enter' | 'exit' = 'enter';
document: Document;
Expand All @@ -60,10 +59,9 @@ export class BaseModalContainer extends BasePortalOutlet implements OnDestroy {

constructor(
protected elementRef: ElementRef,
protected focusTrapFactory: FocusTrapFactory,
protected focusTrapFactory: ConfigurableFocusTrapFactory,
public cdr: ChangeDetectorRef,
protected render: Renderer2,
protected zone: NgZone,
protected overlayRef: OverlayRef,
protected nzConfigService: NzConfigService,
public config: ModalOptions,
Expand Down Expand Up @@ -139,6 +137,10 @@ export class BaseModalContainer extends BasePortalOutlet implements OnDestroy {
}

private savePreviouslyFocusedElement(): void {
if (!this.focusTrap) {
this.focusTrap = this.focusTrapFactory.create(this.elementRef.nativeElement);
}

if (this.document) {
this.elementFocusedBeforeModalWasOpened = this.document.activeElement as HTMLElement;
if (this.elementRef.nativeElement.focus) {
Expand All @@ -150,10 +152,6 @@ export class BaseModalContainer extends BasePortalOutlet implements OnDestroy {
private trapFocus(): void {
const element = this.elementRef.nativeElement;

if (!this.focusTrap) {
this.focusTrap = this.focusTrapFactory.create(element);
}

if (this.config.nzAutofocus) {
this.focusTrap.focusInitialElementWhenReady().then();
} else {
Expand Down Expand Up @@ -186,56 +184,60 @@ export class BaseModalContainer extends BasePortalOutlet implements OnDestroy {
if (this.animationDisabled()) {
return;
}
this.zone.runOutsideAngular(() => {
// Make sure to set the `TransformOrigin` style before set the modelElement's class names
this.setModalTransformOrigin();
const modalElement = this.modalElementRef.nativeElement;
const backdropElement = this.overlayRef.backdropElement;
this.render.addClass(modalElement, ZOOM_CLASS_NAME_MAP.enter);
this.render.addClass(modalElement, ZOOM_CLASS_NAME_MAP.enterActive);
this.render.addClass(backdropElement, FADE_CLASS_NAME_MAP.enter);
this.render.addClass(backdropElement, FADE_CLASS_NAME_MAP.enterActive);
});
// Make sure to set the `TransformOrigin` style before set the modelElement's class names
this.setModalTransformOrigin();
const modalElement = this.modalElementRef.nativeElement;
const backdropElement = this.overlayRef.backdropElement;
modalElement.classList.add(ZOOM_CLASS_NAME_MAP.enter);
modalElement.classList.add(ZOOM_CLASS_NAME_MAP.enterActive);
if (backdropElement) {
backdropElement.classList.add(FADE_CLASS_NAME_MAP.enter);
backdropElement.classList.add(FADE_CLASS_NAME_MAP.enterActive);
}
}

private setExitAnimationClass(): void {
this.zone.runOutsideAngular(() => {
const modalElement = this.modalElementRef.nativeElement;
const backdropElement = this.overlayRef.backdropElement;
const modalElement = this.modalElementRef.nativeElement;

modalElement.classList.add(ZOOM_CLASS_NAME_MAP.leave);
modalElement.classList.add(ZOOM_CLASS_NAME_MAP.leaveActive);

this.setMaskExitAnimationClass();
}

if (this.animationDisabled()) {
private setMaskExitAnimationClass(force: boolean = false): void {
const backdropElement = this.overlayRef.backdropElement;
if (backdropElement) {
if (this.animationDisabled() || force) {
// https://github.com/angular/components/issues/18645
this.render.removeClass(backdropElement, MODAL_MASK_CLASS_NAME);
backdropElement.classList.remove(MODAL_MASK_CLASS_NAME);
return;
}

this.render.addClass(modalElement, ZOOM_CLASS_NAME_MAP.leave);
this.render.addClass(modalElement, ZOOM_CLASS_NAME_MAP.leaveActive);
this.render.addClass(backdropElement, FADE_CLASS_NAME_MAP.leave);
this.render.addClass(backdropElement, FADE_CLASS_NAME_MAP.leaveActive);
});
backdropElement.classList.add(FADE_CLASS_NAME_MAP.leave);
backdropElement.classList.add(FADE_CLASS_NAME_MAP.leaveActive);
}
}

private cleanAnimationClass(): void {
if (this.animationDisabled()) {
return;
}
this.zone.runOutsideAngular(() => {
const backdropElement = this.overlayRef.backdropElement;
const modalElement = this.modalElementRef.nativeElement;
this.render.removeClass(modalElement, ZOOM_CLASS_NAME_MAP.enter);
this.render.removeClass(modalElement, ZOOM_CLASS_NAME_MAP.enterActive);
this.render.removeClass(modalElement, ZOOM_CLASS_NAME_MAP.leave);
this.render.removeClass(modalElement, ZOOM_CLASS_NAME_MAP.leaveActive);
this.render.removeClass(backdropElement, FADE_CLASS_NAME_MAP.enter);
this.render.removeClass(backdropElement, FADE_CLASS_NAME_MAP.enterActive);
});
const backdropElement = this.overlayRef.backdropElement;
const modalElement = this.modalElementRef.nativeElement;
if (backdropElement) {
backdropElement.classList.remove(FADE_CLASS_NAME_MAP.enter);
backdropElement.classList.remove(FADE_CLASS_NAME_MAP.enterActive);
}
modalElement.classList.remove(ZOOM_CLASS_NAME_MAP.enter);
modalElement.classList.remove(ZOOM_CLASS_NAME_MAP.enterActive);
modalElement.classList.remove(ZOOM_CLASS_NAME_MAP.leave);
modalElement.classList.remove(ZOOM_CLASS_NAME_MAP.leaveActive);
}

private bindBackdropStyle(): void {
this.zone.runOutsideAngular(() => {
bindBackdropStyle(): void {
const backdropElement = this.overlayRef.backdropElement;
if (backdropElement) {
if (this.oldMaskStyle) {
const backdropElement = this.overlayRef.backdropElement;
const styles = this.oldMaskStyle as { [key: string]: string };
Object.keys(styles).forEach(key => {
this.render.removeStyle(backdropElement, key);
Expand All @@ -244,14 +246,13 @@ export class BaseModalContainer extends BasePortalOutlet implements OnDestroy {
}

if (typeof this.config.nzMaskStyle === 'object' && Object.keys(this.config.nzMaskStyle).length) {
const backdropElement = this.overlayRef.backdropElement;
const styles: { [key: string]: string } = { ...this.config.nzMaskStyle };
Object.keys(styles).forEach(key => {
this.render.setStyle(backdropElement, key, styles[key]);
});
this.oldMaskStyle = styles;
}
});
}
}

/**
Expand Down Expand Up @@ -286,17 +287,16 @@ export class BaseModalContainer extends BasePortalOutlet implements OnDestroy {

updateMaskClassname(): void {
const backdropElement = this.overlayRef.backdropElement;
if (this.showMask) {
this.render.addClass(backdropElement, MODAL_MASK_CLASS_NAME);
} else {
this.render.removeClass(backdropElement, MODAL_MASK_CLASS_NAME);
if (backdropElement) {
if (this.showMask) {
backdropElement.classList.add(MODAL_MASK_CLASS_NAME);
} else {
backdropElement.classList.remove(MODAL_MASK_CLASS_NAME);
}
}
}

onAnimationDone(event: AnimationEvent): void {
if (event.toState === 'void') {
return;
}
if (event.toState === 'enter') {
this.setContainer();
this.trapFocus();
Expand Down Expand Up @@ -324,7 +324,7 @@ export class BaseModalContainer extends BasePortalOutlet implements OnDestroy {
}

ngOnDestroy(): void {
this.onDestroy.emit();
this.setMaskExitAnimationClass(true);
this.destroy$.next();
this.destroy$.complete();
}
Expand Down
16 changes: 7 additions & 9 deletions components/modal/modal-ref.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { OverlayRef } from '@angular/cdk/overlay';
import { EventEmitter } from '@angular/core';
import { NzSafeAny } from 'ng-zorro-antd/core/types';
import { isPromise } from 'ng-zorro-antd/core/util';
import { merge, Subject } from 'rxjs';
import { Subject } from 'rxjs';
import { filter, take } from 'rxjs/operators';

import { BaseModalContainer } from './modal-container';
Expand Down Expand Up @@ -51,17 +51,14 @@ export class NzModalRef<T = NzSafeAny, R = NzSafeAny> implements NzModalLegacyAP
}
});

merge(
containerInstance.onDestroy,
containerInstance.animationStateChanged.pipe(
containerInstance.animationStateChanged
.pipe(
filter(event => event.phaseName === 'done' && event.toState === 'exit'),
take(1)
)
)
.pipe(take(1))
.subscribe(() => {
clearTimeout(this.closeTimeout);
this.finishDialogClose();
this._finishDialogClose();
});

containerInstance.containerClick.pipe(take(1)).subscribe(() => {
Expand Down Expand Up @@ -143,7 +140,7 @@ export class NzModalRef<T = NzSafeAny, R = NzSafeAny> implements NzModalLegacyAP
.subscribe(event => {
this.overlayRef.detachBackdrop();
this.closeTimeout = setTimeout(() => {
this.finishDialogClose();
this._finishDialogClose();
}, event.totalTime + 100);
});

Expand All @@ -153,6 +150,7 @@ export class NzModalRef<T = NzSafeAny, R = NzSafeAny> implements NzModalLegacyAP

updateConfig(config: ModalOptions): void {
Object.assign(this.config, config);
this.containerInstance.bindBackdropStyle();
this.containerInstance.cdr.markForCheck();
}

Expand Down Expand Up @@ -199,7 +197,7 @@ export class NzModalRef<T = NzSafeAny, R = NzSafeAny> implements NzModalLegacyAP
}
}

private finishDialogClose(): void {
_finishDialogClose(): void {
this.state = NzModalState.CLOSED;
this.overlayRef.dispose();
}
Expand Down
7 changes: 6 additions & 1 deletion components/modal/modal.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
EventEmitter,
Input,
OnChanges,
OnDestroy,
Output,
SimpleChanges,
TemplateRef,
Expand All @@ -41,7 +42,7 @@ import { getConfigFromComponent } from './utils';
template: ` <ng-template><ng-content></ng-content></ng-template> `,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class NzModalComponent<T = NzSafeAny, R = NzSafeAny> implements OnChanges, NzModalLegacyAPI<T, R> {
export class NzModalComponent<T = NzSafeAny, R = NzSafeAny> implements OnChanges, NzModalLegacyAPI<T, R>, OnDestroy {
static ngAcceptInputType_nzMask: BooleanInput;
static ngAcceptInputType_nzMaskClosable: BooleanInput;
static ngAcceptInputType_nzCloseOnNavigation: BooleanInput;
Expand Down Expand Up @@ -206,4 +207,8 @@ export class NzModalComponent<T = NzSafeAny, R = NzSafeAny> implements OnChanges
}
}
}

ngOnDestroy(): void {
this.modalRef?._finishDialogClose();
}
}
Loading

0 comments on commit ee0ff42

Please sign in to comment.