Merge branch 'master' into develop-0.11.0

components/alert/demo/close-type.md

@@ -8,9 +8,8 @@
 
 ````jsx
 import { Alert } from 'antd';
-const link = <a href="#">不再提醒</a>;
 
 ReactDOM.render(
-<Alert message="消息提示的文案" type="info" closeText={link} />
+<Alert message="消息提示的文案" type="info" closeText="不再提醒" />
 , document.getElementById('components-alert-demo-close-type'));
 ````

components/alert/index.jsx

@@ -2,11 +2,15 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import Animate from 'rc-animate';
 import Icon from '../icon';
+import classNames from 'classnames';
 
 export default React.createClass({
   getDefaultProps() {
     return {
-      prefixCls: 'ant-alert'
+      prefixCls: 'ant-alert',
+      showIcon: false,
+      closeText: <Icon type="cross" />,
+      onClose() {}
     };
   },
   getInitialState() {
@@ -26,9 +30,7 @@ export default React.createClass({
     this.setState({
       closing: false
     });
-    if (this.props.onClose) {
+    this.props.onClose.call(this, e);
-      this.props.onClose.call(this, e);
-    }
   },
   animationEnd() {
     this.setState({
@@ -37,10 +39,12 @@ export default React.createClass({
     });
   },
   render() {
-    let iconClass = this.props.description ?
+    let {
-      'ant-alert-with-description-icon' : 'ant-alert-icon';
+      closable, description, type, prefixCls, message, closeText
+    } = this.props;
+
     let iconType = '';
-    switch (this.props.type) {
+    switch (type) {
     case 'success':
       iconType = 'check-circle';
       break;
@@ -56,44 +60,32 @@ export default React.createClass({
     default:
       iconType = 'default';
     }
-    let html;
+
-    let closeName = !this.state.closing ? ' ' + this.props.prefixCls + '-close' : '';
+    let alertCls = classNames({
-    if (this.props.description) {
+      [prefixCls]: true,
-      let close = this.props.closable ?
+      [prefixCls + '-' + type]: true,
-        <a onClick={this.handleClose} className={'ant-alert-with-description-close-icon'}>
+      [prefixCls + '-close']: !this.state.closing,
-          <span className="ant-alert-with-description-close-icon-x"></span>
+      [prefixCls + '-with-description']: !!description,
-        </a> : '';
+    });
-      html = <div data-show={this.state.closing} className={'ant-alert-with-description ant-alert-with-description-' + this.props.type + closeName}>
+
-        <Icon className={iconClass} type={iconType} />
+    if (closeText) {
-        <p className={'ant-alert-with-description-message'}>{this.props.message}</p>
+      closable = true;
-        <span className={'ant-alert-with-description-description'}>{this.props.description}</span>
-          {close}
-      </div>;
-    } else {
-      if (this.props.closeText) {
-        html = <div data-show={this.state.closing} className={'ant-alert ant-alert-' + this.props.type + closeName}>
-          <Icon className={iconClass} type={iconType} />
-          <span className={'ant-alert-description'}>{this.props.message}</span>
-          <span onClick={this.handleClose} className={'ant-alert-close-text'}>{this.props.closeText}</span>
-        </div>;
-      } else {
-        let close = this.props.closable ?
-          <a onClick={this.handleClose} className={'ant-alert-close-icon'}>
-            <span className="ant-alert-close-icon-x"></span>
-          </a> : '';
-        html = <div data-show={this.state.closing} className={'ant-alert ant-alert-' + this.props.type + closeName}>
-          <Icon className={iconClass} type={iconType} />
-          <span className={'ant-alert-description'}>{this.props.message}</span>
-          {close}
-        </div>;
-      }
     }
-    return this.state.closed ? null : <Animate
+
-      component=""
+    return this.state.closed ? null : (
-      showProp="data-show"
+      <Animate component=""
-      transitionName="slide-up"
+               showProp="data-show"
-      onEnd={this.animationEnd}>
+               transitionName="slide-up"
-      {html}
+               onEnd={this.animationEnd}>
-    </Animate>;
+        <div data-show={this.state.closing} className={alertCls}>
+          <Icon className="ant-alert-icon" type={iconType} />
+          <span className={prefixCls + '-message'}>{message}</span>
+          <span className={prefixCls + '-description'}>{description}</span>
+          {closable ? <a onClick={this.handleClose} className={prefixCls + '-close-icon'}>
+            {closeText}
+          </a> : null}
+        </div>
+      </Animate>
+    );
   }
 });

components/tree/demo/special.md

@@ -50,7 +50,7 @@ class TreeDemo extends React.Component {
           <TreeNode key="p10" title="leaf"/>
           <TreeNode title="parent 1-1" key="p11">
             <TreeNode title="parent 2-1" key="p21">
-              <TreeNode>test</TreeNode>
+              <TreeNode title="test" />
               <TreeNode title={<span>sss</span>}/>
             </TreeNode>
             <TreeNode key="p22" title="leaf"/>

style/components/alert.less

@@ -20,13 +20,15 @@
 
   &-description {
     font-size: 12px;
-    line-height: 16px;
+    color: @legend-color;
+    line-height: 21px;
+    display: none;
   }
 
   &-success {
     border: 1px solid tint(@success-color, 80%);
     background-color: tint(@success-color, 90%);
-    .anticon {
+    .@{alert-prefix-cls}-icon {
       color: @success-color;
     }
   }
@@ -34,7 +36,7 @@
   &-info {
     border: 1px solid tint(@primary-color, 80%);
     background-color: tint(@primary-color, 90%);
-    .anticon {
+    .@{alert-prefix-cls}-icon {
       color: @primary-color;
     }
   }
@@ -42,7 +44,7 @@
   &-warn {
     border: 1px solid tint(@warning-color, 80%);
     background-color: tint(@warning-color, 90%);
-    .anticon {
+    .@{alert-prefix-cls}-icon {
       color: @warning-color;
     }
   }
@@ -50,38 +52,29 @@
   &-error {
     border: 1px solid tint(@error-color, 80%);
     background-color: tint(@error-color, 90%);
-    .anticon {
+    .@{alert-prefix-cls}-icon {
       color: @error-color;
     }
   }
 
-  &-close-icon,
+  &-close-icon {
-  &-with-description-close-icon {
     font-size: 12px;
     position: absolute;
-    right: 8px;
+    right: 16px;
     top: 50%;
     margin-top: -6px;
-    transition: color .3s ease;
-    color: #999;
-    width: 12px;
     height: 12px;
+    line-height: 12px;
     overflow: hidden;
+    cursor: pointer;
 
-    &-x {
+    .anticon-cross {
-      position: absolute;
+      color: @legend-color;
-      top: -3px;
+      transition: color .3s ease;
-      &:before {
+      &:hover {
-        font-weight: 700;
+        color: #444;
-        text-shadow: 0 1px 0 #fff;
-        content: "\e62d";
-        font-family: "anticon";
       }
     }
-
-    &:hover {
-      color: #444;
-    }
   }
 
   &-close-text {
@@ -95,69 +88,38 @@
     border-radius: @border-radius-base;
     margin-bottom: 10px;
     color: @text-color;
+    line-height: 1.5;
+  }
 
-    &-icon {
+  &-with-description &-icon {
-      position: absolute;
+    position: absolute;
-      top: 50%;
+    top: 50%;
-      left: 24px;
+    left: 24px;
-      margin-top: -15px;
+    margin-top: -15px;
-      font-size: 29px;
+    font-size: 29px;
-    }
+  }
 
-    &-close-icon {
+  &-with-description &-close-icon {
-      position: absolute;
+    position: absolute;
-      top: 17px;
+    top: 17px;
-      right: 16px;
+    right: 16px;
-      cursor: pointer;
+    cursor: pointer;
-      font-size: 12px;
+    font-size: 12px;
-    }
+  }
 
-    &-message {
+  &-with-description &-message {
-      font-size: 14px;
+    font-size: 14px;
-      color: @text-color;
+    color: @text-color;
-    }
+    display: block;
+  }
 
-    &-description {
+  &-with-description &-description {
-      font-size: 12px;
+    display: block;
-      color: @legend-color;
-    }
-
-    &-success {
-      border: 1px solid tint(@success-color, 80%);
-      background-color: tint(@success-color, 90%);
-      .anticon {
-        color: @success-color;
-      }
-    }
-
-    &-info {
-      border: 1px solid tint(@primary-color, 80%);
-      background-color: tint(@primary-color, 90%);
-      .anticon {
-        color: @primary-color;
-      }
-    }
-
-    &-warn {
-      border: 1px solid tint(@warning-color, 80%);
-      background-color: tint(@warning-color, 90%);
-      .anticon {
-        color: @warning-color;
-      }
-    }
-
-    &-error {
-      border: 1px solid tint(@error-color, 80%);
-      background-color: tint(@error-color, 90%);
-      .anticon {
-        color: @error-color;
-      }
-    }
   }
 
   &-close {
-    height: 0 !important;
+    height: 0;
-    opacity: 0 !important;
+    opacity: 0;
     margin: 0;
     padding-top: 0;
     padding-bottom: 0;