diff --git a/components/modal/confirm.jsx b/components/modal/confirm.jsx index a95c81ffa6..495a85936b 100644 --- a/components/modal/confirm.jsx +++ b/components/modal/confirm.jsx @@ -3,6 +3,7 @@ import ReactDOM from 'react-dom'; import Dialog from './Modal'; import Icon from '../icon'; import Button from '../button'; +import classNames from 'classnames'; const defaultLocale = { okText: '确定', @@ -26,9 +27,7 @@ export default function confirm(config) { document.body.appendChild(div); let d; - props.iconClassName = props.iconClassName || 'question-circle'; - - let iconClassType = props.iconClassName; + props.iconType = props.iconType || 'question-circle'; let width = props.width || 416; @@ -91,7 +90,7 @@ export default function confirm(config) { let body = (
- + {props.title}
{props.content}
@@ -119,9 +118,14 @@ export default function confirm(config) { ); } + const classString = classNames({ + 'ant-confirm': true, + [`ant-confirm-${props.type}`]: true, + [props.className]: !!props.className, + }); + ReactDOM.render( , mountNode); ```` - diff --git a/components/modal/index.jsx b/components/modal/index.jsx index 3685426fd8..378be8cc53 100644 --- a/components/modal/index.jsx +++ b/components/modal/index.jsx @@ -3,35 +3,39 @@ import confirm from './confirm'; Modal.info = function (props) { const config = { - ...props, - iconClassName: 'info-circle', + type: 'info', + iconType: 'info-circle', okCancel: false, + ...props, }; return confirm(config); }; Modal.success = function (props) { const config = { - ...props, - iconClassName: 'check-circle', + type: 'success', + iconType: 'check-circle', okCancel: false, + ...props, }; return confirm(config); }; Modal.error = function (props) { const config = { - ...props, - iconClassName: 'cross-circle', + type: 'error', + iconType: 'cross-circle', okCancel: false, + ...props, }; return confirm(config); }; Modal.confirm = function (props) { const config = { - ...props, + type: 'confirm', okCancel: true, + ...props, }; return confirm(config); }; diff --git a/components/modal/index.md b/components/modal/index.md index b868871d23..6302858719 100644 --- a/components/modal/index.md +++ b/components/modal/index.md @@ -47,9 +47,9 @@ english: Modal | title | 标题 | React.Element or String | 无 | | content | 内容 | React.Element or String | 无 | | onOk | 点击确定回调,参数为关闭函数,返回 promise 时 resolve 后自动关闭 | function | 无 | -| onCancel | 取消回调,参数为关闭函数,返回 promise 时 resolve 后自动关闭 | function | 无 | +| onCancel | 取消回调,参数为关闭函数,返回 promise 时 resolve 后自动关闭 | function | 无 | | width | 宽度 | String or Number | 416 | -| iconClassName | 图标 Icon 类型 | String | question-circle | +| iconType | 图标 Icon 类型 | String | question-circle | | okText | 确认按钮文字 | String | 确定 | | cancelText | 取消按钮文字 | String | 取消 | diff --git a/style/components/confirm.less b/style/components/confirm.less index 9e98fcb725..444aeac41e 100644 --- a/style/components/confirm.less +++ b/style/components/confirm.less @@ -1,7 +1,6 @@ @confirm-prefix-cls: ant-confirm; .@{confirm-prefix-cls} { - .ant-modal-header { display: none; } @@ -31,22 +30,22 @@ position: relative; top: 5px; } + } - .anticon-exclamation-circle { - color: @error-color; - } + &&-error .anticon { + color: @error-color; + } - .anticon-question-circle { - color: @warning-color; - } + &&-warning .anticon { + color: @warning-color; + } - .anticon-check-circle { - color: @success-color; - } + &&-success .anticon { + color: @success-color; + } - .anticon-info-circle { - color: @primary-color; - } + &&-info .anticon { + color: @primary-color; } .@{confirm-prefix-cls}-btns {