refactor(module:modal): refactor the modal service

close NG-ZORRO#3652, close NG-ZORRO#4437, close NG-ZORRO#2749
hsuanxyz · Feb 3, 2020 · 7749b07 · 7749b07
1 parent 9f951f8
commit 7749b07
Show file tree

Hide file tree

Showing 18 changed files with 1,297 additions and 35 deletions.
diff --git a/components/modal/demo/confirm-promise.ts b/components/modal/demo/confirm-promise.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
+import { NzModal, NzModalRef, NzModalRef2, NzModalService } from 'ng-zorro-antd/modal';
 
 @Component({
   selector: 'nz-demo-modal-confirm-promise',
@@ -8,9 +8,9 @@ import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
   `
 })
 export class NzDemoModalConfirmPromiseComponent {
-  confirmModal: NzModalRef; // For testing by now
+  confirmModal: NzModalRef2; // For testing by now
 
-  constructor(private modal: NzModalService) {}
+  constructor(private modal: NzModal) {}
 
   showConfirm(): void {
     this.confirmModal = this.modal.confirm({

diff --git a/components/modal/demo/confirm.ts b/components/modal/demo/confirm.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { NzModalService } from 'ng-zorro-antd/modal';
+import { NzModal, NzModalService } from 'ng-zorro-antd/modal';
 
 @Component({
   selector: 'nz-demo-modal-confirm',
@@ -16,18 +16,18 @@ import { NzModalService } from 'ng-zorro-antd/modal';
   ]
 })
 export class NzDemoModalConfirmComponent {
-  constructor(private modalService: NzModalService) {}
+  constructor(private modalService: NzModalService, private modal: NzModal) {}
 
   showConfirm(): void {
-    this.modalService.confirm({
+    this.modal.confirm({
       nzTitle: '<i>Do you Want to delete these items?</i>',
       nzContent: '<b>Some descriptions</b>',
       nzOnOk: () => console.log('OK')
     });
   }
 
   showDeleteConfirm(): void {
-    this.modalService.confirm({
+    this.modal.confirm({
       nzTitle: 'Are you sure delete this task?',
       nzContent: '<b style="color: red;">Some descriptions</b>',
       nzOkText: 'Yes',

diff --git a/components/modal/demo/info.ts b/components/modal/demo/info.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { NzModalService } from 'ng-zorro-antd/modal';
+import { NzModal, NzModalService } from 'ng-zorro-antd/modal';
 
 @Component({
   selector: 'nz-demo-modal-info',
@@ -18,32 +18,32 @@ import { NzModalService } from 'ng-zorro-antd/modal';
   ]
 })
 export class NzDemoModalInfoComponent {
-  constructor(private modalService: NzModalService) {}
+  constructor(private modalService: NzModalService, private modal: NzModal) {}
 
   info(): void {
-    this.modalService.info({
+    this.modal.info({
       nzTitle: 'This is a notification message',
       nzContent: '<p>some messages...some messages...</p><p>some messages...some messages...</p>',
       nzOnOk: () => console.log('Info OK')
     });
   }
 
   success(): void {
-    this.modalService.success({
+    this.modal.success({
       nzTitle: 'This is a success message',
       nzContent: 'some messages...some messages...'
     });
   }
 
   error(): void {
-    this.modalService.error({
+    this.modal.error({
       nzTitle: 'This is an error message',
       nzContent: 'some messages...some messages...'
     });
   }
 
   warning(): void {
-    this.modalService.warning({
+    this.modal.warning({
       nzTitle: 'This is an warning message',
       nzContent: 'some messages...some messages...'
     });

diff --git a/components/modal/demo/locale.ts b/components/modal/demo/locale.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { NzModalService } from 'ng-zorro-antd/modal';
+import { NzModal, NzModalService } from 'ng-zorro-antd/modal';
 
 @Component({
   selector: 'nz-demo-modal-locale',
@@ -26,7 +26,7 @@ import { NzModalService } from 'ng-zorro-antd/modal';
 export class NzDemoModalLocaleComponent {
   isVisible = false;
 
-  constructor(private modalService: NzModalService) {}
+  constructor(private modalService: NzModal) {}
 
   showModal(): void {
     this.isVisible = true;

diff --git a/components/modal/demo/service.ts b/components/modal/demo/service.ts
@@ -1,7 +1,7 @@
-/* entryComponents: NzModalCustomComponent */
+/* entryComponents: NzModalCustomComponent,NzModalCustomComponent */
 
 import { Component, Input, TemplateRef } from '@angular/core';
-import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
+import { NzModal, NzModalRef, NzModalRef2, NzModalService } from 'ng-zorro-antd/modal';
 
 @Component({
   selector: 'nz-demo-modal-service',
@@ -35,6 +35,9 @@ import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
       <span>Use Component</span>
     </button>
 
+    <button nz-button nzType="primary" (click)="createComponentModal2()">
+      <span>Use Component2</span>
+    </button>
     <button nz-button nzType="primary" (click)="createCustomButtonModal()">Custom Button</button>
 
     <br /><br />
@@ -53,15 +56,15 @@ import { NzModalRef, NzModalService } from 'ng-zorro-antd/modal';
   ]
 })
 export class NzDemoModalServiceComponent {
-  tplModal: NzModalRef;
+  tplModal: NzModalRef2;
   tplModalButtonLoading = false;
   htmlModalVisible = false;
   disabled = false;
 
-  constructor(private modalService: NzModalService) {}
+  constructor(private modalService: NzModalService, private modal: NzModal) {}
 
   createModal(): void {
-    this.modalService.create({
+    this.modal.create({
       nzTitle: 'Modal Title',
       nzContent: 'string, will close after 1 sec',
       nzClosable: false,
@@ -70,7 +73,7 @@ export class NzDemoModalServiceComponent {
   }
 
   createTplModal(tplTitle: TemplateRef<{}>, tplContent: TemplateRef<{}>, tplFooter: TemplateRef<{}>): void {
-    this.tplModal = this.modalService.create({
+    this.tplModal = this.modal.create({
       nzTitle: tplTitle,
       nzContent: tplContent,
       nzFooter: tplFooter,
@@ -88,14 +91,38 @@ export class NzDemoModalServiceComponent {
     }, 1000);
   }
 
+  createComponentModal2(): void {
+    const modalRef = this.modal.open<NzModalCustom2Component>(NzModalCustom2Component, {
+      nzTitle: 'Title',
+      nzMaskStyle: {
+        color: 'red'
+      },
+      nzStyle: {
+        color: 'red'
+      },
+      nzClassName: 'my-class-name',
+      nzWrapClassName: 'my-wrap-class-name',
+      nzZIndex: 1100,
+      nzComponentParams: {
+        title: 'title',
+        subtitle: 'subtitle'
+      },
+      nzOnOk: () => new Promise(resolve => setTimeout(resolve, 1000))
+    });
+    modalRef.afterOpen.subscribe(console.log);
+    modalRef.afterClose.subscribe(console.log);
+  }
+
   createComponentModal(): void {
-    const modal = this.modalService.create({
+    const modal = this.modal.create({
       nzTitle: 'Modal Title',
       nzContent: NzModalCustomComponent,
+      nzGetContainer: () => document.body,
       nzComponentParams: {
         title: 'title in component',
         subtitle: 'component sub title，will be changed after 2 sec'
       },
+      nzOnOk: () => new Promise(resolve => setTimeout(resolve, 1000)),
       nzFooter: [
         {
           label: 'change component title from outside',
@@ -119,7 +146,7 @@ export class NzDemoModalServiceComponent {
   }
 
   createCustomButtonModal(): void {
-    const modal: NzModalRef = this.modalService.create({
+    const modal: NzModalRef = this.modal.create({
       nzTitle: 'custom button demo',
       nzContent: 'pass array of button config to nzFooter to create multiple buttons',
       nzFooter: [
@@ -161,7 +188,7 @@ export class NzDemoModalServiceComponent {
 
     ['create', 'info', 'success', 'error'].forEach(method =>
       // @ts-ignore
-      this.modalService[method]({
+      this.modal[method]({
         nzMask: false,
         nzTitle: `Test ${method} title`,
         nzContent: `Test content: <b>${method}</b>`,
@@ -171,9 +198,9 @@ export class NzDemoModalServiceComponent {
 
     this.htmlModalVisible = true;
 
-    this.modalService.afterAllClose.subscribe(() => console.log('afterAllClose emitted!'));
+    this.modal.afterAllClose.subscribe(() => console.log('afterAllClose emitted!'));
 
-    setTimeout(() => this.modalService.closeAll(), 2000);
+    setTimeout(() => this.modal.closeAll(), 2000);
   }
 }
 
@@ -194,9 +221,34 @@ export class NzModalCustomComponent {
   @Input() title: string;
   @Input() subtitle: string;
 
-  constructor(private modal: NzModalRef) {}
+  constructor(private modal: NzModalRef2) {}
 
   destroyModal(): void {
     this.modal.destroy({ data: 'this the result data' });
   }
 }
+
+@Component({
+  selector: 'nz-modal-custom-component',
+  template: `
+    <h2>{{ title }}</h2>
+    <h4>{{ subtitle }}</h4>
+    Content
+    <br />
+    Content
+    <br />
+    Content...
+  `
+})
+export class NzModalCustom2Component {
+  @Input() title: string;
+  @Input() subtitle: string;
+
+  constructor(private modal: NzModalRef2) {
+    console.log(modal);
+  }
+
+  destroyModal(): void {
+    // this.modal.destroy({ data: 'this the result data' });
+  }
+}
diff --git a/components/modal/modal-animations.ts b/components/modal/modal-animations.ts
@@ -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({})))
+  ])
+};
diff --git a/components/modal/modal-close.component.ts b/components/modal/modal-close.component.ts
@@ -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 { ModalConfig } from './nz-modal.type';
+
+@Component({
+  selector: 'button[nz-modal-close]',
+  exportAs: 'NzModalClose',
+  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: ModalConfig) {}
+}