From a47244f314626fb2951d91eca7aa64277a7d42f1 Mon Sep 17 00:00:00 2001 From: yangjunhan Date: Mon, 7 Dec 2020 16:06:56 +0800 Subject: [PATCH] fix(module:modal): add nzOkDanger to avoid old button style close #6111 --- components/button/button.component.ts | 15 +++++++++++++-- components/modal/doc/index.en-US.md | 4 +++- components/modal/doc/index.zh-CN.md | 4 +++- components/modal/modal-footer.component.ts | 2 ++ components/modal/modal-types.ts | 2 ++ components/modal/modal.component.ts | 2 ++ components/modal/utils.ts | 2 ++ 7 files changed, 27 insertions(+), 4 deletions(-) diff --git a/components/button/button.component.ts b/components/button/button.component.ts index 13772021084..a5679e9131d 100644 --- a/components/button/button.component.ts +++ b/components/button/button.component.ts @@ -19,6 +19,7 @@ import { ViewEncapsulation } from '@angular/core'; import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config'; +import { warnDeprecation } from 'ng-zorro-antd/core/logger'; import { BooleanInput } from 'ng-zorro-antd/core/types'; import { InputBoolean } from 'ng-zorro-antd/core/util'; @@ -26,7 +27,13 @@ import { NzIconDirective } from 'ng-zorro-antd/icon'; import { Subject } from 'rxjs'; import { filter, startWith, takeUntil } from 'rxjs/operators'; -export type NzButtonType = 'primary' | 'default' | 'dashed' | 'danger' | 'link' | 'text' | null; +/** + * @deprecated `danger` not supported, use `nzDanger` instead + * @breaking-change 12.0.0 + */ +type NzLegacyButtonType = 'primary' | 'default' | 'dashed' | 'danger' | 'link' | 'text' | null; + +export type NzButtonType = NzLegacyButtonType; export type NzButtonShape = 'circle' | 'round' | null; export type NzButtonSize = 'large' | 'default' | 'small'; @@ -123,10 +130,14 @@ export class NzButtonComponent implements OnDestroy, OnChanges, AfterViewInit, A } ngOnChanges(changes: SimpleChanges): void { - const { nzLoading } = changes; + const { nzLoading, nzType } = changes; if (nzLoading) { this.loading$.next(this.nzLoading); } + + if (nzType) { + warnDeprecation(`'danger' value of 'nzType' in Button is going to be removed in 12.0.0. Please use 'nzDanger' instead.`); + } } ngAfterViewInit(): void { diff --git a/components/modal/doc/index.en-US.md b/components/modal/doc/index.en-US.md index a4cde3bff82..4c84a395930 100644 --- a/components/modal/doc/index.en-US.md +++ b/components/modal/doc/index.en-US.md @@ -46,7 +46,8 @@ The dialog is currently divided into 2 modes, `normal mode` and `confirm box mod | nzCloseOnNavigation | Whether to close the modal when the navigation history changes | `boolean` | `true` | ✅ | | nzMaskStyle | Style for modal's mask element. | `object` | - | | nzOkText | Text of the OK button. Set to null to show no ok button (this value is invalid if the nzFooter parameter is used in normal mode) | `string` | OK | -| nzOkType | Button type of the OK button. Consistent with the type of the `nz-button`. | `string` | primary | +| nzOkType | Button type of the OK button. Consistent with the `nzType` of the `nz-button`. | `string` | `primary` | +| nzOkDanger | Danger status of the OK button. Consistent with the `nzDanger` of the `nz-button`. | `boolean` | `false` | | nzStyle | Style of floating layer, typically used at least for adjusting the position. | `object` | - | | nzCloseIcon | Custom close icon | `string\|TemplateRef` | - | | nzTitle | The modal dialog's title. Leave blank to show no title. The usage of TemplateRef can refer to the case | string / TemplateRef | - | @@ -136,6 +137,7 @@ The button configuration items are as follows (along with the button component): nzFooter: [{ label: string; // Button text type?: string; // Types + danger?: boolean; // Whether danger shape?: string; // Shape ghost?: boolean; // Whether ghost size?: string; // Size diff --git a/components/modal/doc/index.zh-CN.md b/components/modal/doc/index.zh-CN.md index eff8962eb38..479acdd92d4 100644 --- a/components/modal/doc/index.zh-CN.md +++ b/components/modal/doc/index.zh-CN.md @@ -46,7 +46,8 @@ import { NzModalModule } from 'ng-zorro-antd/modal'; | nzCloseOnNavigation | 导航历史变化时是否关闭模态框 | `boolean` | `true` | ✅ | | nzMaskStyle | 遮罩样式 | `object` | - | | nzOkText | 确认按钮文字。设为 null 表示不显示确认按钮（若在普通模式下使用了 nzFooter 参数，则该值无效） | `string` | 确定 | -| nzOkType | 确认按钮类型。与button的type类型值一致 | `string` | primary | +| nzOkType | 确认按钮类型。与 `nz-button` 的 `nzType` 类型值一致 | `string` | `primary` | +| nzOkDanger | 确认按钮是否为危险按钮。与 `nz-button` 的 `nzDanger` 值保持一致 | `boolean` | `false` | | nzStyle | 可用于设置浮层的样式，调整浮层位置等 | `object` | - | | nzTitle | 标题。留空表示不展示标题。TemplateRef的使用方法可参考案例 | string
TemplateRef | - | | nzCloseIcon | 自定义关闭图标 | `string\|TemplateRef` | - | @@ -136,6 +137,7 @@ constructor(modal: NzModalService) { nzFooter: [{ label: string; // 按钮文本 type?: string; // 类型 + danger?: boolean; // 是否danger shape?: string; // 形状 ghost?: boolean; // 是否ghost size?: string; // 大小 diff --git a/components/modal/modal-footer.component.ts b/components/modal/modal-footer.component.ts index 68bc9483750..7695bdec397 100644 --- a/components/modal/modal-footer.component.ts +++ b/components/modal/modal-footer.component.ts @@ -29,6 +29,7 @@ import { ModalButtonOptions, ModalOptions } from './modal-types'; [nzLoading]="getButtonCallableProp(button, 'loading')" [disabled]="getButtonCallableProp(button, 'disabled')" [nzType]="button.type!" + [nzDanger]="button.danger" [nzShape]="button.shape!" [nzSize]="button.size!" [nzGhost]="button.ghost!" @@ -54,6 +55,7 @@ import { ModalButtonOptions, ModalOptions } from './modal-types'; [attr.cdkFocusInitial]="config.nzAutofocus === 'ok' || null" nz-button [nzType]="config.nzOkType!" + [nzDanger]="config.nzOkDanger" (click)="onOk()" [nzLoading]="!!config.nzOkLoading" [disabled]="config.nzOkDisabled" diff --git a/components/modal/modal-types.ts b/components/modal/modal-types.ts index 7a3ec0aa64a..45950a86536 100644 --- a/components/modal/modal-types.ts +++ b/components/modal/modal-types.ts @@ -35,6 +35,7 @@ export class ModalOptions { nzWidth?: number | string = 520; nzCloseIcon?: string | TemplateRef = 'close'; nzOkType?: NzButtonType = 'primary'; + nzOkDanger?: boolean = false; nzModalType?: ModalTypes = 'default'; nzOnCancel?: EventEmitter | OnClickCallback = noopFun; nzOnOk?: EventEmitter | OnClickCallback = noopFun; @@ -70,6 +71,7 @@ export class ModalOptions { export interface ModalButtonOptions { label: string; type?: NzButtonType; + danger?: boolean; shape?: NzButtonShape; ghost?: boolean; size?: NzButtonSize; diff --git a/components/modal/modal.component.ts b/components/modal/modal.component.ts index 36d249ba70d..a857e3b4dbc 100644 --- a/components/modal/modal.component.ts +++ b/components/modal/modal.component.ts @@ -55,6 +55,7 @@ export class NzModalComponent implements OnChanges static ngAcceptInputType_nzCancelLoading: BooleanInput; static ngAcceptInputType_nzKeyboard: BooleanInput; static ngAcceptInputType_nzNoAnimation: BooleanInput; + static ngAcceptInputType_nzOkDanger: BooleanInput; @Input() @InputBoolean() nzMask?: boolean; @Input() @InputBoolean() nzMaskClosable?: boolean; @@ -87,6 +88,7 @@ export class NzModalComponent implements OnChanges @Input() nzOkText?: string | null; @Input() nzCancelText?: string | null; @Input() nzOkType: NzButtonType = 'primary'; + @Input() @InputBoolean() nzOkDanger: boolean = false; @Input() nzIconType: string = 'question-circle'; // Confirm Modal ONLY @Input() nzModalType: ModalTypes = 'default'; @Input() nzAutofocus: 'ok' | 'cancel' | 'auto' | null = 'auto'; diff --git a/components/modal/utils.ts b/components/modal/utils.ts index 059d891bf1d..2a7f4b2f0b5 100644 --- a/components/modal/utils.ts +++ b/components/modal/utils.ts @@ -50,6 +50,7 @@ export function getConfigFromComponent(component: NzModalComponent): ModalOption nzOkText, nzCancelText, nzOkType, + nzOkDanger, nzIconType, nzModalType, nzOnOk, @@ -85,6 +86,7 @@ export function getConfigFromComponent(component: NzModalComponent): ModalOption nzOkText, nzCancelText, nzOkType, + nzOkDanger, nzIconType, nzModalType, nzOnOk,