From 1fc89905315ba6b5a13e78a291910296d4d7c1b1 Mon Sep 17 00:00:00 2001
From: Wei Zhu <yesmeck@gmail.com>
Date: Sun, 19 Feb 2017 20:27:06 +0800
Subject: [PATCH] docs: Rewrite Badge demos to ES6 component

---
 components/badge/demo/change.md     | 34 +++++++++++++++--------------
 components/badge/demo/dot.md        | 18 ++++++++-------
 components/badge/demo/no-wrapper.md | 12 +++++-----
 components/badge/demo/overflow.md   | 30 +++++++++++++------------
 4 files changed, 51 insertions(+), 43 deletions(-)

diff --git a/components/badge/demo/change.md b/components/badge/demo/change.md
index 400bbb23bb..a56b044b30 100644
--- a/components/badge/demo/change.md
+++ b/components/badge/demo/change.md
@@ -17,27 +17,29 @@ The count will be animated as it changes.
 import { Badge, Button, Icon, Switch } from 'antd';
 const ButtonGroup = Button.Group;
 
-const Test = React.createClass({
-  getInitialState() {
-    return {
-      count: 5,
-      show: true,
-    };
-  },
-  increase() {
+class Demo extends React.Component {
+  state = {
+    count: 5,
+    show: true,
+  }
+
+  increase = () => {
     const count = this.state.count + 1;
     this.setState({ count });
-  },
-  decline() {
+  }
+
+  decline = () => {
     let count = this.state.count - 1;
     if (count < 0) {
       count = 0;
     }
     this.setState({ count });
-  },
-  onChange(show) {
+  }
+
+  onChange = (show) => {
     this.setState({ show });
-  },
+  }
+
   render() {
     return (
       <div>
@@ -62,8 +64,8 @@ const Test = React.createClass({
         </div>
       </div>
     );
-  },
-});
+  }
+}
 
-ReactDOM.render(<Test />, mountNode);
+ReactDOM.render(<Demo />, mountNode);
 ````
diff --git a/components/badge/demo/dot.md b/components/badge/demo/dot.md
index 124d8e899f..6cee5e1569 100644
--- a/components/badge/demo/dot.md
+++ b/components/badge/demo/dot.md
@@ -16,14 +16,16 @@ This will simply display a red badge, without a specific count.
 ````jsx
 import { Badge, Icon } from 'antd';
 
-ReactDOM.render(<div>
-  <Badge dot>
-    <Icon type="notification" />
-  </Badge>
-  <Badge dot>
-    <a href="#">Link something</a>
-  </Badge>
-</div>, mountNode);
+ReactDOM.render(
+  <div>
+    <Badge dot>
+      <Icon type="notification" />
+    </Badge>
+    <Badge dot>
+      <a href="#">Link something</a>
+    </Badge>
+  </div>
+, mountNode);
 ````
 
 <style>
diff --git a/components/badge/demo/no-wrapper.md b/components/badge/demo/no-wrapper.md
index f40029fe9e..4f796443cb 100644
--- a/components/badge/demo/no-wrapper.md
+++ b/components/badge/demo/no-wrapper.md
@@ -18,9 +18,11 @@ Used in standalone when children is empty.
 ````jsx
 import { Badge } from 'antd';
 
-ReactDOM.render(<div>
-  <Badge count={25} />
-  <Badge count={4} style={{ backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset' }} />
-  <Badge count={109} style={{ backgroundColor: '#87d068' }} />
-</div>, mountNode);
+ReactDOM.render(
+  <div>
+    <Badge count={25} />
+    <Badge count={4} style={{ backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset' }} />
+    <Badge count={109} style={{ backgroundColor: '#87d068' }} />
+  </div>
+, mountNode);
 ````
diff --git a/components/badge/demo/overflow.md b/components/badge/demo/overflow.md
index 6cce428040..84f7d37531 100644
--- a/components/badge/demo/overflow.md
+++ b/components/badge/demo/overflow.md
@@ -16,18 +16,20 @@ title:
 ````jsx
 import { Badge } from 'antd';
 
-ReactDOM.render(<div>
-  <Badge count={99}>
-    <a href="#" className="head-example" />
-  </Badge>
-  <Badge count={100}>
-    <a href="#" className="head-example" />
-  </Badge>
-  <Badge count={99} overflowCount={10}>
-    <a href="#" className="head-example" />
-  </Badge>
-  <Badge count={1000} overflowCount={999}>
-    <a href="#" className="head-example" />
-  </Badge>
-</div>, mountNode);
+ReactDOM.render(
+  <div>
+    <Badge count={99}>
+      <a href="#" className="head-example" />
+    </Badge>
+    <Badge count={100}>
+      <a href="#" className="head-example" />
+    </Badge>
+    <Badge count={99} overflowCount={10}>
+      <a href="#" className="head-example" />
+    </Badge>
+    <Badge count={1000} overflowCount={999}>
+      <a href="#" className="head-example" />
+    </Badge>
+  </div>
+, mountNode);
 ````