diff --git a/components/progress/demo/circle-mini.md b/components/progress/demo/circle-mini.md
index bc571bc6ad..1e646cc7b0 100644
--- a/components/progress/demo/circle-mini.md
+++ b/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(
, mountNode);
diff --git a/components/progress/demo/circle.md b/components/progress/demo/circle.md
index 81771551c0..e951b733da 100644
--- a/components/progress/demo/circle.md
+++ b/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(
, mountNode);
diff --git a/components/progress/demo/format.md b/components/progress/demo/format.md
index da1888f1e0..7f84c03485 100644
--- a/components/progress/demo/format.md
+++ b/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(
percent / 10.0 + '折' } />
- } />
'成功'} />
, mountNode);
diff --git a/components/progress/demo/line-mini.md b/components/progress/demo/line-mini.md
index 98710bb2d1..6553f475b5 100644
--- a/components/progress/demo/line-mini.md
+++ b/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(
, mountNode);
diff --git a/components/progress/demo/line.md b/components/progress/demo/line.md
index 06d94d5cf7..ed38533270 100644
--- a/components/progress/demo/line.md
+++ b/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(
diff --git a/components/progress/index.jsx b/components/progress/index.jsx
index d43836b43a..e0a5306da6 100644
--- a/components/progress/index.jsx
+++ b/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 = (
- {text}
+
+ {props.format ? text : }
+
);
} else if (props.status === 'success') {
progressInfo = (
-
+ {props.format ? text : }
);
} 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 = (
- {text}
+
+ {props.format ? text : }
+
);
} else if (props.status === 'success') {
progressInfo = (
- {text ? text : }
+ {props.format ? text : }
);
} else {
diff --git a/components/progress/index.md b/components/progress/index.md
index 8dc8cb188d..22d5ea7451 100644
--- a/components/progress/index.md
+++ b/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 |