feat(module: modal): Modal.operation support maskClosable params

.travis.yml

@@ -2,7 +2,7 @@ sudo: required
 dist: trusty
 language: node_js
 node_js:
-  - '14.15.0'
+  - 14
 
 env:
   - TASK=pre-release

components/modal/demo/alert.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { ModalService, ToastService, ModalRef } from 'ng-zorro-antd-mobile';
+import { ModalService, ToastService } from 'ng-zorro-antd-mobile';
 
 @Component({
   selector: 'demo-modal-alert',

components/modal/demo/basic.ts

@@ -1,5 +1,4 @@
 import { Component } from '@angular/core';
-import { ModalService } from 'ng-zorro-antd-mobile';
 
 @Component({
   selector: 'demo-modal-basic',
@@ -10,12 +9,12 @@ import { ModalService } from 'ng-zorro-antd-mobile';
       <WhiteSpace></WhiteSpace>
       <Modal [(ngModel)]="this.state.modal1" [transparent]="true" [title]="'Title'" [footer]="footer">
         <div [ngStyle]="{ height: 100, overflow: 'scroll' }">
-          scoll content... <br />
-          scoll content... <br />
-          scoll content... <br />
-          scoll content... <br />
-          scoll content... <br />
-          scoll content... <br />
+          scroll content... <br />
+          scroll content... <br />
+          scroll content... <br />
+          scroll content... <br />
+          scroll content... <br />
+          scroll content... <br />
         </div>
       </Modal>
       <div Button (onClick)="showModal('modal2')">popup</div>
@@ -38,9 +37,9 @@ import { ModalService } from 'ng-zorro-antd-mobile';
         (onClose)="onClose('modal3')"
       >
         <div [ngStyle]="{ height: 100, overflow: 'scroll' }">
-          scoll content... <br />
-          scoll content... <br />
-          scoll content... <br />
+          scroll content... <br />
+          scroll content... <br />
+          scroll content... <br />
         </div>
       </Modal>
       <div Button (onClick)="showModal('modal4')">closable</div>
@@ -53,9 +52,9 @@ import { ModalService } from 'ng-zorro-antd-mobile';
         (onClose)="onClose('modal4')"
       >
         <div [ngStyle]="{ height: 100, overflow: 'scroll' }">
-          scoll content... <br />
-          scoll content... <br />
-          scoll content... <br />
+          scroll content... <br />
+          scroll content... <br />
+          scroll content... <br />
         </div>
       </Modal>
     </WingBlank>
@@ -95,11 +94,6 @@ export class DemoModalBasicComponent {
     }
   ];
 
-  constructor() {}
-
-  modelChange(event) {
-    console.log('asdfasdf', event);
-  }
   onClose(key) {
     this.state[key] = false;
   }

components/modal/demo/operation.ts

@@ -6,18 +6,20 @@ import { ModalService } from 'ng-zorro-antd-mobile';
   template: `
     <WingBlank>
       <WhiteSpace></WhiteSpace>
-      <div Button (onClick)="showOpeartion()">operation</div>
+      <div Button (onClick)="showOperation()">operation</div>
       <WhiteSpace></WhiteSpace>
     </WingBlank>
   `
 })
 export class DemoModalOperationComponent {
   constructor(private _modal: ModalService) {}
 
-  showOpeartion() {
+  showOperation() {
     this._modal.operation([
       { text: '标为未读', onPress: () => console.log('标为未读被点击了') },
       { text: '置顶聊天', onPress: () => console.log('置顶聊天被点击了') }
-    ]);
+    ], 'ios', {
+      maskClosable: true,
+    });
   }
 }

components/modal/doc/index.en-US.md

@@ -60,6 +60,7 @@ Properties | Descrition | Type | Default
 -----------|------------|------|--------
 | `[actions]` | button group | `Array<text: string, onPress: Function, style: object>` | - |
 | `[platform]` | Set the special style depends on platform, works on web only | `'android' \| 'ios'` | `'ios'`|
+| `[customOptions]` | support `maskClosable` params，Determine whether to close the modal dialog when clicked mask of it | `Object` | - |
 
 call `ModalService.operation(actions?).close()` can close Operation Modal outside anywhere as you wish.
 

components/modal/doc/index.zh-CN.md

@@ -31,7 +31,7 @@ subtitle: 对话框
 | `[platform]` | 设定组件的平台特有样式, 仅限web | `'android' \| 'ios'` | `'ios'`|
 | `(onClose)` | 点击 x 或 mask 回调 | `EventEmitter<void>` | - |
 
-### ModalSerivce.alert(title, message, actions?, platform?)
+### ModalService.alert(title, message, actions?, platform?)
 
 参数 | 说明 | 类型 | 默认值
 ----|-----|------|------
@@ -40,9 +40,9 @@ subtitle: 对话框
 | `[actions]` | 按钮组 | `Array<text: string, onPress: Function, style: object>` | - |
 | `[platform]` | 设定组件的平台特有样式, 仅限web | `'android' \| 'ios'` | `'ios'`|
 
-`ModalSerivce.alert(title, message, actions?, platform?).close()` 可以在外部关闭 Alert
+`ModalService.alert(title, message, actions?, platform?).close()` 可以在外部关闭 Alert
 
-### ModalSerivce.prompt(title, message, callbackOrActions, type?, defaultValue?, placeholders?, platform?)
+### ModalService.prompt(title, message, callbackOrActions, type?, defaultValue?, placeholders?, platform?)
 
 参数 | 说明 | 类型 | 默认值
 ----|-----|------|------
@@ -55,16 +55,17 @@ subtitle: 对话框
 | `[platform]` | 设定组件的平台特有样式, 仅限web | `'android' \| 'ios'` | `'ios'`|
 
 
