Update code style of Steps demos

components/steps/demo/error.md

@@ -9,19 +9,12 @@ title: 步骤运行错误
 import { Steps } from 'antd';
 const Step = Steps.Step;
 
-const steps = [{
+ReactDOM.render(
-  title: '已完成',
+  <Steps current={1} status="error">
-  description: '这里是多信息的描述啊',
+    <Step title="已完成" description="这里是多信息的描述" />
-}, {
+    <Step title="进行中" description="这里是多信息的描述" />
-  title: '错误示例',
+    <Step title="待运行" description="这里是多信息的描述" />
-  description: '这里是多信息的耶哦耶哦哦耶哦耶',
+    <Step title="待运行" description="这里是多信息的描述" />
-}, {
+  </Steps>
-  title: '又一个待运行',
+, mountNode);
-  description: '描述啊描述啊',
-}, {
-  title: '待运行',
-  description: '这里是多信息的描述啊',
-}].map((s, i) => <Step key={i} title={s.title} description={s.description} />);
-
-ReactDOM.render(<Steps current={1} status="error">{steps}</Steps>, mountNode);
 ````

components/steps/demo/icon.md

@@ -9,9 +9,11 @@ title: 带图标的步骤条
 import { Steps } from 'antd';
 const Step = Steps.Step;
 
-ReactDOM.render(<Steps>
+ReactDOM.render(
+  <Steps>
     <Step status="finish" title="步骤1" icon="cloud" />
     <Step status="process" title="步骤2" icon="apple" />
     <Step status="wait" title="步骤3" icon="github" />
-</Steps>, mountNode);
+  </Steps>
+, mountNode);
 ````

components/steps/demo/simple.md

@@ -9,19 +9,12 @@ title: 基本用法
 import { Steps } from 'antd';
 const Step = Steps.Step;
 
-const steps = [{
+ReactDOM.render(
-  title: '已完成',
+  <Steps current={1}>
-  description: '这里是多信息的描述啊',
+    <Step title="已完成" description="这里是多信息的描述" />
-}, {
+    <Step title="进行中" description="这里是多信息的描述" />
-  title: '进行中',
+    <Step title="待运行" description="这里是多信息的描述" />
-  description: '这里是多信息的耶哦耶哦哦耶哦耶',
+    <Step title="待运行" description="这里是多信息的描述" />
-}, {
+  </Steps>
-  title: '又一个待运行',
+, mountNode);
-  description: '描述啊描述啊',
-}, {
-  title: '待运行',
-  description: '这里是多信息的描述啊',
-}].map((s, i) => <Step key={i} title={s.title} description={s.description} />);
-
-ReactDOM.render(<Steps current={1}>{steps}</Steps>, mountNode);
 ````

components/steps/demo/small-size.md

@@ -9,19 +9,12 @@ title: 迷你版
 import { Steps } from 'antd';
 const Step = Steps.Step;
 
-const steps = [{
+ReactDOM.render(
-  status: 'finish',
+  <Steps size="small" current={1}>
-  title: '已完成',
+    <Step title="已完成" />
-}, {
+    <Step title="进行中" />
-  status: 'process',
+    <Step title="待运行" />
-  title: '进行中',
+    <Step title="待运行" />
-}, {
+  </Steps>
-  status: 'wait',
+, mountNode);
-  title: '待运行',
-}, {
-  status: 'wait',
-  title: '待运行',
-}].map((s, i) => <Step key={i} title={s.title} description={s.description} />);
-
-ReactDOM.render(<Steps size="small" current={1}>{steps}</Steps>, mountNode);
 ````

components/steps/demo/step-next.md

@@ -5,43 +5,33 @@ title: 切换到下一步
 
 随机生成 3~6 个步骤，初始随机进行到其中一个步骤。
 
-````css
-#components-steps-demo-step-next > div > div {
-  margin-bottom: 30px;
-}
-````
-
 ````jsx
 import { Steps, Button } from 'antd';
 const Step = Steps.Step;
 const array = Array.apply(null, Array(Math.floor(Math.random() * 3) + 3));
-const steps = array.map((item, i) => {
+const steps = array.map((item, i) => ({
-  return {
   title: `步骤${i + 1}`,
-  };
+}));
-});
 
 const App = React.createClass({
   getInitialState() {
     return {
-      currentStep: Math.floor(Math.random() * steps.length),
+      current: Math.floor(Math.random() * steps.length),
     };
   },
   next() {
-    let s = this.state.currentStep + 1;
+    let current = this.state.current + 1;
-    if (s === steps.length) {
+    if (current === steps.length) {
-      s = 0;
+      current = 0;
     }
-    this.setState({
+    this.setState({ current });
-      currentStep: s,
-    });
   },
   render() {
-    const cs = this.state.currentStep;
+    const { current } = this.state;
     return (
       <div>
-        <div style={{ marginBottom: 24 }}>当前正在执行第 {cs + 1} 步</div>
+        <div style={{ marginBottom: 24 }}>当前正在执行第 {current + 1} 步</div>
-        <Steps current={cs}>
+        <Steps current={current}>
           {steps.map((s, i) => <Step key={i} title={s.title} description={s.description} />)}
         </Steps>
         <div style={{ marginTop: 24 }}>

components/steps/demo/vertical-small.md

@@ -9,17 +9,12 @@ title: 竖直方向的小型步骤条
 import { Steps } from 'antd';
 const Step = Steps.Step;
 
-const steps = [{
+ReactDOM.render(
-  title: '已完成',
+  <Steps direction="vertical" size="small" current={1}>
-  description: '这里是信息的描述',
+    <Step title="已完成" description="这里是多信息的描述" />
-}, {
+    <Step title="进行中" description="这里是多信息的描述" />
-  title: '进行中',
+    <Step title="待运行" description="这里是多信息的描述" />
-  description: '这里是信息的描述',
+    <Step title="待运行" description="这里是多信息的描述" />
-}, {
+  </Steps>
-  title: '待运行',
+, mountNode);
-  description: '这里是信息的描述',
-}].map((s, i) => <Step key={i} title={s.title} description={s.description} />);
-
-ReactDOM.render(<Steps size="small" direction="vertical" current={1}>{steps}</Steps>,
-  mountNode);
 ````

components/steps/demo/vertical.md

@@ -9,20 +9,12 @@ title: 竖直方向的步骤条
 import { Steps } from 'antd';
 const Step = Steps.Step;
 
-const steps = [{
+ReactDOM.render(
-  title: '已完成',
+  <Steps direction="vertical" current={1}>
-  description: '这里是信息的描述',
+    <Step title="已完成" description="这里是多信息的描述" />
-}, {
+    <Step title="进行中" description="这里是多信息的描述" />
-  title: '进行中',
+    <Step title="待运行" description="这里是多信息的描述" />
-  description: '这里是信息的描述',
+    <Step title="待运行" description="这里是多信息的描述" />
-}, {
+  </Steps>
-  title: '待运行',
+, mountNode);
-  description: '这里是信息的描述',
-}, {
-  title: '又一个待运行',
-  description: '这里是信息的描述',
-}].map((s, i) => <Step key={i} title={s.title} description={s.description} />);
-
-ReactDOM.render(<Steps direction="vertical" current={1}>{steps}</Steps>,
-  mountNode);
 ````