⚡ Add icon to Modal.confirm/info/warning/error

deperated `iconType` close ant-design#13918
jawQ · Dec 26, 2018 · 5c26635 · 5c26635
1 parent 8b5e78f
commit 5c26635
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 13 deletions.
diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx
@@ -76,6 +76,8 @@ export interface ModalFuncProps {
   okText?: string;
   okType?: ButtonType;
   cancelText?: string;
+  icon?: React.ReactNode;
+  /* Deperated */
   iconType?: string;
   maskClosable?: boolean;
   zIndex?: number;

diff --git a/components/modal/confirm.tsx b/components/modal/confirm.tsx
@@ -5,6 +5,7 @@ import Icon from '../icon';
 import Dialog, { ModalFuncProps, destroyFns } from './Modal';
 import ActionButton from './ActionButton';
 import { getConfirmLocale } from './locale';
+import warning from '../_util/warning';
 
 interface ConfirmDialogProps extends ModalFuncProps {
   afterClose?: () => void;
@@ -28,8 +29,13 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
     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`;
@@ -61,6 +67,8 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
     </ActionButton>
   );
 
+  const iconNode = typeof icon === 'string' ? <Icon type={icon} /> : icon;
+
   return (
     <Dialog
       prefixCls={prefixCls}
@@ -84,7 +92,7 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
     >
       <div className={`${contentPrefixCls}-body-wrapper`}>
         <div className={`${contentPrefixCls}-body`}>
-          <Icon type={iconType!} />
+          {iconNode}
           <span className={`${contentPrefixCls}-title`}>{props.title}</span>
           <div className={`${contentPrefixCls}-content`}>{props.content}</div>
         </div>
@@ -141,10 +149,10 @@ export default function confirm(config: ModalFuncProps) {
       config.onCancel(...args);
     }
     for (let i = 0; i < destroyFns.length; i++) {
-      const fn = destroyFns[i]
+      const fn = destroyFns[i];
       if (fn === destroy) {
-        destroyFns.splice(i, 1)
-        break
+        destroyFns.splice(i, 1);
+        break;
       }
     }
   }
@@ -155,7 +163,7 @@ export default function confirm(config: ModalFuncProps) {
 
   render(currentConfig);
 
-  destroyFns.push(close)
+  destroyFns.push(close);
 
   return {
     destroy: close,

diff --git a/components/modal/index.en-US.md b/components/modal/index.en-US.md
@@ -68,7 +68,8 @@ The properties of the object are follows:
 | centered | Centered Modal | Boolean | `false` |
 | className | className of container | string | - |
 | content | Content | string\|ReactNode | - |
-| iconType | Icon `type` of the Icon component | string | `question-circle` |
+| icon | custom icon (`Added in 3.12.0`) | string\|ReactNode | `<Icon type="question-circle">` |
+| iconType | Icon `type` of the Icon component (deperated after `3.12.0`) | string | `question-circle` |
 | keyboard | Whether support press esc to close | 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` |

diff --git a/components/modal/index.tsx b/components/modal/index.tsx
@@ -1,13 +1,15 @@
+import * as React from 'react';
 import Modal, { ModalFuncProps, destroyFns } from './Modal';
 import confirm from './confirm';
+import Icon from '../icon';
 
 export { ActionButtonProps } from './ActionButton';
 export { ModalProps, ModalFuncProps } from './Modal';
 
 Modal.info = function(props: ModalFuncProps) {
   const config = {
     type: 'info',
-    iconType: 'info-circle',
+    icon: <Icon type="info-circle" />,
     okCancel: false,
     ...props,
   };
@@ -17,7 +19,7 @@ Modal.info = function(props: ModalFuncProps) {
 Modal.success = function(props: ModalFuncProps) {
   const config = {
     type: 'success',
-    iconType: 'check-circle',
+    icon: <Icon type="check-circle" />,
     okCancel: false,
     ...props,
   };
@@ -27,7 +29,7 @@ Modal.success = function(props: ModalFuncProps) {
 Modal.error = function(props: ModalFuncProps) {
   const config = {
     type: 'error',
-    iconType: 'close-circle',
+    icon: <Icon type="close-circle" />,
     okCancel: false,
     ...props,
   };
@@ -37,7 +39,7 @@ Modal.error = function(props: ModalFuncProps) {
 Modal.warning = Modal.warn = function(props: ModalFuncProps) {
   const config = {
     type: 'warning',
-    iconType: 'exclamation-circle',
+    icon: <Icon type="exclamation-circle" />,
     okCancel: false,
     ...props,
   };
@@ -53,7 +55,7 @@ Modal.confirm = function(props: ModalFuncProps) {
   return confirm(config);
 };
 
-Modal.destroyAll = function () {
+Modal.destroyAll = function() {
   while (destroyFns.length) {
     const close = destroyFns.pop();
     if (close) {

diff --git a/components/modal/index.zh-CN.md b/components/modal/index.zh-CN.md
@@ -67,7 +67,8 @@ title: Modal
 | centered | 垂直居中展示 Modal | Boolean | `false` |
 | className | 容器类名 | string | - |
 | content | 内容 | string\|ReactNode | 无 |
-| iconType | 图标 Icon 类型 | string | question-circle |
+| icon | 自定义图标（3.12.0 新增） | string\|ReactNode | `<Icon type="question-circle">` |
+| iconType | 图标类型（3.12.0 后废弃，请使用 `icon`） | string | `question-circle` |
 | maskClosable | 点击蒙层是否允许关闭 | Boolean | `false` |
 | okText | 确认按钮文字 | string | 确定 |
 | okType | 确认按钮类型 | string | primary |