-`ModalSerivce.prompt(title, message, callbackOrActions, type?, defaultValue?, placeholders?, platform?).close()` 可以在外部关闭 prompt`
+`ModalService.prompt(title, message, callbackOrActions, type?, defaultValue?, placeholders?, platform?).close()` 可以在外部关闭 prompt`
 
-### ModalSerivce.operation(actions?, platform?)
+### ModalService.operation(actions?, platform?, customOptions?)
 
 参数 | 说明 | 类型 | 默认值
 ----|-----|------|------
 | `[actions]` | 按钮组 | `Array<text: string, onPress: Function, style: object>` | - |
-| `[platform]` | 设定组件的平台特有样式, 仅限web | `'android' \| 'ios'` | `'ios'`|
+| `[platform]` | 设定组件的平台特有样式, 仅限 web | `'android' \| 'ios'` | `'ios'`|
+| `[customOptions]` | 支持 `maskClosable` 入参，控制点击蒙层是否允许关闭 | `Object` | - |
 
-`ModalSerivce.operation(actions?, platform?).close()` 可以在外部关闭 operation`
+`ModalService.operation(actions?, platform?).close()` 可以在外部关闭 operation`
 
 以上函数调用后，会返回一个引用，可以通过该引用关闭弹窗。
 

components/modal/modal-options.provider.ts

@@ -29,18 +29,16 @@ export class ModalBaseOptions {
   closeWithAnimation: () => void;
 }
 
+export class ModalServiceCustomOptions {
+  maskClosable?: boolean = false;
+}
+
 @Injectable()
 export class ModalOptions extends ModalBaseOptions {
   transitionName?: string = 'am-fade';
   maskTransitionName?: string = 'am-fade';
 }
 
-@Injectable()
-export class AlertOptions extends ModalBaseOptions {
-  message?: string | TemplateRef<any>;
-  actions?: Array<any>;
-}
-
 @Injectable()
 export class Action {
   text?: string;

components/modal/modal.component.spec.ts

@@ -1,12 +1,12 @@
-import { Component, ViewChild, ViewContainerRef } from '@angular/core';
+import { Component, ViewChild } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { ComponentFixture, fakeAsync, tick, TestBed, flush, waitForAsync } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, TestBed, flush, waitForAsync } from '@angular/core/testing';
 import { ModalModule, WingBlankModule, ListModule, WhiteSpaceModule, ButtonModule, ModalRef } from '../..';
 import { By } from '@angular/platform-browser';
-import { ModalService, ModalServiceComponent, ModalComponent } from '../..';
+import { ModalService, ModalComponent } from '../..';
 import { ButtonComponent } from '../button/button.component';
 import { dispatchTouchEvent } from '../core/testing';
-import { ModalOptions, AlertOptions } from './modal-options.provider';
+import { ModalOptions } from './modal-options.provider';
 import { Overlay } from '@angular/cdk/overlay';
 describe('ModalComponent', () => {
   let component: TestModalBasicComponent;
@@ -26,7 +26,7 @@ describe('ModalComponent', () => {
         FormsModule,
         ReactiveFormsModule
       ],
-      providers: [Overlay, ModalOptions, AlertOptions]
+      providers: [Overlay, ModalOptions]
     }).compileComponents();
     TestBed.overrideModule(ModalModule, {}).compileComponents();
   }));
@@ -170,7 +170,7 @@ describe('ModalComponent', () => {
     expect(modalEle.nativeElement.querySelector('.am-modal-close')).toBeNull('closable is false');
   }));
 
-  it('should showOpeartion work', () => {
+  it('should showOperation work', () => {
     const button = buttons[0].nativeElement;
     button.click();
     fixture.detectChanges();
@@ -256,17 +256,17 @@ describe('ModalComponent', () => {
       [animationType]="animationType"
     >
       <div [ngStyle]="{ height: 100, overflow: 'scroll' }">
-        scoll content...
+        scroll content...
         <br />
-        scoll content... <br />
-        scoll content... <br />
-        scoll content... <br />
-        scoll content... <br />
-        scoll content...
+        scroll content... <br />
+        scroll content... <br />
+        scroll content... <br />
+        scroll content... <br />
+        scroll content...
         <br />
       </div>
     </Modal>
-    <div Button (onClick)="showOpeartion()">operation</div>
+    <div Button (onClick)="showOperation()">operation</div>
     <div Button (onClick)="showAlert()">customized buttons</div>
     <div Button (onClick)="showPromptDefault()">defaultValue</div>
     <div Button (onClick)="showPromptPromise()">promise</div>
@@ -320,7 +320,7 @@ export class TestModalBasicComponent {
     this.state = false;
   }
 
-  showOpeartion() {
+  showOperation() {
     this._modal.operation([
       { text: '标为未读', onPress: () => console.log('标为未读被点击了') },
       { text: '置顶聊天', onPress: () => console.log('置顶聊天被点击了') }

components/modal/modal.module.ts

@@ -8,7 +8,6 @@ import { WhiteSpaceModule } from '../white-space/white-space.module';
 import { ButtonModule } from '../button/button.module';
 import { InputItemModule } from '../input-item/input-item.module';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { AlertOptions } from './modal-options.provider';
 import { OverlayModule } from '@angular/cdk/overlay';
 import { PopupService } from '../core/services/popup.service';
 @NgModule({
@@ -25,6 +24,6 @@ import { PopupService } from '../core/services/popup.service';
   ],
   exports: [ModalComponent, ModalServiceComponent],
   declarations: [ModalComponent, ModalServiceComponent],
-  providers: [AlertOptions, ModalService, PopupService]
+  providers: [ModalService, PopupService]
 })
 export class ModalModule {}