Progress support custom format, #893

components/progress/demo/circle-dynamic.md

@@ -50,4 +50,3 @@ const MyProgress = React.createClass({
 
 ReactDOM.render(<MyProgress />, mountNode);
 ````
-

components/progress/demo/circle-mini.md

@@ -13,7 +13,7 @@ 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" format={() => <Icon type="exclamation" />} />
     <ProgressCircle percent={100} width={80} />
   </div>
   , mountNode);

components/progress/demo/circle.md

@@ -12,8 +12,8 @@ const ProgressCircle = Progress.Circle;
 
 ReactDOM.render(
   <div>
-    <ProgressCircle percent={30} />
-    <ProgressCircle percent={70} status="exception" format={<Icon type="exclamation" />} />
+    <ProgressCircle percent={75} />
+    <ProgressCircle percent={70} status="exception" format={() => <Icon type="exclamation" />} />
     <ProgressCircle percent={100} />
   </div>
   , mountNode);

components/progress/demo/format.md

@@ -0,0 +1,28 @@
+# 自定义文字格式
+
+- order: 6
+
+`format` 属性指定格式。
+
+---
+
+````jsx
+import { Progress, Icon } 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);
+````
+
+<style>
+.ant-progress-circle-wrap,
+.ant-progress-line-wrap {
+  margin-right: 8px;
+  margin-bottom: 5px;
+}
+</style>

components/progress/demo/line-mini.md

@@ -14,7 +14,7 @@ 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" format={() => <Icon type="exclamation" />} />
     <ProgressLine percent={100} strokeWidth={5} />
   </div>
 , mountNode);

components/progress/demo/line.md

@@ -14,7 +14,7 @@ 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" format={() => <Icon type="exclamation" />} />
     <ProgressLine percent={100} />
     <ProgressLine percent={50} showInfo={false} />
   </div>

components/progress/index.jsx

@@ -17,6 +17,12 @@ let Line = React.createClass({
     showInfo: React.PropTypes.bool,
     percent: React.PropTypes.number,
     strokeWidth: React.PropTypes.number,
+    trailColor: React.PropTypes.string,
+    format: React.PropTypes.oneOfType([
+      React.PropTypes.node,
+      React.PropTypes.string,
+      React.PropTypes.func,
+    ]),
   },
   getDefaultProps() {
     return {
@@ -25,6 +31,7 @@ let Line = React.createClass({
       status: 'normal', // exception active
       format: '${percent}%',
       showInfo: true,
+      trailColor: '#e9e9e9'
     };
   },
   render() {
@@ -36,8 +43,12 @@ let Line = React.createClass({
 
     let progressInfo;
     let fullCls = '';
-    const text = (typeof props.format === 'string') ?
-      props.format.replace('${percent}', props.percent) : props.format;
+    let text = props.format;
+    if (typeof props.format === 'string') {
+      text = props.format.replace('${percent}', props.percent);
+    } else if (typeof props.format === 'function') {
+      text = props.format(props.percent);
+    }
 
     if (props.showInfo === true) {
       if (props.status === 'exception') {
@@ -82,6 +93,12 @@ let Circle = React.createClass({
     percent: React.PropTypes.number,
     strokeWidth: React.PropTypes.number,
     width: React.PropTypes.number,
+    trailColor: React.PropTypes.string,
+    format: React.PropTypes.oneOfType([
+      React.PropTypes.node,
+      React.PropTypes.string,
+      React.PropTypes.func,
+    ]),
   },
   getDefaultProps() {
     return {
@@ -90,6 +107,7 @@ let Circle = React.createClass({
       strokeWidth: 6,
       format: '${percent}%',
       status: 'normal', // exception
+      trailColor: '#f9f9f9',
     };
   },
   render() {
@@ -105,8 +123,12 @@ let Circle = React.createClass({
       fontSize: props.width * 0.16 + 6
     };
     let progressInfo;
-    const text = (typeof props.format === 'string') ?
-      props.format.replace('${percent}', props.percent) : props.format;
+    let text = props.format;
+    if (typeof props.format === 'string') {
+      text = props.format.replace('${percent}', 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>
@@ -114,7 +136,7 @@ let Circle = React.createClass({
     } else if (props.status === 'success') {
       progressInfo = (
         <span className={prefixCls + '-circle-text'}>
-          <Icon type="check" />
+          {text ? text : <Icon type="check" />}
         </span>
       );
     } else {
@@ -127,7 +149,7 @@ let Circle = React.createClass({
       <div className={prefixCls + '-circle-wrap status-' + props.status} >
         <div className={prefixCls + '-circle-inner'} style={style}>
           <Progresscircle percent={props.percent} strokeWidth={props.strokeWidth}
-            strokeColor={statusColorMap[props.status]} trailColor="#e9e9e9" />
+            strokeColor={statusColorMap[props.status]} trailColor={props.trailColor} />
           {progressInfo}
         </div>
       </div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd",
-  "version": "0.12.0-beta.16",
+  "version": "0.12.0-beta.17",
   "title": "Ant Design",
   "description": "一个 UI 设计语言",
   "homepage": "http://ant.design/",