feat: update modal

Author: wangxueliang

components/index.js

@@ -203,6 +203,7 @@ const install = function(Vue) {
   Vue.prototype.$error = Modal.error;
   Vue.prototype.$warning = Modal.warning;
   Vue.prototype.$confirm = Modal.confirm;
+  Vue.prototype.$destroyAll = Modal.destroyAll;
 };
 
 /* istanbul ignore if */

components/modal/ConfirmDialog.jsx

@@ -3,6 +3,8 @@ import Icon from '../icon';
 import Dialog from './Modal';
 import ActionButton from './ActionButton';
 import { getConfirmLocale } from './locale';
+import { hasProp } from '../_util/props-util';
+import warning from '../_util/warning';
 
 export default {
   functional: true,
@@ -21,21 +23,29 @@ export default {
       maskStyle,
       okButtonProps,
       cancelButtonProps,
+      iconType = 'question-circle',
     } = props;
-    const iconType = props.iconType || 'question-circle';
+    warning(
+      !('iconType' in props),
+      `The property 'iconType' is deprecated. Use the property 'icon' instead.`,
+    );
+    const icon = props.icon ? props.icon : iconType;
     const okType = props.okType || 'primary';
     const prefixCls = props.prefixCls || 'ant-modal';
     const contentPrefixCls = `${prefixCls}-confirm`;
     // 默认为 true，保持向下兼容
     const okCancel = 'okCancel' in props ? props.okCancel : true;
     const width = props.width || 416;
     const style = props.style || {};
+    const mask = props.mask === undefined ? true : props.mask;
     // 默认为 false，保持旧版默认行为
     const maskClosable = props.maskClosable === undefined ? false : props.maskClosable;
     const runtimeLocale = getConfirmLocale();
     const okText = props.okText || (okCancel ? runtimeLocale.okText : runtimeLocale.justOkText);
     const cancelText = props.cancelText || runtimeLocale.cancelText;
     const autoFocusButton = props.autoFocusButton === null ? false : props.autoFocusButton || 'ok';
+    const transitionName = props.transitionName || 'zoom';
+    const maskTransitionName = props.maskTransitionName || 'fade';
 
     const classString = classNames(
       contentPrefixCls,
@@ -54,6 +64,7 @@ export default {
         {cancelText}
       </ActionButton>
     );
+    const iconNode = typeof icon === 'string' ? <Icon type={icon} /> : icon;
 
     return (
       <Dialog
@@ -63,9 +74,10 @@ export default {
         onCancel={e => close({ triggerCancel: true }, e)}
         visible={visible}
         title=""
-        transitionName="zoom"
+        transitionName={transitionName}
         footer=""
-        maskTransitionName="fade"
+        maskTransitionName={maskTransitionName}
+        mask={mask}
         maskClosable={maskClosable}
         maskStyle={maskStyle}
         style={style}
@@ -78,7 +90,7 @@ export default {
       >
         <div class={`${contentPrefixCls}-body-wrapper`}>
           <div class={`${contentPrefixCls}-body`}>
-            <Icon type={iconType} />
+            {iconNode}
             <span class={`${contentPrefixCls}-title`}>{props.title}</span>
             <div class={`${contentPrefixCls}-content`}>{props.content}</div>
           </div>

components/modal/Modal.jsx

@@ -2,19 +2,20 @@ import classNames from 'classnames';
 import Dialog from '../vc-dialog';
 import PropTypes from '../_util/vue-types';
 import addEventListener from '../_util/Dom/addEventListener';
+import { getConfirmLocale } from './locale';
+import Icon from '../icon';
 import Button from '../button';
 import buttonTypes from '../button/buttonTypes';
 const ButtonType = buttonTypes().type;
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
-import { getConfirmLocale } from './locale';
 import {
   initDefaultProps,
   getComponentFromProp,
   getClass,
   getStyle,
   mergeProps,
 } from '../_util/props-util';
-import Icon from '../icon';
+import { ConfigConsumerProps } from '../config-provider';
 
 let mousePosition = null;
 let mousePositionEventBinded = false;
@@ -42,13 +43,16 @@ const modalProps = (defaultProps = {}) => {
     /** 底部内容*/
     footer: PropTypes.any,
     /** 确认按钮文字*/
-    okText: PropTypes.string,
+    okText: PropTypes.any,
     /** 确认按钮类型*/
     okType: ButtonType,
     /** 取消按钮文字*/
-    cancelText: PropTypes.string,
+    cancelText: PropTypes.any,
+    icon: PropTypes.any,
     /** 点击蒙层是否允许关闭*/
     maskClosable: PropTypes.bool,
+    /** 强制渲染 Modal*/
+    forceRender: PropTypes.bool,
     okButtonProps: PropTypes.object,
     cancelButtonProps: PropTypes.object,
     destroyOnClose: PropTypes.bool,
@@ -66,14 +70,15 @@ const modalProps = (defaultProps = {}) => {
   return initDefaultProps(props, defaultProps);
 };
 
+export const destroyFns = [];
+
 export default {
   name: 'AModal',
   model: {
     prop: 'visible',
     event: 'change',
   },
   props: modalProps({
-    prefixCls: 'ant-modal',
     width: 520,
     transitionName: 'zoom',
     maskTransitionName: 'fade',
@@ -83,6 +88,9 @@ export default {
     // okButtonDisabled: false,
     // cancelButtonDisabled: false,
   }),
+  inject: {
+    configProvider: { default: () => ({}) },
+  },
   mounted() {
     if (mousePositionEventBinded) {
       return;
@@ -145,7 +153,17 @@ export default {
   },
 
   render() {
-    const { visible, wrapClassName, centered, prefixCls, $listeners, $slots } = this;
+    const {
+      prefixCls: customizePrefixCls,
+      visible,
+      wrapClassName,
+      centered,
+      $listeners,
+      $slots,
+    } = this;
+
+    const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
+    const prefixCls = getPrefixCls('modal', customizePrefixCls);
 
     const defaultFooter = (
       <LocaleReceiver

components/modal/confirm.js

@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import ConfirmDialog from './ConfirmDialog';
+import { destroyFns } from './Modal';
 
 export default function confirm(config) {
   const div = document.createElement('div');
@@ -30,6 +31,13 @@ export default function confirm(config) {
     if (config.onCancel && triggerCancel) {
       config.onCancel(...args);
     }
+    for (let i = 0; i < destroyFns.length; i++) {
+      const fn = destroyFns[i];
+      if (fn === close) {
+        destroyFns.splice(i, 1);
+        break;
+      }
+    }
   }
 
   function render(props) {
@@ -48,7 +56,7 @@ export default function confirm(config) {
   }
 
   confirmDialogInstance = render(currentConfig);
-
+  destroyFns.push(close);
   return {
     destroy: close,
     update,

components/modal/demo/confirm-router.md

@@ -0,0 +1,48 @@
+
+<cn>
+#### 销毁确认对话框
+使用 `Modal.destroyAll()` 可以销毁弹出的确认窗。通常用于路由监听当中，处理路由前进、后退不能销毁确认对话框的问题。
+</cn>
+
+<us>
+#### destroy confirmation modal dialog
+`Modal.destroyAll()` could destroy all confirmation modal dialogs. Usually, you can use it in router change event to destroy confirm modal dialog automatically
+</us>
+
+```html
+<template>
+  <a-button @click="showConfirm">
+    Confirm
+  </a-button>
+</template>
+<script>
+import Button from '../../button'
+export default {
+  methods: {
+    showConfirm() {
+      for (let i = 0; i < 3; i += 1) {
+        setTimeout(() => {
+          this.$confirm({
+            content: (  // JSX support
+              <Button onClick={this.destroyAll}>
+                Click to destroy all
+              </Button>
+            ),
+            onOk() {
+              return new Promise((resolve, reject) => {
+                setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
+              }).catch(() => console.log('Oops errors!'));
+            },
+            onCancel() {},
+          });
+        }, i * 500);
+      }
+    },
+    destroyAll() {
+      this.$destroyAll();
+    }
+  }
+}
+</script>
+```
+

components/modal/demo/index.vue

@@ -9,6 +9,7 @@ import Locale from './locale';
 import Manual from './manual';
 import Position from './position';
 import ButtonProps from './button-props';
+import ConfirmRouter from './confirm-router';
 
 import CN from '../index.zh-CN.md';
 import US from '../index.en-US.md';
@@ -17,7 +18,7 @@ const md = {
           模态对话框。
 ## 何时使用
 需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 \`Modal\` 在当前页面正中打开一个浮层，承载相应的操作。
-另外当需要一个简洁的确认框询问用户时，可以使用精心封装好的 \`antd.Modal.confirm()\` 等方法。
+另外当需要一个简洁的确认框询问用户时，可以使用 \`Modal.confirm()\` 等语法糖方法。
           ## 代码演示`,
   us: `# Modal
           Modal dialogs.
@@ -49,6 +50,7 @@ export default {
         <Manual/>
         <Position/>
         <ButtonProps />
+        <ConfirmRouter />
         <api>
           <CN slot='cn' />
           <US/>

components/modal/index.en-US.md

@@ -11,6 +11,7 @@
 | confirmLoading | Whether to apply loading visual effect for OK button or not | boolean | false |
 | destroyOnClose | Whether to unmount child components on onClose | boolean | false |
 | footer | Footer content, set as `:footer="null"` when you don't need default buttons | string\|slot | OK and Cancel buttons |
+| forceRender | Force render Modal | boolean | false |
 | getContainer | Return the mount node for Modal | (instance): HTMLElement | () => document.body |
 | mask | Whether show mask or not. | Boolean | true |
 | maskClosable | Whether to close the modal dialog when the mask (area outside the modal) is clicked | boolean | true |
@@ -55,8 +56,10 @@ The properties of the object are follows:
 | centered | Centered Modal | Boolean | `false` |
 | class | class of container | string | - |
 | content | Content | string\|vNode | - |
-| iconType | Icon `type` of the Icon component | string | `question-circle` |
+| icon | custom icon (`Added in 1.40.0`) | string\|slot | `<Icon type="question-circle">` |
+| iconType | Icon `type` of the Icon component (deperated after `1.40.0`) | string | `question-circle` |
 | keyboard | Whether support press esc to close | Boolean | true |
+| mask | Whether show mask or not. | Boolean | true |
 | maskClosable | Whether to close the modal dialog when the mask (area outside the modal) is clicked | Boolean | `false` |
 | okText | Text of the OK button | string | `OK` |
 | okType | Button `type` of the OK button | string | `primary` |
@@ -80,3 +83,16 @@ modal.update({
 
 modal.destroy();
 ```
+
+- `Modal.destroyAll`
+
+`Modal.destroyAll()` 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
+const router = new VueRouter({ ... })
+
+// router change
+router.beforeEach((to, from, next) => {
+  Modal.destroyAll();
+})
+```

components/modal/index.js

@@ -1,4 +1,4 @@
-import Modal from './Modal';
+import Modal, { destroyFns } from './Modal';
 import modalConfirm from './confirm';
 
 // export { ActionButtonProps } from './ActionButton'
@@ -7,7 +7,7 @@ import modalConfirm from './confirm';
 const info = function(props) {
   const config = {
     type: 'info',
-    iconType: 'info-circle',
+    icon: <Icon type="info-circle" />,
     okCancel: false,
     ...props,
   };
@@ -17,7 +17,7 @@ const info = function(props) {
 const success = function(props) {
   const config = {
     type: 'success',
-    iconType: 'check-circle',
+    icon: <Icon type="check-circle" />,
     okCancel: false,
     ...props,
   };
@@ -27,7 +27,7 @@ const success = function(props) {
 const error = function(props) {
   const config = {
     type: 'error',
-    iconType: 'close-circle',
+    icon: <Icon type="close-circle" />,
     okCancel: false,
     ...props,
   };
@@ -37,7 +37,7 @@ const error = function(props) {
 const warning = function(props) {
   const config = {
     type: 'warning',
-    iconType: 'exclamation-circle',
+    icon: <Icon type="exclamation-circle" />,
     okCancel: false,
     ...props,
   };
@@ -60,6 +60,15 @@ Modal.warning = warning;
 Modal.warn = warn;
 Modal.confirm = confirm;
 
+Modal.destroyAll = function() {
+  while (destroyFns.length) {
+    const close = destroyFns.pop();
+    if (close) {
+      close();
+    }
+  }
+};
+
 /* istanbul ignore next */
 Modal.install = function(Vue) {
   Vue.component(Modal.name, Modal);

components/modal/index.zh-CN.md

@@ -10,6 +10,7 @@
 | confirmLoading | 确定按钮 loading | boolean | 无 |
 | destroyOnClose | 关闭时销毁 Modal 里的子元素 | boolean | false |
 | footer | 底部内容，当不需要默认底部按钮时，可以设为 `:footer="null"` | string\|slot | 确定取消按钮 |
+| forceRender | 强制渲染 Modal | boolean | false |
 | getContainer | 指定 Modal 挂载的 HTML 节点 | (instance): HTMLElement | () => document.body |
 | keyboard | 是否支持键盘esc关闭 | boolean | true |
 | mask | 是否展示遮罩 | Boolean | true |
@@ -54,7 +55,9 @@
 | centered | 垂直居中展示 Modal | Boolean | `false` |
 | class | 容器类名 | string | - |
 | content | 内容 | string\|vNode | 无 |
-| iconType | 图标 Icon 类型 | string | question-circle |
+| icon | 自定义图标（1.40.0 新增） | string\|slot | `<Icon type="question-circle">` |
+| iconType | 图标类型（1.40.0 后废弃，请使用 `icon`） | string | `question-circle` |
+| mask | 是否展示遮罩 | Boolean | true |
 | maskClosable | 点击蒙层是否允许关闭 | Boolean | `false` |
 | keyboard | 是否支持键盘esc关闭 | boolean | true |
 | okText | 确认按钮文字 | string | 确定 |
@@ -79,3 +82,15 @@ modal.update({
 
 modal.destroy();
 ```
+- `Modal.destroyAll`
+
+使用 `Modal.destroyAll()` 可以销毁弹出的确认窗（即上述的 Modal.info、Modal.success、Modal.error、Modal.warning、Modal.confirm）。通常用于路由监听当中，处理路由前进、后退不能销毁确认对话框的问题，而不用各处去使用实例的返回值进行关闭（modal.destroy() 适用于主动关闭，而不是路由这样被动关闭）
+
+```jsx
+const router = new VueRouter({ ... })
+
+// router change
+router.beforeEach((to, from, next) => {
+  Modal.destroyAll();
+})
+```