progress line demo

components/progress/demo/line.md

@@ -10,5 +10,10 @@ Progress Line用法
 var Line = antd.Progress.Line;
 
 React.render(
-  <Line percent="30" status="exception" />, document.getElementById('components-progress-demo-line'));
+  <div>
+    <Line percent="30" width="300" strokeWidth="4" />
+    <Line percent="70" width="300" strokeWidth="4" status="exception" />
+    <Line percent="100" width="300" strokeWidth="4" />
+  </div>
+  , document.getElementById('components-progress-demo-line'));
 ````

components/progress/index.jsx

@@ -5,36 +5,58 @@ var Progresscircle = require('rc-progress').Circle;
 var React = require('react');
 
 var Line = React.createClass({
-  getDefaultProps: function(){
+  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
     }
+    var wrapStyle = {
+      "font-size": this.props.width / 100 * this.props.strokeWidth
+    }
+    var textStyle = {
+      "color": statusColorMap[this.props.status]
+    }
     var progressInfo
-    if(this.props.status==='normal'){
+    if (this.props.status === 'exception') {
       progressInfo = (
-        <span className="ant-progress-line-text">{this.props.percent}%</span>
+        <span style={textStyle} className="ant-progress-line-text">
+          <i className="anticon anticon-exclamation-round"></i>
+        </span>
+      )
+    } else if(this.props.status === 'success'){
+      progressInfo = (
+        <span style={textStyle} className="ant-progress-line-text">
+          <i className="anticon anticon-check-round"></i>
+        </span>
       )
     }else {
       progressInfo = (
-        <i className="anticon anticon-check-circle"></i>
+        <span className="ant-progress-line-text">{this.props.percent}%</span>
       )
     }
 
-    var statusColorMap = {
-      "normal": "#3FC7FA",
-      "exception": "#FE8C6A"
-    };
     return (
-      <div className="ant-progress-line-wrap" style={style}>
-        <Progressline percent={this.props.percent} strokeWidth={this.props.strokeWidth} strokeColor={statusColorMap[this.props.status]} />
+      <div className="ant-progress-line-wrap" style={wrapStyle}>
+        <div className="ant-progress-line-inner" style={style}>
+          <Progressline percent={this.props.percent} strokeWidth={this.props.strokeWidth}
+                        strokeColor={statusColorMap[this.props.status]}/>
+        </div>
         {progressInfo}
       </div>
     );
@@ -42,9 +64,9 @@ var Line = React.createClass({
 });
 
 var Circle = React.createClass({
-  getDefaultProps: function(){
+  getDefaultProps: function () {
     return {
-      width: "100px",
+      width: "100%",
       percent: 0,
       strokeWidth: 1,
       status: "normal"
@@ -56,11 +78,11 @@ var Circle = React.createClass({
       "height": this.props.width
     }
     var progressInfo
-    if(this.props.status==='normal'){
+    if (this.props.status === 'normal') {
       progressInfo = (
         <i className="anticon anticon-check-circle"></i>
       )
-    }else {
+    } else {
       progressInfo = (
         <span className="ant-progress-line-text">{this.props.percent}%</span>
       )
@@ -72,7 +94,8 @@ var Circle = React.createClass({
     };
     return (
       <div className="ant-progress-circle-wrap" style={style}>
-        <Progresscircle percent={this.props.percent} strokeWidth={this.props.strokeWidth} strokeColor={statusColorMap[this.props.status]} />
+        <Progresscircle percent={this.props.percent} strokeWidth={this.props.strokeWidth}
+                        strokeColor={statusColorMap[this.props.status]}/>
         {progressInfo}
       </div>
     );

components/progress/index.md

@@ -19,7 +19,7 @@
 | perscent    | 百分比           | number   | 0           |
 | status   | 状态，有两个值normal、exception | string   | normal |
 | strokeWidth | 进度条线宽度，单位是进度条画布宽度的百分比 | number | 1           |
-| width | 进度条画布宽度，这里没有提供height属性设置，Line型高度就是strokeWidth，Circle型高度等于width | string | null |
+| width | 必填，进度条画布宽度，单位px。这里没有提供height属性设置，Line型高度就是strokeWidth，Circle型高度等于width | number | null |
 
 
 

style/components/index.less

@@ -8,4 +8,5 @@
 @import "tab";
 @import "tooltip";
 @import "form";
-@import "loading";
\ No newline at end of file
+@import "loading";
+@import "progress";
\ No newline at end of file

style/components/progress.less

+@prefixProgressClass: ant-progress;
+
+.@{prefixProgressClass} {
+  &-line-inner {
+    display: inline-block;
+
+    svg {
+      vertical-align: middle;
+    }
+  }
+
+  &-line-text {
+    display: inline-block;
+    font-size: 1em;
+    margin-left: 10px;
+    line-height: 1;
+
+    .anticon {
+      font-size: 1.5em;
+    }
+  }
+}
\ No newline at end of file