feat(module:modal): show confirm loading status of modal opened by nz…

…ModalService (#340) close #365
NG-ZORRO · Sep 23, 2017 · 90b7e12 · 90b7e12
1 parent 60e3da9
commit 90b7e12
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 5 deletions.
diff --git a/src/components/modal/nz-modal.service.ts b/src/components/modal/nz-modal.service.ts
@@ -29,6 +29,7 @@ export interface ConfigInterface {
   maskClosable?: boolean;
   wrapClassName?: string;
   footer?: TemplateRef<any> | boolean;
+  showConfirmLoading?: boolean;
   onOk?: Function;
   onCancel?: Function;
   componentParams?: Object;
@@ -81,16 +82,20 @@ export class NzModalService {
       }
     });
 
-    props[ 'onOk' ] = this._getConfirmCb(props[ 'nzOnOk' ]);
+    const isShowConfirmLoading = !!config[ 'showConfirmLoading' ];
+    props[ 'onOk' ] = this._getConfirmCb(props[ 'nzOnOk' ], isShowConfirmLoading);
     props[ 'onCancel' ] = this._getConfirmCb(props[ 'nzOnCancel' ]);
     // 在service模式下，不需要nzOnOk，防止触发this.nzOnOk.emit(e);
     delete props[ 'nzOnOk' ];
     delete props[ 'nzOnCancel' ];
     return props;
   }
 
-  _getConfirmCb(fn?: Function): Function {
-    return (_close) => {
+  _getConfirmCb(fn?: Function, isShowConfirmLoading: boolean = false): Function {
+    return (_close, _instance) => {
+      if (isShowConfirmLoading) {
+        _instance.nzConfirmLoading = true;
+      }
       if (fn) {
         const ret = fn();
         if (!ret) {
@@ -132,7 +137,7 @@ export class NzModalService {
             setTimeout(() => {
               compRef.destroy();
             }, 200);
-          });
+          }, instance);
         }
       });
     });

diff --git a/src/showcase/nz-demo-modal/nz-demo-confirm-async.component.ts b/src/showcase/nz-demo-modal/nz-demo-confirm-async.component.ts
@@ -16,6 +16,7 @@ export class NzDemoConfirmAsyncComponent {
     this.confirmServ.confirm({
       title  : '您是否确认要删除这项内容',
       content: '点确认 1 秒后关闭',
+      showConfirmLoading: true,
       onOk() {
         return new Promise((resolve) => {
           setTimeout(resolve, 1000);

diff --git a/src/showcase/nz-demo-modal/nz-demo-modal-service.component.ts b/src/showcase/nz-demo-modal/nz-demo-modal-service.component.ts
@@ -49,6 +49,7 @@ export class NzDemoModalServiceComponent {
       title   : '对话框标题',
       content : '纯文本内容，点确认 1 秒后关闭',
       closable: false,
+      showConfirmLoading: true,
       onOk() {
         return new Promise((resolve) => {
           setTimeout(resolve, 1000);

diff --git a/src/showcase/nz-demo-modal/nz-demo-modal.html b/src/showcase/nz-demo-modal/nz-demo-modal.html
@@ -1,4 +1,4 @@
-<article>
+<article>
   <section class="markdown"><h1>Modal 对话框</h1>
     <section class="markdown"><p>模态对话框。</p>
       <h2 id="何时使用"><span>何时使用</span>
@@ -355,6 +355,13 @@ <h2 id="NzModalService_xxx"><span>NzModalService.xxx()</span>
           <td>open</td>
           <td>无</td>
         </tr>
+        <tr>
+          <td>showConfirmLoading</td>
+          <td>如果footer没有指定（即展示默认footer）时，确定按钮在执行确定回调时是否显示 loading 状态</td>
+          <td>Boolean</td>
+          <td>All</td>
+          <td>false</td>
+        </tr>
       </tbody>
     </table>
     <h2 id="NzModalSubject"><span>NzModalSubject对象</span>