Merge branch 'master' of github.com:ant-design/ant-design

components/modal/demo/footer.md

@@ -37,8 +37,8 @@ var Test = React.createClass({
        visible={this.state.visible}
        title="对话框标题" onOk={this.handleOk} onCancel={this.handleCancel}
         footer={[
-          <button className="ant-btn" onClick={this.handleCancel}>返 回</button>,
+          <button key="back" className="ant-btn" onClick={this.handleCancel}>返 回</button>,
-          <button className="ant-btn ant-btn-primary" onClick={this.handleOk}>
+          <button key="submit" className="ant-btn ant-btn-primary" onClick={this.handleOk}>
             提 交
             <i className={'anticon anticon-loading'+(this.state.loading?'':'hide')}></i>
           </button>

components/modal/index.jsx

@@ -44,8 +44,8 @@ var Modal = React.createClass({
   render() {
     var props = this.props;
     var footer = props.footer || [
-        <button type="button" className="ant-btn-default ant-btn" onClick={this.handleCancel}>取 消</button>,
+        <button key="cancel" type="button" className="ant-btn-default ant-btn" onClick={this.handleCancel}>取 消</button>,
-        <button type="button" className="ant-btn-primary ant-btn" onClick={this.handleOk}>确 定</button>
+        <button key="confirm" type="button" className="ant-btn-primary ant-btn" onClick={this.handleOk}>确 定</button>
       ];
     return <Dialog transitionName="zoom" onBeforeClose={props.onCancel} visible={this.state.visible} maskAnimation="fade" width="500" footer={footer} {...props} ref="d"/>;
   }

components/popover/demo/basic.md

@@ -8,10 +8,10 @@
 
 ````jsx
 var Popover = antd.Popover;
-var content = [
+var content = <div>
-  <p>内容</p>,
   <p>内容</p>
-];
+  <p>内容</p>
+</div>;
 
 React.render(
   <Popover overlay={content} title="标题">

components/popover/demo/placement.md

@@ -9,10 +9,10 @@
 ````jsx
 var Popover = antd.Popover;
 var text = <span>标题</span>;
-var content = [
+var content = <div>
-  <p>内容</p>,
   <p>内容</p>
-];
+  <p>内容</p>
+</div>;
 
 React.render(<div>
   <Popover placement="left" title={text} overlay={content}>

components/popover/demo/triggerType.md

@@ -8,10 +8,10 @@
 
 ````jsx
 var Popover = antd.Popover;
-var content = [
+var content = <div>
-  <p>内容</p>,
   <p>内容</p>
-];
+  <p>内容</p>
+</div>;
 
 React.render(<div>
   <Popover overlay={content} title="标题" trigger="hover">

components/progress/index.jsx

@@ -3,6 +3,7 @@
 var Progressline = require('rc-progress').Line;
 var Progresscircle = require('rc-progress').Circle;
 var React = require('react');
+var assign = require('object-assign');
 
 var Line = React.createClass({
   getDefaultProps() {
@@ -20,28 +21,30 @@ var Line = React.createClass({
       'success': '#85D262'
     };
 
-    if (parseInt(this.props.percent) === 100) {
+    var props = assign({}, this.props);
-      this.props.status = 'success';
+
+    if (parseInt(props.percent) === 100) {
+      props.status = 'success';
     }
 
     var style = {
-      'width': this.props.width
+      'width': props.width
     };
-    var fontSize = (this.props.width / 100 * this.props.strokeWidth);
+    var fontSize = (props.width / 100 * props.strokeWidth);
     var iconStyle = {
-      'font-size': (fontSize < 14) ? 14 : fontSize
+      'fontSize': (fontSize < 14) ? 14 : fontSize
     };
     var textStyle = {
-      'color': statusColorMap[this.props.status]
+      'color': statusColorMap[props.status]
     };
     var progressInfo;
-    if (this.props.status === 'exception') {
+    if (props.status === 'exception') {
       progressInfo = (
         <span style={textStyle} className='ant-progress-line-text'>
           <i style={iconStyle} className="anticon anticon-exclamation-circle"></i>
         </span>
       );
-    } else if (this.props.status === 'success') {
+    } else if (props.status === 'success') {
       progressInfo = (
         <span style={textStyle} className='ant-progress-line-text'>
           <i style={iconStyle} className="anticon anticon-check-circle"></i>
@@ -49,15 +52,15 @@ var Line = React.createClass({
       );
     } else {
       progressInfo = (
-        <span className='ant-progress-line-text'>{this.props.percent}%</span>
+        <span className='ant-progress-line-text'>{props.percent}%</span>
       );
     }
 
     return (
       <div className='ant-progress-line-wrap'>
         <div className='ant-progress-line-inner' style={style}>
-          <Progressline percent={this.props.percent} strokeWidth={this.props.strokeWidth}
+          <Progressline percent={props.percent} strokeWidth={props.strokeWidth}
-                        strokeColor={statusColorMap[this.props.status]} trailColor="#e9e9e9" />
+            strokeColor={statusColorMap[props.status]} trailColor="#e9e9e9" />
         </div>
         {progressInfo}
       </div>
@@ -81,28 +84,30 @@ var Circle = React.createClass({
       'success': '#85D262'
     };
 
-    if (parseInt(this.props.percent) === 100) {
+    var props = assign({}, this.props);
-      this.props.status = 'success';
+
+    if (parseInt(props.percent) === 100) {
+      props.status = 'success';
     }
 
     var style = {
-      'width': this.props.width,
+      'width': props.width,
-      'height': this.props.width
+      'height': props.width
     };
     var wrapStyle = {
-      'font-size': this.props.width * 0.16 + 6
+      'fontSize': props.width * 0.16 + 6
     };
     var textStyle = {
-      'color': statusColorMap[this.props.status]
+      'color': statusColorMap[props.status]
     };
     var progressInfo;
-    if (this.props.status === 'exception') {
+    if (props.status === 'exception') {
       progressInfo = (
         <span style={textStyle} className='ant-progress-circle-text'>
           <i className='anticon anticon-exclamation'></i>
         </span>
       );
-    } else if (this.props.status === 'success') {
+    } else if (props.status === 'success') {
       progressInfo = (
         <span style={textStyle} className='ant-progress-circle-text'>
           <i className="anticon anticon-check"></i>
@@ -110,15 +115,15 @@ var Circle = React.createClass({
       );
     } else {
       progressInfo = (
-        <span className="ant-progress-circle-text">{this.props.percent}%</span>
+        <span className="ant-progress-circle-text">{props.percent}%</span>
       );
     }
 
     return (
       <div className="ant-progress-circle-wrap" style={wrapStyle}>
         <div className="ant-progress-circle-inner" style={style}>
-          <Progresscircle percent={this.props.percent} strokeWidth={this.props.strokeWidth}
+          <Progresscircle percent={props.percent} strokeWidth={props.strokeWidth}
-                        strokeColor={statusColorMap[this.props.status]} trailColor="#e9e9e9" />
+            strokeColor={statusColorMap[props.status]} trailColor="#e9e9e9" />
           {progressInfo}
         </div>
       </div>

components/select/demo/combobox.md

@@ -24,7 +24,7 @@ var Test = React.createClass({
     } else {
       options = ['gmail.com', '163.com', 'qq.com'].map(function(domain) {
         var email = value + '@' + domain;
-        return <Option value={email}>{email}</Option>;
+        return <Option key={email}>{email}</Option>;
       });
     }
     this.setState({

components/select/demo/multiple.md

@@ -13,7 +13,7 @@ var Option = Select.Option;
 
 var children = [];
 for (var i = 10; i < 36; i++) {
-  children.push(<Option value={i.toString(36) + i}>{i.toString(36) + i}</Option>);
+  children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
 }
 
 function handleChange(value) {

components/select/demo/tags.md

@@ -13,7 +13,7 @@ var Option = Select.Option;
 
 var children = [];
 for (var i = 10; i < 36; i++) {
-  children.push(<Option value={i.toString(36) + i}>{i.toString(36) + i}</Option>);
+  children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
 }
 
 function handleChange(value) {

components/select/index.jsx

@@ -17,3 +17,5 @@ module.exports = React.createClass({
     );
   }
 });
+
+module.exports.Option = Select.Option;

package.json

@@ -14,16 +14,17 @@
   "dependencies": {
     "gregorian-calendar": "~3.0.0",
     "gregorian-calendar-format": "~3.0.1",
+    "object-assign": "~3.0.0",
     "rc-calendar": "~3.10.0",
-    "rc-dialog": "~4.3.5",
+    "rc-dialog": "~4.4.0",
     "rc-dropdown": "~1.1.1",
     "rc-input-number": "~2.0.0",
     "rc-menu": "~3.4.0",
     "rc-progress": "~1.0.0",
-    "rc-select": "~4.0.0",
+    "rc-select": "~4.2.1",
     "rc-steps": "~1.1.3",
     "rc-switch": "~1.1.0",
-    "rc-tabs": "~5.1.0",
+    "rc-tabs": "~5.2.0",
     "rc-tooltip": "~2.4.0"
   },
   "devDependencies": {

style/components/select.less

@@ -1,7 +1,8 @@
 @selectPrefixCls: ant-select;
 
+@import "../mixins/iconfont";
 //mixin
-.selection__clear(){
+.selection__clear() {
   cursor: pointer;
   float: right;
   font-weight: bold;
@@ -131,6 +132,7 @@
     }
 
     .@{selectPrefixCls}-selection__choice__remove {
+      .iconfont-mixin();
       color: #919191;
       cursor: pointer;
       display: inline-block;
@@ -139,6 +141,10 @@
       &:hover {
         color: #333;
       }
+
+      &:before {
+        content: "\e61e";
+      }
     }
   }
 
@@ -157,7 +163,6 @@
     }
   }
 
-
   &-dropdown {
     display: none;
     background-color: white;

style/core/motion/zoom.less

@@ -2,6 +2,7 @@
   .make-motion(@className, @keyframeName);
   .@{className}-enter {
     opacity: 0;
+    transform: scale(0, 0);
     animation-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.28);
   }
   .@{className}-leave {