From 4ed91c35e117e649b47bafeb65e5477fee4a4cd3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=8F=E5=A5=88?= <shuaiji.tsj@alibaba-inc.com>
Date: Sun, 14 Jun 2015 20:07:21 +0800
Subject: [PATCH] progress circle demo

---
 components/progress/demo/circle.md | 19 +++++++++++++
 components/progress/index.jsx      | 43 ++++++++++++++++++++----------
 style/components/progress.less     | 16 +++++++++++
 3 files changed, 64 insertions(+), 14 deletions(-)
 create mode 100644 components/progress/demo/circle.md

diff --git a/components/progress/demo/circle.md b/components/progress/demo/circle.md
new file mode 100644
index 0000000000..d01a209638
--- /dev/null
+++ b/components/progress/demo/circle.md
@@ -0,0 +1,19 @@
+# Circle 用法
+
+- order: 0
+
+Progress Circle用法
+
+---
+
+````jsx
+var Circle = antd.Progress.Circle;
+
+React.render(
+  <div>
+    <Circle percent="30" width="200" strokeWidth="4" />
+    <Circle percent="70" width="200" strokeWidth="4" status="exception" />
+    <Circle percent="100" width="200" strokeWidth="4" />
+  </div>
+  , document.getElementById('components-progress-demo-circle'));
+````
diff --git a/components/progress/index.jsx b/components/progress/index.jsx
index 6774126088..a9724d1454 100644
--- a/components/progress/index.jsx
+++ b/components/progress/index.jsx
@@ -66,37 +66,52 @@ var Line = React.createClass({
 var Circle = React.createClass({
   getDefaultProps: function () {
     return {
-      width: "100%",
       percent: 0,
-      strokeWidth: 1,
-      status: "normal"
+      strokeWidth: 2,
+      status: "normal" // exception
     }
   },
   render() {
+    var statusColorMap = {
+      "normal": "#3FC7FA",
+      "exception": "#FE8C6A",
+      "success": "#85D262"
+    };
+
+    if (parseInt(this.props.percent) === 100) {
+      this.props.status = 'success'
+    }
+
     var style = {
       "width": this.props.width,
       "height": this.props.width
     }
+    var wrapStyle = {
+      "font-size": this.props.width
+    }
+    var textStyle = {
+      "color": statusColorMap[this.props.status]
+    }
     var progressInfo
-    if (this.props.status === 'normal') {
+    if (this.props.status === 'exception') {
       progressInfo = (
-        <i className="anticon anticon-check-circle"></i>
+        <span style={textStyle} className="ant-progress-circle-text">
+          <i className="anticon anticon-exclamation"></i>
+        </span>
       )
-    } else {
+    }else {
       progressInfo = (
-        <span className="ant-progress-line-text">{this.props.percent}%</span>
+        <span className="ant-progress-circle-text">{this.props.percent}%</span>
       )
     }
 
-    var statusColorMap = {
-      "normal": "#3FC7FA",
-      "exception": "#FE8C6A"
-    };
     return (
-      <div className="ant-progress-circle-wrap" style={style}>
-        <Progresscircle percent={this.props.percent} strokeWidth={this.props.strokeWidth}
+      <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}
                         strokeColor={statusColorMap[this.props.status]}/>
-        {progressInfo}
+          {progressInfo}
+        </div>
       </div>
     );
   }
diff --git a/style/components/progress.less b/style/components/progress.less
index 28071c181b..4cb89095cb 100644
--- a/style/components/progress.less
+++ b/style/components/progress.less
@@ -19,4 +19,20 @@
       font-size: 1.5em;
     }
   }
+
+  &-circle-inner {
+    position: relative;
+  }
+  &-circle-text {
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    font-size: 0.5em;
+    text-align: center;
+
+    .anticon {
+      font-size: 0.5em;
+    }
+  }
 }
\ No newline at end of file