Skip to content

Commit

Permalink
refactor(module:modal): refactor control flow component (#8398)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Nicoss54
Nicoss54 committed Feb 19, 2024
1 parent 96d9386 commit 9fad6a3
Show file tree
Hide file tree
Showing 3 changed files with 100 additions and 85 deletions.
58 changes: 32 additions & 26 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 @@
import { FocusTrapFactory } from '@angular/cdk/a11y';
import { OverlayRef } from '@angular/cdk/overlay';
import { CdkPortalOutlet, PortalModule } from '@angular/cdk/portal';
import { DOCUMENT, NgClass, NgIf, NgStyle } from '@angular/common';
import { DOCUMENT, NgClass, NgStyle } from '@angular/common';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Expand Down Expand Up @@ -50,7 +50,10 @@ import { ModalOptions } from './modal-types';
[style.width]="config?.nzWidth! | nzToCssUnit"
>
<div class="ant-modal-content">
<button *ngIf="config.nzClosable" nz-modal-close (click)="onCloseClick()"></button>
@if (config.nzClosable) {
<button 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">
Expand All @@ -62,32 +65,36 @@ import { ModalOptions } from './modal-types';
</span>
<div class="ant-modal-confirm-content">
<ng-template cdkPortalOutlet></ng-template>
<div *ngIf="isStringContent" [innerHTML]="config.nzContent"></div>
@if (isStringContent) {
<div [innerHTML]="config.nzContent"></div>
}
</div>
</div>
<div class="ant-modal-confirm-btns">
<button
*ngIf="config.nzCancelText !== null"
[attr.cdkFocusInitial]="config.nzAutofocus === 'cancel' || null"
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' || null"
nz-button
[nzType]="config.nzOkType!"
(click)="onOk()"
[nzLoading]="!!config.nzOkLoading"
[disabled]="config.nzOkDisabled"
[nzDanger]="config.nzOkDanger"
>
{{ config.nzOkText || locale.okText }}
</button>
@if (config.nzCancelText !== null) {
<button
[attr.cdkFocusInitial]="config.nzAutofocus === 'cancel' || null"
nz-button
(click)="onCancel()"
[nzLoading]="config.nzCancelLoading"
[disabled]="config.nzCancelDisabled"
>
{{ config.nzCancelText || locale.cancelText }}
</button>
}
@if (config.nzOkText !== null) {
<button
[attr.cdkFocusInitial]="config.nzAutofocus === 'ok' || null"
nz-button
[nzType]="config.nzOkType!"
(click)="onOk()"
[nzLoading]="config.nzOkLoading"
[disabled]="config.nzOkDisabled"
[nzDanger]="config.nzOkDanger"
>
{{ config.nzOkText || locale.okText }}
</button>
}
</div>
</div>
</div>
Expand Down Expand Up @@ -115,7 +122,6 @@ import { ModalOptions } from './modal-types';
NgStyle,
NzPipesModule,
NzIconModule,
NgIf,
NzModalCloseComponent,
NzOutletModule,
PortalModule,
Expand Down
33 changes: 20 additions & 13 deletions components/modal/modal-container.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
import { FocusTrapFactory } from '@angular/cdk/a11y';
import { OverlayRef } from '@angular/cdk/overlay';
import { CdkPortalOutlet, PortalModule } from '@angular/cdk/portal';
import { DOCUMENT, NgClass, NgIf, NgStyle } from '@angular/common';
import { DOCUMENT, NgClass, NgStyle } from '@angular/common';
import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Expand Down Expand Up @@ -45,19 +45,27 @@ import { ModalOptions } from './modal-types';
[style.width]="config?.nzWidth! | nzToCssUnit"
>
<div class="ant-modal-content">
<button *ngIf="config.nzClosable" nz-modal-close (click)="onCloseClick()"></button>
<div *ngIf="config.nzTitle" nz-modal-title></div>
@if (config.nzClosable) {
<button nz-modal-close (click)="onCloseClick()"></button>
}
@if (config.nzTitle) {
<div nz-modal-title></div>
}
<div class="ant-modal-body" [ngStyle]="config.nzBodyStyle!">
<ng-template cdkPortalOutlet></ng-template>
<div *ngIf="isStringContent" [innerHTML]="config.nzContent"></div>
<ng-template cdkPortalOutlet />
@if (isStringContent) {
<div [innerHTML]="config.nzContent"></div>
}
</div>
<div
*ngIf="config.nzFooter !== null"
nz-modal-footer
[modalRef]="modalRef"
(cancelTriggered)="onCloseClick()"
(okTriggered)="onOkClick()"
></div>
@if (config.nzFooter !== null) {
<div
nz-modal-footer
[modalRef]="modalRef"
(cancelTriggered)="onCloseClick()"
(okTriggered)="onOkClick()"
></div>
}
</div>
</div>
`,
Expand All @@ -80,7 +88,6 @@ import { ModalOptions } from './modal-types';
imports: [
NgClass,
NgStyle,
NgIf,
NzModalCloseComponent,
NzModalTitleComponent,
PortalModule,
Expand Down
94 changes: 48 additions & 46 deletions components/modal/modal-footer.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/

import { NgFor, NgIf } from '@angular/common';
import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnDestroy, Output } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
Expand All @@ -20,60 +19,63 @@ import { ModalButtonOptions, ModalOptions } from './modal-types';
selector: 'div[nz-modal-footer]',
exportAs: 'NzModalFooterBuiltin',
template: `
<ng-container *ngIf="config.nzFooter; else defaultFooterButtons">
@if (config.nzFooter) {
<ng-container
*nzStringTemplateOutlet="config.nzFooter; context: { $implicit: config.nzData, modalRef: modalRef }"
>
<div *ngIf="!buttonsFooter" [innerHTML]="config.nzFooter"></div>
<ng-container *ngIf="buttonsFooter">
<button
*ngFor="let button of buttons"
nz-button
(click)="onButtonClick(button)"
[hidden]="!getButtonCallableProp(button, 'show')"
[nzLoading]="getButtonCallableProp(button, 'loading')"
[disabled]="getButtonCallableProp(button, 'disabled')"
[nzType]="button.type!"
[nzDanger]="button.danger"
[nzShape]="button.shape!"
[nzSize]="button.size!"
[nzGhost]="button.ghost!"
>
{{ button.label }}
</button>
</ng-container>
@if (buttonsFooter) {
@for (button of buttons; track button) {
<button
nz-button
(click)="onButtonClick(button)"
[hidden]="!getButtonCallableProp(button, 'show')"
[nzLoading]="getButtonCallableProp(button, 'loading')"
[disabled]="getButtonCallableProp(button, 'disabled')"
[nzType]="button.type!"
[nzDanger]="button.danger"
[nzShape]="button.shape!"
[nzSize]="button.size!"
[nzGhost]="button.ghost!"
>
{{ button.label }}
</button>
}
} @else {
<div [innerHTML]="config.nzFooter"></div>
}
</ng-container>
</ng-container>
<ng-template #defaultFooterButtons>
<button
*ngIf="config.nzCancelText !== null"
[attr.cdkFocusInitial]="config.nzAutofocus === 'cancel' || null"
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' || null"
nz-button
[nzType]="config.nzOkType!"
[nzDanger]="config.nzOkDanger"
(click)="onOk()"
[nzLoading]="!!config.nzOkLoading"
[disabled]="config.nzOkDisabled"
>
{{ config.nzOkText || locale.okText }}
</button>
</ng-template>
} @else {
@if (config.nzCancelText !== null) {
<button
[attr.cdkFocusInitial]="config.nzAutofocus === 'cancel' || null"
nz-button
(click)="onCancel()"
[nzLoading]="config.nzCancelLoading"
[disabled]="config.nzCancelDisabled"
>
{{ config.nzCancelText || locale.cancelText }}
</button>
}
@if (config.nzOkText !== null) {
<button
[attr.cdkFocusInitial]="config.nzAutofocus === 'ok' || null"
nz-button
[nzType]="config.nzOkType!"
[nzDanger]="config.nzOkDanger"
(click)="onOk()"
[nzLoading]="config.nzOkLoading"
[disabled]="config.nzOkDisabled"
>
{{ config.nzOkText || locale.okText }}
</button>
}
}
`,
host: {
class: 'ant-modal-footer'
},
changeDetection: ChangeDetectionStrategy.Default,
imports: [NgIf, NzOutletModule, NgFor, NzButtonModule],
imports: [NzOutletModule, NzButtonModule],
standalone: true
})
export class NzModalFooterComponent implements OnDestroy {
Expand Down

0 comments on commit 9fad6a3

Please sign in to comment.