Modal.confirm, iconClassName => iconType

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 = (
     <div className="ant-confirm-body">
-      <Icon type={iconClassType} />
+      <Icon type={props.iconType} />
       <span className="ant-confirm-title">{props.title}</span>
       <div className="ant-confirm-content">{props.content}</div>
     </div>
@@ -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(<Dialog
-    prefixCls="ant-modal"
-    className="ant-confirm"
+    className={classString}
     visible
     closable={false}
     title=""

components/modal/demo/info.md

@@ -24,14 +24,14 @@ function info() {
 function success() {
   Modal.success({
     title: '这是一条通知信息',
-    content: '一些附加信息一些附加信息一些附加信息'
+    content: '一些附加信息一些附加信息一些附加信息',
   });
 }
 
 function error() {
   Modal.error({
     title: '这是一条通知信息',
-    content: '一些附加信息一些附加信息一些附加信息'
+    content: '一些附加信息一些附加信息一些附加信息',
   });
 }
 
@@ -41,4 +41,3 @@ ReactDOM.render(<div>
   <Button onClick={error}>失败提示</Button>
 </div>, mountNode);
 ````
-

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);
 };

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           | 取消       |
 

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 {