diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx index 9a6d78d38b04..484a65917167 100644 --- 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 index f23ae31d70a3..914308b78c78 100644 --- 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) => { ); + const iconNode = typeof icon === 'string' ? : icon; + return ( { >
- + {iconNode} {props.title}
{props.content}
@@ -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 index acf5d1f30ccf..ad97b9e868ea 100644 --- 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 | `` | +| 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 index 0ae2526a2f19..a0324d1a3ea1 100644 --- a/components/modal/index.tsx +++ b/components/modal/index.tsx @@ -1,5 +1,7 @@ +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'; @@ -7,7 +9,7 @@ export { ModalProps, ModalFuncProps } from './Modal'; Modal.info = function(props: ModalFuncProps) { const config = { type: 'info', - iconType: 'info-circle', + icon: , 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: , 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: , 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: , 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 index f5e201e9d5b2..ad64c41a3e86 100644 --- 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 | `` | +| iconType | 图标类型(3.12.0 后废弃,请使用 `icon`) | string | `question-circle` | | maskClosable | 点击蒙层是否允许关闭 | Boolean | `false` | | okText | 确认按钮文字 | string | 确定 | | okType | 确认按钮类型 | string | primary |