fix progress format, ref #894

components/progress/demo/circle-mini.md

@@ -7,13 +7,13 @@
 ---
 
 ````jsx
-import { Progress, Icon } from 'antd';
+import { Progress } from 'antd';
 const ProgressCircle = Progress.Circle;
 
 ReactDOM.render(
   <div>
     <ProgressCircle percent={30} width={80} />
-    <ProgressCircle percent={70} width={80} status="exception" format={() => <Icon type="exclamation" />} />
+    <ProgressCircle percent={70} width={80} status="exception" />
     <ProgressCircle percent={100} width={80} />
   </div>
   , mountNode);

components/progress/demo/circle.md

@@ -7,13 +7,13 @@
 ---
 
 ````jsx
-import { Progress, Icon } from 'antd';
+import { Progress } from 'antd';
 const ProgressCircle = Progress.Circle;
 
 ReactDOM.render(
   <div>
     <ProgressCircle percent={75} />
-    <ProgressCircle percent={70} status="exception" format={() => <Icon type="exclamation" />} />
+    <ProgressCircle percent={70} status="exception" />
     <ProgressCircle percent={100} />
   </div>
   , mountNode);

components/progress/demo/format.md

@@ -7,13 +7,12 @@
 ---
 
 ````jsx
-import { Progress, Icon } from 'antd';
+import { Progress } from 'antd';
 const ProgressCircle = Progress.Circle;
 
 ReactDOM.render(
   <div>
     <ProgressCircle percent={75} format={percent => percent / 10.0 + '折' } />
-    <ProgressCircle percent={70} status="exception" format={() => <Icon type="exclamation" />} />
     <ProgressCircle percent={100} format={() => '成功'} />
   </div>
   , mountNode);

components/progress/demo/line-mini.md

@@ -7,14 +7,14 @@
 ---
 
 ````jsx
-import { Progress, Icon } from 'antd';
+import { Progress } from 'antd';
 const ProgressLine = Progress.Line;
 
 ReactDOM.render(
   <div style={{ width: 170 }}>
     <ProgressLine percent={30} strokeWidth={5} />
     <ProgressLine percent={50} strokeWidth={5} status="active" />
-    <ProgressLine percent={70} strokeWidth={5} status="exception" format={() => <Icon type="exclamation" />} />
+    <ProgressLine percent={70} strokeWidth={5} status="exception" />
     <ProgressLine percent={100} strokeWidth={5} />
   </div>
 , mountNode);

components/progress/demo/line.md

@@ -7,14 +7,14 @@
 ---
 
 ````jsx
-import { Progress, Icon } from 'antd';
+import { Progress } from 'antd';
 const ProgressLine = Progress.Line;
 
 ReactDOM.render(
   <div>
     <ProgressLine percent={30} />
     <ProgressLine percent={50} status="active" />
-    <ProgressLine percent={70} status="exception" format={() => <Icon type="exclamation" />} />
+    <ProgressLine percent={70} status="exception" />
     <ProgressLine percent={100} />
     <ProgressLine percent={50} showInfo={false} />
   </div>

components/progress/index.jsx

@@ -1,6 +1,7 @@
 import { Circle as Progresscircle } from 'rc-progress';
 import React from 'react';
 import assign from 'object-assign';
+import warning from 'warning';
 import Icon from '../icon';
 
 const prefixCls = 'ant-progress';
@@ -29,7 +30,6 @@ let Line = React.createClass({
       percent: 0,
       strokeWidth: 10,
       status: 'normal', // exception active
-      format: '${percent}%',
       showInfo: true,
       trailColor: '#e9e9e9'
     };
@@ -43,8 +43,15 @@ let Line = React.createClass({
 
     let progressInfo;
     let fullCls = '';
-    let text = props.format;
+
+    if (props.format) {
+      warning(typeof props.format === 'function',
+       'antd.Progress props.format type is function, change format={xxx} to format={() => xxx}');
+    }
+
+    let text = props.format || `${props.percent}%`;
     if (typeof props.format === 'string') {
+      // 向下兼容原来的字符串替换方式
       text = props.format.replace('${percent}', props.percent);
     } else if (typeof props.format === 'function') {
       text = props.format(props.percent);
@@ -53,12 +60,14 @@ let Line = React.createClass({
     if (props.showInfo === true) {
       if (props.status === 'exception') {
         progressInfo = (
-          <span className={prefixCls + '-line-text'}>{text}</span>
+          <span className={prefixCls + '-line-text'}>
+            {props.format ? text : <Icon type="exclamation" />}
+          </span>
         );
       } else if (props.status === 'success') {
         progressInfo = (
           <span className={prefixCls + '-line-text'}>
-            <Icon type="check" />
+            {props.format ? text : <Icon type="check" />}
           </span>
         );
       } else {
@@ -105,7 +114,6 @@ let Circle = React.createClass({
       width: 132,
       percent: 0,
       strokeWidth: 6,
-      format: '${percent}%',
       status: 'normal', // exception
       trailColor: '#f9f9f9',
     };
@@ -123,20 +131,29 @@ let Circle = React.createClass({
       fontSize: props.width * 0.16 + 6
     };
     let progressInfo;
-    let text = props.format;
+    let text = props.format || `${props.percent}%`;
+
+    if (props.format) {
+      warning(typeof props.format === 'function',
+       'antd.Progress props.format type is function, change format={xxx} to format={() => xxx}');
+    }
+
     if (typeof props.format === 'string') {
-      text = props.format.replace('${percent}', props.percent);
+      // 向下兼容原来的字符串替换方式
+      text = '${percent}%'.replace('', props.percent);
     } else if (typeof props.format === 'function') {
       text = props.format(props.percent);
     }
     if (props.status === 'exception') {
       progressInfo = (
-        <span className={prefixCls + '-circle-text'}>{text}</span>
+        <span className={prefixCls + '-circle-text'}>
+          {props.format ? text : <Icon type="exclamation" />}
+        </span>
       );
     } else if (props.status === 'success') {
       progressInfo = (
         <span className={prefixCls + '-circle-text'}>
-          {text ? text : <Icon type="check" />}
+          {props.format ? text : <Icon type="check" />}
         </span>
       );
     } else {

components/progress/index.md

@@ -22,7 +22,7 @@
 | 参数     | 说明           | 类型     | 默认值        |
 |----------|----------------|----------|---------------|
 | percent  | 百分比         | number   | 0             |
-| format   | 数字的模板     | string   | "${percent}%" |
+| format   | 内容的模板函数     | function(percent)   | 无 |
 | status   | 状态，可选：normal、exception、active | string   | normal |
 | strokeWidth | 进度条线的宽度，单位是px | number | 1  |
 | showInfo | 是否显示进度数值和状态图标 | bool | true  |
@@ -32,7 +32,7 @@
 | 参数     | 说明           | 类型     | 默认值        |
 |----------|----------------|----------|---------------|
 | percent  | 百分比         | number   | 0             |
-| format   | 数字的模板     | string   | "${percent}%" |
+| format   | 内容的模板函数     | function(percent)   | 无 |
 | status   | 状态，可选：normal、exception | string  | normal |
 | strokeWidth | 进度条线的宽度，单位是进度条画布宽度的百分比 | number | 1           |
 | width | 必填，进度条画布宽度，单位px。这里没有提供height属性设置，Line型高度就是strokeWidth，Circle型高度等于width | number | null |