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

components/steps/demo/icon.md

@@ -12,8 +12,8 @@ var Step = Steps.Step;
 var container = document.getElementById('components-steps-demo-icon');
 
 React.render(<Steps>
-  <Step status='finish' title='步骤1' icon='cloud'></Step>
-  <Step status='process' title='步骤2' icon='apple'></Step>
-  <Step status='wait' title='步骤3' icon='github'></Step>
+  <Step status='finish' title='步骤1' icon='cloud' />
+  <Step status='process' title='步骤2' icon='apple' />
+  <Step status='wait' title='步骤3' icon='github' />
 </Steps>, container);
 ````

components/steps/demo/simple.md

@@ -24,10 +24,8 @@ var steps = [{
   title: '待运行',
   description: '这里是多信息的描述啊'
 }].map(function(s, i) {
-  return (<Step
-    key={i}
-    title={s.title}
-    description={s.description}></Step>
+  return (
+    <Step key={i} title={s.title} description={s.description} />
   );
 });
 

components/steps/demo/small-size.md

@@ -24,12 +24,10 @@ var steps = [{
   status: 'wait',
   title: '待运行'
 }].map(function(s, i) {
-  return (<Step
-    key={i}
-    status={s.status}
-    title={s.title}>
-  </Step>);
+  return (
+    <Step key={i} title={s.title} description={s.description} />
+  );
 });
 
-React.render(<Steps size="small">{steps}</Steps>, container);
+React.render(<Steps size="small" current={1}>{steps}</Steps>, container);
 ````

components/steps/demo/status.md

@@ -0,0 +1,37 @@
+# 自定义状态
+
+- order: 10
+
+可以使用 `status` 定义每个步骤的状态。
+
+---
+
+````jsx
+var Steps = antd.Steps;
+var Step = Steps.Step;
+var container = document.getElementById('components-steps-demo-status');
+
+var steps = [{
+  status: 'finish',
+  title: '已完成',
+  description: '这里是多信息的描述啊'
+}, {
+  status: 'process',
+  title: '进行中',
+  description: '这里是多信息的耶哦耶哦哦耶哦耶'
+}, {
+  status: 'wait',
+  title: '又一个待运行',
+  description: '描述啊描述啊'
+}, {
+  status: 'wait',
+  title: '待运行',
+  description: '这里是多信息的描述啊'
+}].map(function(s, i) {
+  return (
+    <Step key={i} title={s.title} status={s.status} description={s.description} />
+  );
+});
+
+React.render(<Steps>{steps}</Steps>, container);
+````

components/steps/demo/step-next.md

@@ -7,7 +7,7 @@
 ---
 
 ````css
-form.my-step-form > div {
+#components-steps-demo-step-next > div > div {
   margin-bottom: 30px;
 }
 ````
@@ -16,24 +16,20 @@ form.my-step-form > div {
 var Steps = antd.Steps;
 var Step = Steps.Step;
 var container = document.getElementById('components-steps-demo-step-next');
-var steps = (function generateRandomSteps() {
-  var n = Math.floor(Math.random() * 3) + 3;
-  var arr = [];
-  for (var i = 0; i < n; i++ ) {
-    arr.push({
-      title: '步骤' + (i+1)
-    });
-  }
-  return arr;
-})();
+var array = Array.apply(null, Array(Math.floor(Math.random() * 3) + 3));
+var steps = array.map(function(item, i) {
+  return {
+    title: '步骤' + (i + 1)
+  };
+});
 
-var MyForm = React.createClass({
+var App = React.createClass({
   getInitialState() {
     return {
       currentStep: Math.floor(Math.random() * steps.length)
     }
   },
-  nextStep() {
+  next() {
     var s = this.state.currentStep + 1;
     if (s === steps.length) {
       s = 0;
@@ -44,20 +40,19 @@ var MyForm = React.createClass({
   },
   render() {
     var cs = this.state.currentStep;
-    return (<form className='my-step-form'>
-      <div>当前正在执行第{cs + 1}步</div>
-      <div className='my-step-container'><Steps current={cs}>
-        {steps.map(function(s, i) {
-          return <Steps.Step
-            key={i}
-            title={s.title}
-            ></Steps.Step>
-        })}
-      </Steps></div>
-      <div><span className='ant-btn' onClick={this.nextStep}>下一步</span></div>
-    </form>)
+    return (
+      <div>
+        <div>当前正在执行第 {cs + 1} 步</div>
+        <Steps current={cs}>
+          {steps.map((s, i) => <Step key={i} title={s.title} description={s.description} />)}
+        </Steps>
+        <div>
+          <button className='ant-btn' onClick={this.next}>下一步</button>
+        </div>
+      </div>
+    );
   }
 });
 
-React.render(<MyForm></MyForm>, container);
+React.render(<App />, container);
 ````

components/steps/demo/vertical-small.md

@@ -12,25 +12,19 @@ var Step = Steps.Step;
 var container = document.getElementById('components-steps-demo-vertical-small');
 
 var steps = [{
-  status: 'finish',
   title: '已完成',
   description: '这里是信息的描述'
 }, {
-  status: 'process',
   title: '进行中',
   description: '这里是信息的描述'
 }, {
-  status: 'wait',
   title: '待运行',
   description: '这里是信息的描述'
 }].map(function(s, i) {
-  return (<Step
-    key={i}
-    status={s.status}
-    title={s.title}
-    description={s.description}></Step>
+  return (
+    <Step key={i} title={s.title} description={s.description} />
   );
 });
 
-React.render(<Steps size='small' direction='vertical'>{steps}</Steps>, container);
+React.render(<Steps size='small' direction='vertical' current={1}>{steps}</Steps>, container);
 ````

components/steps/demo/vertical.md

@@ -12,29 +12,22 @@ var Step = Steps.Step;
 var container = document.getElementById('components-steps-demo-vertical');
 
 var steps = [{
-  status: 'finish',
   title: '已完成',
   description: '这里是信息的描述'
 }, {
-  status: 'process',
   title: '进行中',
   description: '这里是信息的描述'
 }, {
-  status: 'wait',
   title: '待运行',
   description: '这里是信息的描述'
 }, {
-  status: 'wait',
   title: '又一个待运行',
   description: '这里是信息的描述'
 }].map(function(s, i) {
-  return (<Step
-    key={i}
-    status={s.status}
-    title={s.title}
-    description={s.description}></Step>
+  return (
+    <Step key={i} title={s.title} description={s.description} />
   );
 });
 
-React.render(<Steps direction='vertical'>{steps}</Steps>, container);
+React.render(<Steps direction='vertical' current={1}>{steps}</Steps>, container);
 ````

components/steps/index.md

@@ -29,10 +29,10 @@
 
 | 参数      | 说明                                     | 类型       |  可选值 |默认值 |
 |-----------|------------------------------------------|------------|-------|--------|
+|  current | 可选参数，指定当前处理正在执行状态的步骤，从0开始记数。在子Step元素中，可以通过status属性覆盖状态。  | number | 无  | 0 |
 |  size | 可选参数，指定大小（目前只支持普通和迷你两种大小）。 | string    |  small, default | default    |
 |  direction | 可选参数，指定步骤条方向（目前支持水平和竖直两种方向，默认水平方向）。 | string    |  vertical |  无   |
 |  maxDescriptionWidth | 可选参数，指定步骤的详细描述文字的最大宽度。 | number | 无 | 100 |
-|  current | 可选参数，指定当前处理正在执行状态的步骤，从0开始记数。在子Step元素中，可以通过status属性覆盖状态。  | number | 无  | 0 |
 
 ### Steps.Step
 

style/components/datepicker/Picker.less

@@ -6,7 +6,7 @@
   position: absolute;
   left: -9999px;
   top: -9999px;
-  z-index: 1000;
+  z-index: 1070;
 }
 
 .@{calendar-prefix-cls}-picker {