From 228b7328d32b1378fab64353e4ea8e1d48a81bdc Mon Sep 17 00:00:00 2001
From: ddcat1115 <ddcat1115@gmail.com>
Date: Wed, 9 Nov 2016 14:45:10 +0800
Subject: [PATCH] docs: Steps demo update (#3708)

* Steps demo update

* update
---
 components/steps/demo/step-next.md | 93 +++++++++++++++++++++---------
 1 file changed, 67 insertions(+), 26 deletions(-)

diff --git a/components/steps/demo/step-next.md b/components/steps/demo/step-next.md
index 1a5727d232..027d9e6dc7 100644
--- a/components/steps/demo/step-next.md
+++ b/components/steps/demo/step-next.md
@@ -1,54 +1,95 @@
 ---
 order: 3
 title:
-  zh-CN: 切换到下一步
-  en-US: Switch to next
+  zh-CN: 步骤切换
+  en-US: Switch Step
 ---
 
 ## zh-CN
 
-随机生成 3~6 个步骤，初始随机进行到其中一个步骤。
+通常配合内容及按钮使用，表示一个流程的处理进度。
 
 ## en-US
 
-Let's generate 3~6 steps randomly, and proceed to a random step.
+Cooperate with the content and buttons, to represent the progress of a process.
 
 ````jsx
-import { Steps, Button } from 'antd';
+import { Steps, Button, message } from 'antd';
 const Step = Steps.Step;
-const array = [...Array(Math.floor(Math.random() * 3) + 3)];
-const steps = array.map((item, i) => ({
-  title: `Step ${i + 1}`,
-}));
-
-const App = React.createClass({
-  getInitialState() {
-    return {
-      current: Math.floor(Math.random() * steps.length),
+
+const steps = [{
+  title: 'First',
+  content: 'First-content',
+}, {
+  title: 'Second',
+  content: 'Second-content',
+}, {
+  title: 'Last',
+  content: 'Last-content',
+}];
+
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      current: 0,
     };
-  },
+  }
   next() {
-    let current = this.state.current + 1;
-    if (current === steps.length) {
-      current = 0;
-    }
+    const current = this.state.current + 1;
+    this.setState({ current });
+  }
+  prev() {
+    const current = this.state.current - 1;
     this.setState({ current });
-  },
+  }
   render() {
     const { current } = this.state;
     return (
       <div>
-        <div style={{ marginBottom: 24 }}>Curent Step {current + 1}</div>
         <Steps current={current}>
-          {steps.map((s, i) => <Step key={i} title={s.title} description={s.description} />)}
+          {steps.map(item => <Step key={item.title} title={item.title} />)}
         </Steps>
-        <div style={{ marginTop: 24 }}>
-          <Button onClick={this.next}>Next Step</Button>
+        <div className="steps-content">{steps[this.state.current].content}</div>
+        <div className="steps-action">
+          {
+            this.state.current < steps.length - 1
+            &&
+            <Button type="primary" onClick={() => this.next()}>Next</Button>
+          }
+          {
+            this.state.current === steps.length - 1
+            &&
+            <Button type="primary" onClick={() => message.success('Processing complete!')}>Done</Button>
+          }
+          {
+            this.state.current > 0
+            &&
+            <Button style={{ marginLeft: 8 }} type="ghost" onClick={() => this.prev()}>
+              Previous
+            </Button>
+          }
         </div>
       </div>
     );
-  },
-});
+  }
+}
 
 ReactDOM.render(<App />, mountNode);
 ````
+
+````css
+.steps-content {
+  margin-top: 16px;
+  border: 1px dashed #e9e9e9;
+  border-radius: 6px;
+  background-color: #fafafa;
+  min-height: 200px;
+  text-align: center;
+  padding-top: 80px;
+}
+
+.steps-action {
+  margin-top: 40px;
+}
+````