Modal.destroy():destroy all cofirm modal dialogs

components/modal/Modal.tsx

@@ -12,6 +12,7 @@ import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 
 let mousePosition: { x: number; y: number } | null;
 let mousePositionEventBinded: boolean;
+export const destroyFns: Array<() => void> = [];
 
 export interface ModalProps {
   /** 对话框是否可见*/
@@ -107,6 +108,7 @@ export default class Modal extends React.Component<ModalProps, {}> {
   static warn: ModalFunc;
   static warning: ModalFunc;
   static confirm: ModalFunc;
+  static destroy: () => void;
 
   static defaultProps = {
     width: 520,

components/modal/__tests__/confirm.test.js

@@ -144,6 +144,23 @@ describe('Modal.confirm triggers callbacks correctly', () => {
     jest.useRealTimers();
   });
 
+  it('could be Modal.destroy', () => {
+    jest.useFakeTimers();
+    ['info', 'success', 'warning', 'error'].forEach((type) => {
+      Modal[type]({
+        title: 'title',
+        content: 'content',
+      });
+      expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
+    });
+    Modal.destroy();
+    ['info', 'success', 'warning', 'error'].forEach((type) => {
+      jest.runAllTimers();
+      expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(0);
+    });
+    jest.useRealTimers();
+  });
+
   it('prefixCls', () => {
     open({ prefixCls: 'custom-modal' });
     expect($$('.custom-modal-mask')).toHaveLength(1);

components/modal/confirm.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import classNames from 'classnames';
 import Icon from '../icon';
-import Dialog, { ModalFuncProps } from './Modal';
+import Dialog, { ModalFuncProps, destroyFns } from './Modal';
 import ActionButton from './ActionButton';
 import { getConfirmLocale } from './locale';
 
@@ -140,6 +140,13 @@ export default function confirm(config: ModalFuncProps) {
     if (config.onCancel && triggerCancel) {
       config.onCancel(...args);
     }
+    for(let i = 0; i < destroyFns.length; i++) {
+      const fn = destroyFns[i]
+      if (fn === destroy) {
+        destroyFns.splice(i, 1)
+        break
+      }
+    }
   }
 
   function render(props: any) {
@@ -148,6 +155,8 @@ export default function confirm(config: ModalFuncProps) {
 
   render(currentConfig);
 
+  destroyFns.push(close)
+
   return {
     destroy: close,
     update,

components/modal/demo/confirm-router.md

@@ -0,0 +1,45 @@
+---
+order: 8
+title:
+  zh-CN:   销毁确认对话框
+  en-US: destroy confirmation modal dialog
+---
+
+## zh-CN
+
+使用 `Modal.destroy()` 可以销毁弹出的确认窗。通常用于路由监听当中，处理路由前进、后退不能销毁确认对话框的问题。
+
+## en-US
+
+`Modal.destroy()` could destroy all confirmation modal dialogs. Usually, you can use it in router change event to destroy confirm modal dialog automatically
+
+```jsx
+import { Modal, Button } from 'antd';
+import { browserHistory } from 'react-router';
+
+// router change
+browserHistory.listen(() => {
+  Modal.destroy();
+});
+
+const confirm = Modal.confirm;
+
+function showConfirm() {
+  confirm({
+    title: 'confirm dialog',
+    content: 'click the browser [go back] button，this confirm modal dialog will destroy Automatically',
+    onOk() {
+      console.log('OK');
+    },
+    onCancel() {
+      console.log('Cancel');
+    },
+  });
+}
+
+ReactDOM.render(
+  <div>
+    <Button onClick={showConfirm}>Confirm</Button>
+  </div>, mountNode
+);
+```

components/modal/index.en-US.md

@@ -99,3 +99,16 @@ modal.destroy();
   margin-right: 8px;
 }
 </style>
+
+- `Modal.destroy`
+
+`Modal.destroy()` could destroy all confirmation modal dialogs(Modal.info/Modal.success/Modal.error/Modal.warning/Modal.confirm). Usually, you can use it in router change event to destroy confirm modal dialog automatically without use modal reference to close( it's too complex to use for all modal dialogs)
+
+```jsx
+import { browserHistory } from 'react-router';
+
+// router change
+browserHistory.listen(() => {
+  Modal.destroy();
+});
+```

components/modal/index.tsx

@@ -1,4 +1,4 @@
-import Modal, { ModalFuncProps } from './Modal';
+import Modal, { ModalFuncProps, destroyFns } from './Modal';
 import confirm from './confirm';
 
 export { ActionButtonProps } from './ActionButton';
@@ -53,4 +53,13 @@ Modal.confirm = function(props: ModalFuncProps) {
   return confirm(config);
 };
 
+Modal.destroy = function () {
+  while (destroyFns.length) {
+    const close = destroyFns.pop();
+    if (close) {
+      close();
+    }
+  }
+};
+
 export default Modal;

components/modal/index.zh-CN.md

@@ -97,3 +97,16 @@ modal.destroy();
   margin-right: 8px;
 }
 </style>
+
+- `Modal.destroy`
+
+使用 `Modal.destroy()` 可以销毁弹出的确认窗（即上述的 Modal.info、Modal.success、Modal.error、Modal.warning、Modal.confirm）。通常用于路由监听当中，处理路由前进、后退不能销毁确认对话框的问题，而不用各处去使用实例的返回值进行关闭（modal.destroy() 适用于主动关闭，而不是路由这样被动关闭）
+
+```jsx
+import { browserHistory } from 'react-router';
+
+// router change
+browserHistory.listen(() => {
+  Modal.destroy();
+});
+```