-
Notifications
You must be signed in to change notification settings - Fork 3.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(module:modal): refactor the component (#4702)
* refactor(module:modal): refactor the modal service close #3652, close #4437, close #2749 * feat(module:modal): support autofocus close #3423, close #4126 * refactor(module:modal): refactor the modal component * chore: rename files * test(module:modal): add test case * test(module:modal): add test case * feat(module:modal): support nzCloseOnNavigation * feat(module:modal): support nzViewContainerRef close #4710 test(module:modal): add footer directive test test(module:modal): add callback test test(module:modal): add animation test test(module:modal): add classname and styles test test(module:modal): add footer component test test(module:modal): fix test test(module:modal): fix test test(module:modal): add confirm test test(module:modal): fix test test(module:modal): add component mode test chore: remove console test: fix ci test
- Loading branch information
Showing
36 changed files
with
3,259 additions
and
2,329 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| /** | ||
| * @license | ||
| * Copyright Alibaba.com All Rights Reserved. | ||
| * | ||
| * Use of this source code is governed by an MIT-style license that can be | ||
| * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE | ||
| */ | ||
|
|
||
| import { animate, AnimationTriggerMetadata, state, style, transition, trigger } from '@angular/animations'; | ||
|
|
||
| export const nzModalAnimations: { | ||
| readonly modalContainer: AnimationTriggerMetadata; | ||
| } = { | ||
| modalContainer: trigger('modalContainer', [ | ||
| state('void, exit', style({})), | ||
| state('enter', style({})), | ||
| transition('* => enter', animate('.24s', style({}))), | ||
| transition('* => void, * => exit', animate('.2s', style({}))) | ||
| ]) | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| /** | ||
| * @license | ||
| * Copyright Alibaba.com All Rights Reserved. | ||
| * | ||
| * Use of this source code is governed by an MIT-style license that can be | ||
| * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE | ||
| */ | ||
|
|
||
| import { ChangeDetectionStrategy, Component } from '@angular/core'; | ||
|
|
||
| import { ModalOptions } from './modal-types'; | ||
|
|
||
| @Component({ | ||
| selector: 'button[nz-modal-close]', | ||
| exportAs: 'NzModalCloseBuiltin', | ||
| template: ` | ||
| <span class="ant-modal-close-x"> | ||
| <ng-container *nzStringTemplateOutlet="config?.nzCloseIcon"> | ||
| <i nz-icon [nzType]="config?.nzCloseIcon" class="ant-modal-close-icon"></i> | ||
| </ng-container> | ||
| </span> | ||
| `, | ||
| host: { | ||
| class: 'ant-modal-close', | ||
| 'aria-label': 'Close' | ||
| }, | ||
| changeDetection: ChangeDetectionStrategy.OnPush | ||
| }) | ||
| export class NzModalCloseComponent { | ||
| constructor(public config: ModalOptions) {} | ||
| } |
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,154 @@ | ||
| /** | ||
| * @license | ||
| * Copyright Alibaba.com All Rights Reserved. | ||
| * | ||
| * Use of this source code is governed by an MIT-style license that can be | ||
| * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE | ||
| */ | ||
|
|
||
| import { FocusTrapFactory } from '@angular/cdk/a11y'; | ||
| import { OverlayRef } from '@angular/cdk/overlay'; | ||
| import { CdkPortalOutlet, ComponentPortal } from '@angular/cdk/portal'; | ||
| import { DOCUMENT } from '@angular/common'; | ||
| import { | ||
| ChangeDetectionStrategy, | ||
| ChangeDetectorRef, | ||
| Component, | ||
| ElementRef, | ||
| EventEmitter, | ||
| Inject, | ||
| NgZone, | ||
| OnDestroy, | ||
| Optional, | ||
| Output, | ||
| Renderer2, | ||
| ViewChild | ||
| } from '@angular/core'; | ||
| import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations'; | ||
|
|
||
| import { Subject } from 'rxjs'; | ||
| import { takeUntil } from 'rxjs/operators'; | ||
|
|
||
| import { NzI18nService } from 'ng-zorro-antd/i18n'; | ||
|
|
||
| import { nzModalAnimations } from './modal-animations'; | ||
| import { BaseModalContainer } from './modal-container'; | ||
| import { ModalOptions } from './modal-types'; | ||
|
|
||
| @Component({ | ||
| selector: 'nz-modal-confirm-container', | ||
| exportAs: 'nzModalConfirmContainer', | ||
| template: ` | ||
| <div | ||
| #modalElement | ||
| role="document" | ||
| class="ant-modal" | ||
| [class]="config.nzClassName" | ||
| [ngStyle]="config.nzStyle" | ||
| [style.width]="config?.nzWidth | nzToCssUnit" | ||
| > | ||
| <div class="ant-modal-content"> | ||
| <button *ngIf="config.nzClosable" nz-modal-close (click)="onCloseClick()"></button> | ||
| <div class="ant-modal-body" [ngStyle]="config.nzBodyStyle"> | ||
| <div class="ant-modal-confirm-body-wrapper"> | ||
| <div class="ant-modal-confirm-body"> | ||
| <i nz-icon [nzType]="config.nzIconType"></i> | ||
| <span class="ant-modal-confirm-title"> | ||
| <ng-container *nzStringTemplateOutlet="config.nzTitle"> | ||
| <span [innerHTML]="config.nzTitle"></span> | ||
| </ng-container> | ||
| </span> | ||
| <div class="ant-modal-confirm-content"> | ||
| <ng-template cdkPortalOutlet></ng-template> | ||
| <div *ngIf="isStringContent" [innerHTML]="config.nzContent"></div> | ||
| </div> | ||
| </div> | ||
| <div class="ant-modal-confirm-btns"> | ||
| <button | ||
| *ngIf="config.nzCancelText !== null" | ||
| [attr.cdkFocusInitial]="config.nzAutofocus === 'cancel'" | ||
| nz-button | ||
| (click)="onCancel()" | ||
| [nzLoading]="config.nzCancelLoading" | ||
| [disabled]="config.nzCancelDisabled" | ||
| > | ||
| {{ config.nzCancelText || locale.cancelText }} | ||
| </button> | ||
| <button | ||
| *ngIf="config.nzOkText !== null" | ||
| [attr.cdkFocusInitial]="config.nzAutofocus === 'ok'" | ||
| nz-button | ||
| [nzType]="config.nzOkType" | ||
| (click)="onOk()" | ||
| [nzLoading]="config.nzOkLoading" | ||
| [disabled]="config.nzOkDisabled" | ||
| > | ||
| {{ config.nzOkText || locale.okText }} | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| `, | ||
| animations: [nzModalAnimations.modalContainer], | ||
| // Using OnPush for modal caused footer can not to detect changes. we can fix it when 8.x. | ||
| changeDetection: ChangeDetectionStrategy.Default, | ||
| host: { | ||
| tabindex: '-1', | ||
| role: 'dialog', | ||
| class: 'ant-modal-wrap', | ||
| '[class]': 'config.nzWrapClassName', | ||
| '[style.zIndex]': 'config.nzZIndex', | ||
| '[@.disabled]': 'config.nzNoAnimation', | ||
| '[@modalContainer]': 'state', | ||
| '(@modalContainer.start)': 'onAnimationStart($event)', | ||
| '(@modalContainer.done)': 'onAnimationDone($event)', | ||
| '(mousedown)': 'onMousedown($event)', | ||
| '(mouseup)': 'onMouseup($event)' | ||
| } | ||
| }) | ||
| export class NzModalConfirmContainerComponent extends BaseModalContainer implements OnDestroy { | ||
| @ViewChild(CdkPortalOutlet, { static: true }) portalOutlet: CdkPortalOutlet; | ||
| @ViewChild('modalElement', { static: true }) modalElementRef: ElementRef<HTMLDivElement>; | ||
| @Output() readonly cancelTriggered = new EventEmitter<void>(); | ||
| @Output() readonly okTriggered = new EventEmitter<void>(); | ||
| locale: { okText?: string; cancelText?: string } = {}; | ||
| private destroy$ = new Subject<void>(); | ||
|
|
||
| constructor( | ||
| private i18n: NzI18nService, | ||
| elementRef: ElementRef, | ||
| focusTrapFactory: FocusTrapFactory, | ||
| cdr: ChangeDetectorRef, | ||
| render: Renderer2, | ||
| zone: NgZone, | ||
| overlayRef: OverlayRef, | ||
| public config: ModalOptions, | ||
| // tslint:disable-next-line:no-any | ||
| @Optional() @Inject(DOCUMENT) document: any, | ||
| @Optional() @Inject(ANIMATION_MODULE_TYPE) animationType: string | ||
| ) { | ||
| super(elementRef, focusTrapFactory, cdr, render, zone, overlayRef, config, document, animationType); | ||
| this.i18n.localeChange.pipe(takeUntil(this.destroy$)).subscribe(() => { | ||
| this.locale = this.i18n.getLocaleData('Modal'); | ||
| }); | ||
| } | ||
|
|
||
| onCancel(): void { | ||
| this.cancelTriggered.emit(); | ||
| } | ||
|
|
||
| onOk(): void { | ||
| this.okTriggered.emit(); | ||
| } | ||
|
|
||
| attachComponentPortal<T>(_portal: ComponentPortal<T>): never { | ||
| throw new Error('The confirm mode does not support using component as content'); | ||
| } | ||
|
|
||
| ngOnDestroy(): void { | ||
| this.destroy$.next(); | ||
| this.destroy$.complete(); | ||
| } | ||
| } |
Oops, something went wrong.