Merge pull request #97 from ant-design/progress-bar

增加showInfo配置

components/progress/demo/line.md

@@ -15,6 +15,7 @@ React.render(
     <Progress percent="50" status="active" />
     <Progress percent="70" status="exception" />
     <Progress percent="100" />
+    <Progress percent="50" showInfo={false} />
   </div>
   , document.getElementById('components-progress-demo-line'));
 ````

components/progress/index.jsx

@@ -11,11 +11,18 @@ const statusColorMap = {
 };
 
 var Line = React.createClass({
+  propTypes: {
+    status: React.PropTypes.oneOf(['normal', 'exception', 'active', 'success']),
+    showInfo: React.PropTypes.bool,
+    percent: React.PropTypes.number,
+    strokeWidth: React.PropTypes.number
+  },
   getDefaultProps() {
     return {
       percent: 0,
-      strokeWidth: '10px',
-      status: 'normal' // exception
+      strokeWidth: 10,
+      status: 'normal', // exception active
+      showInfo: true
     };
   },
   render() {
@@ -25,23 +32,27 @@ var Line = React.createClass({
       props.status = 'success';
     }
 
-    var progressInfo;
-    if (props.status === 'exception') {
-      progressInfo = (
-        <span className={prefixCls + '-line-text'}>
-          <i className="anticon anticon-exclamation-circle"></i>
-        </span>
-      );
-    } else if (props.status === 'success') {
-      progressInfo = (
-        <span className={prefixCls + '-line-text'}>
-          <i className="anticon anticon-check-circle"></i>
-        </span>
-      );
-    } else {
-      progressInfo = (
-        <span className={prefixCls + '-line-text'}>{props.percent}%</span>
-      );
+    var progressInfo, fullCls = '';
+    if(props.showInfo === true){
+      if (props.status === 'exception') {
+        progressInfo = (
+          <span className={prefixCls + '-line-text'}>
+            <i className="anticon anticon-exclamation-circle"></i>
+          </span>
+        );
+      } else if (props.status === 'success') {
+        progressInfo = (
+          <span className={prefixCls + '-line-text'}>
+            <i className="anticon anticon-check-circle"></i>
+          </span>
+        );
+      } else {
+        progressInfo = (
+          <span className={prefixCls + '-line-text'}>{props.percent}%</span>
+        );
+      }
+    }else {
+      fullCls = ' ' + prefixCls + '-line-wrap-full';
     }
     var persentStyle = {
       width: props.percent + '%',
@@ -49,7 +60,7 @@ var Line = React.createClass({
     };
 
     return (
-      <div className={prefixCls + '-line-wrap clearfix status-' + props.status}>
+      <div className={prefixCls + '-line-wrap clearfix status-' + props.status + fullCls}>
         {progressInfo}
         <div className={prefixCls + '-line-outer'}>
           <div className={prefixCls + '-line-inner'}>

components/progress/index.md

@@ -33,6 +33,7 @@
 | percent  | 百分比         | number   | 0           |
 | status   | 状态，有两个值normal、exception、active三种状态 | string   | normal |
 | strokeWidth | 进度条线的宽度，单位是px | number | 1           |
+| showInfo | 是否显示进度数值和状态图标 | bool | true           |
 
 
 

style/components/progress.less

@@ -13,16 +13,21 @@
   &-line-outer {
     margin-right: 45px;
   }
+  &-line-wrap-full {
+    .@{prefixProgressClass}-line-outer {
+      margin-right: 0;
+    }
+  }
   &-line-inner {
     display: inline-block;
     width: 100%;
     background-color: #E9E9E9;
     border-radius: 100px;
-    margin-right: 45px;
   }
   &-line-bg {
     border-radius: 100px;
     background-color: @primary-color;
+    transition: width 0.6s ease 0s, stroke 0.6s ease;
   }
   &-line-text {
     position: absolute;