Merge pull request #1334 from ant-design/refactor-progress

Refactor progress

components/progress/Circle.jsx

@@ -1,75 +0,0 @@
-import { Circle as Progresscircle } from 'rc-progress';
-import React from 'react';
-import Icon from '../icon';
-
-const prefixCls = 'ant-progress';
-
-const statusColorMap = {
-  normal: '#2db7f5',
-  exception: '#ff5500',
-  success: '#87d068'
-};
-
-export default class Circle extends React.Component {
-  static defaultProps = {
-    width: 132,
-    percent: 0,
-    strokeWidth: 6,
-    status: 'normal', // exception
-    trailColor: '#f3f3f3',
-  }
-
-  static propTypes = {
-    status: React.PropTypes.oneOf(['normal', 'exception', 'success']),
-    percent: React.PropTypes.number,
-    strokeWidth: React.PropTypes.number,
-    width: React.PropTypes.number,
-    trailColor: React.PropTypes.string,
-    format: React.PropTypes.func,
-  }
-
-  render() {
-    let props = { ...this.props };
-
-    if (parseInt(props.percent, 10) === 100) {
-      props.status = 'success';
-    }
-
-    let style = {
-      width: props.width,
-      height: props.width,
-      fontSize: props.width * 0.16 + 6
-    };
-    let progressInfo;
-
-    const format = props.format || (percent => `${percent}%`);
-
-    if (props.status === 'exception') {
-      progressInfo = (
-        <span className={`${prefixCls}-circle-text`}>
-          {props.format ? format(props.percent) : <Icon type="exclamation" />}
-        </span>
-      );
-    } else if (props.status === 'success') {
-      progressInfo = (
-        <span className={`${prefixCls}-circle-text`}>
-          {props.format ? format(props.percent) : <Icon type="check" />}
-        </span>
-      );
-    } else {
-      progressInfo = (
-        <span className={`${prefixCls}-circle-text`}>{format(props.percent)}</span>
-      );
-    }
-
-    return (
-      <div className={`${prefixCls}-circle-wrap status-${props.status}`} style={props.style}>
-        <div className={`${prefixCls}-circle-inner`} style={style}>
-          <Progresscircle percent={props.percent} strokeWidth={props.strokeWidth}
-            strokeColor={statusColorMap[props.status]} trailColor={props.trailColor} />
-          {progressInfo}
-        </div>
-      </div>
-    );
-  }
-}

components/progress/Line.jsx

@@ -1,72 +0,0 @@
-import React from 'react';
-import Icon from '../icon';
-
-const prefixCls = 'ant-progress';
-export default class Line extends React.Component {
-  static defaultProps = {
-    percent: 0,
-    strokeWidth: 10,
-    status: 'normal', // exception active
-    showInfo: true,
-    trailColor: '#f3f3f3'
-  }
-
-  static propTypes = {
-    status: React.PropTypes.oneOf(['normal', 'exception', 'active', 'success']),
-    showInfo: React.PropTypes.bool,
-    percent: React.PropTypes.number,
-    strokeWidth: React.PropTypes.number,
-    trailColor: React.PropTypes.string,
-    format: React.PropTypes.func,
-  }
-
-  render() {
-    let props = { ...this.props };
-
-    if (parseInt(props.percent, 10) === 100) {
-      props.status = 'success';
-    }
-
-    let progressInfo;
-    let fullCls = '';
-
-    const format = props.format || (percent => `${percent}%`);
-
-    if (props.showInfo) {
-      if (props.status === 'exception') {
-        progressInfo = (
-          <span className={`${prefixCls}-line-text`}>
-            {props.format ? format(props.percent) : <Icon type="cross-circle" />}
-          </span>
-        );
-      } else if (props.status === 'success') {
-        progressInfo = (
-          <span className={`${prefixCls}-line-text`}>
-            {props.format ? format(props.percent) : <Icon type="check-circle" />}
-          </span>
-        );
-      } else {
-        progressInfo = (
-          <span className={`${prefixCls}-line-text`}>{format(props.percent)}</span>
-        );
-      }
-    } else {
-      fullCls = ` ${prefixCls}-line-wrap-full`;
-    }
-    let percentStyle = {
-      width: `${props.percent}%`,
-      height: props.strokeWidth
-    };
-
-    return (
-      <div className={`${prefixCls}-line-wrap clearfix status-${props.status}${fullCls}`} style={props.style}>
-        <div className={`${prefixCls}-line-outer`}>
-          <div className={`${prefixCls}-line-inner`}>
-            <div className={`${prefixCls}-line-bg`} style={percentStyle}></div>
-          </div>
-        </div>
-        {progressInfo}
-      </div>
-    );
-  }
-}

components/progress/demo/circle-dynamic.md

@@ -7,7 +7,6 @@ title: 进度圈动态展示
 
 ````jsx
 import { Progress, Button, Icon } from 'antd';
-const ProgressCircle = Progress.Circle;
 const ButtonGroup = Button.Group;
 
 const MyProgress = React.createClass({
@@ -33,7 +32,7 @@ const MyProgress = React.createClass({
   render() {
     return (
       <div>
-        <ProgressCircle percent={this.state.percent} />
+        <Progress type="circle" percent={this.state.percent} />
         <ButtonGroup>
           <Button type="ghost" onClick={this.decline}>
             <Icon type="minus" />

components/progress/demo/circle-mini.md

@@ -7,13 +7,12 @@ title: 小型进度圈
 
 ````jsx
 import { Progress } from 'antd';
-const ProgressCircle = Progress.Circle;
 
 ReactDOM.render(
   <div>
-    <ProgressCircle percent={30} width={80} />
-    <ProgressCircle percent={70} width={80} status="exception" />
-    <ProgressCircle percent={100} width={80} />
+    <Progress type="circle" percent={30} width={80} />
+    <Progress type="circle" percent={70} width={80} status="exception" />
+    <Progress type="circle" percent={100} width={80} />
   </div>
   , mountNode);
 ````

components/progress/demo/circle.md

@@ -7,13 +7,12 @@ title: 进度圈
 
 ````jsx
 import { Progress } from 'antd';
-const ProgressCircle = Progress.Circle;
 
 ReactDOM.render(
   <div>
-    <ProgressCircle percent={75} />
-    <ProgressCircle percent={70} status="exception" />
-    <ProgressCircle percent={100} />
+    <Progress type="circle" percent={75} />
+    <Progress type="circle" percent={70} status="exception" />
+    <Progress type="circle" percent={100} />
   </div>
   , mountNode);
 ````

components/progress/demo/dynamic.md

@@ -7,7 +7,6 @@ title: 动态展示
 
 ````jsx
 import { Progress, Button, Icon } from 'antd';
-const ProgressLine = Progress.Line;
 const ButtonGroup = Button.Group;
 
 const MyProgress = React.createClass({
@@ -33,7 +32,7 @@ const MyProgress = React.createClass({
   render() {
     return (
       <div>
-        <ProgressLine percent={this.state.percent} />
+        <Progress percent={this.state.percent} />
         <ButtonGroup>
           <Button type="ghost" onClick={this.decline}>
             <Icon type="minus" />
@@ -49,4 +48,3 @@ const MyProgress = React.createClass({
 
 ReactDOM.render(<MyProgress />, mountNode);
 ````
-

components/progress/demo/format.md

@@ -7,20 +7,19 @@ title: 自定义文字格式
 
 ````jsx
 import { Progress } from 'antd';
-const ProgressCircle = Progress.Circle;
 
 ReactDOM.render(
   <div>
-    <ProgressCircle percent={75} format={percent => `${percent / 10.0}折` } />
-    <ProgressCircle percent={100} format={() => '成功'} />
+    <Progress type="circle" percent={75} format={percent => `${percent / 10.0}折` } />
+    <Progress type="circle" percent={100} format={() => '成功'} />
   </div>
   , mountNode);
 ````
 
 <style>
-.ant-progress-circle-wrap,
-.ant-progress-line-wrap {
+.ant-progress-circle,
+.ant-progress-line {
   margin-right: 8px;
-  margin-bottom: 5px;
+  margin-bottom: 8px;
 }
 </style>

components/progress/demo/line-mini.md

@@ -7,14 +7,13 @@ title: 小型进度条
 
 ````jsx
 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" />
-    <ProgressLine percent={100} strokeWidth={5} />
+    <Progress percent={30} strokeWidth={5} />
+    <Progress percent={50} strokeWidth={5} status="active" />
+    <Progress percent={70} strokeWidth={5} status="exception" />
+    <Progress percent={100} strokeWidth={5} />
   </div>
 , mountNode);
 ````

components/progress/demo/line.md

@@ -7,15 +7,14 @@ title: 进度条
 
 ````jsx
 import { Progress } from 'antd';
-const ProgressLine = Progress.Line;
 
 ReactDOM.render(
   <div>
-    <ProgressLine percent={30} />
-    <ProgressLine percent={50} status="active" />
-    <ProgressLine percent={70} status="exception" />
-    <ProgressLine percent={100} />
-    <ProgressLine percent={50} showInfo={false} />
+    <Progress percent={30} />
+    <Progress percent={50} status="active" />
+    <Progress percent={70} status="exception" />
+    <Progress percent={100} />
+    <Progress percent={50} showInfo={false} />
   </div>
 , mountNode);
 ````

components/progress/index.jsx

@@ -1,7 +1,17 @@
-import Line from './Line';
-import Circle from './Circle';
+import React from 'react';
+import Progress from './progress';
+import warning from 'warning';
 
-export default {
-  Line,
-  Circle,
+const AntProgress = Progress;
+
+// For downward compatibility
+AntProgress.Line = (props) => {
+  warning(false, '<Progress.Line /> is deprecated, use <Progress type="line" /> instead.');
+  return <Progress {...props} type="line" />;
 };
+AntProgress.Circle = (props) => {
+  warning(false, '<Progress.Circle /> is deprecated, use <Progress type="circle" /> instead.');
+  return <Progress {...props} type="circle" />;
+};
+
+export default AntProgress;

components/progress/index.md

@@ -14,24 +14,16 @@ english: Progress
 * 当一个操作会打断当前界面，或者需要在后台运行，且耗时可能超过2秒时；
 * 当需要显示一个操作完成的百分比时。
 
+
 ## API
 
-## Progress Line
-
-| 参数     | 说明           | 类型     | 默认值        |
-|----------|----------------|----------|---------------|
-| percent  | 百分比         | number   | 0             |
-| format   | 内容的模板函数     | function(percent)   | 无 |
-| status   | 状态，可选：normal、exception、active | string   | normal |
-| strokeWidth | 进度条线的宽度，单位是px | number | 1  |
-| showInfo | 是否显示进度数值和状态图标 | bool | true  |
-
-### Progress Circle
-
-| 参数     | 说明           | 类型     | 默认值        |
-|----------|----------------|----------|---------------|
-| percent  | 百分比         | number   | 0             |
-| format   | 内容的模板函数     | function(percent)   | 无 |
-| status   | 状态，可选：normal、exception | string  | normal |
-| strokeWidth | 进度条线的宽度，单位是进度条画布宽度的百分比 | number | 1           |
-| width | 必填，进度条画布宽度，单位px。这里没有提供height属性设置，Line型高度就是strokeWidth，Circle型高度等于width | number | null |
+| 属性      | 说明           | 类型     | 默认值         |
+|----------|---------------|----------|---------------|
+| type     | 类型，可选 `line` `circle` | string   | `line`      |
+| percent  | 百分比 | number | 0 |
+| format   | 内容的模板函数 | function(percent)   | `percent => percent + '%'` |
+| status   | 状态，可选：`success` `exception` `active` | string   | - |
+| showInfo | 是否显示进度数值或状态图标 | bool | true  |
+| strokeWidth `(type=line)` | 进度条线的宽度，单位 px | number | 10 |
+| strokeWidth `(type=circle)` | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 |
+| width `(type=circle)` | 圆形进度条画布宽度，单位 px | number | 132 |

components/progress/progress.jsx

@@ -0,0 +1,99 @@
+import React, { PropTypes } from 'react';
+import Icon from '../icon';
+import { Circle } from 'rc-progress';
+import classNames from 'classnames';
+
+const statusColorMap = {
+  normal: '#2db7f5',
+  exception: '#ff5500',
+  success: '#87d068'
+};
+
+export default class Line extends React.Component {
+  static defaultProps = {
+    type: 'line',
+    percent: 0,
+    showInfo: true,
+    trailColor: '#f3f3f3',
+    prefixCls: 'ant-progress',
+  }
+
+  static propTypes = {
+    status: PropTypes.oneOf(['normal', 'exception', 'active', 'success']),
+    type: PropTypes.oneOf(['line', 'circle']),
+    showInfo: PropTypes.bool,
+    percent: PropTypes.number,
+    width: PropTypes.number,
+    strokeWidth: PropTypes.number,
+    trailColor: PropTypes.string,
+    format: PropTypes.func,
+  }
+
+  render() {
+    const { prefixCls, status, format, percent, trailColor,
+      type, strokeWidth, width, className, showInfo, ...restProps } = this.props;
+    const progressStatus = (parseInt(percent, 10) >= 100 && !('status' in this.props))
+      ? 'success' : (status || 'normal');
+    let progressInfo;
+    let progress;
+    const textFormatter = format || (percentNumber => `${percentNumber}%`);
+
+    if (showInfo) {
+      let text;
+      const iconType = type === 'circle' ? '' : '-circle';
+      if (progressStatus === 'exception') {
+        text = format ? textFormatter(percent) : <Icon type={`cross${iconType}`} />;
+      } else if (progressStatus === 'success') {
+        text = format ? textFormatter(percent) : <Icon type={`check${iconType}`} />;
+      } else {
+        text = textFormatter(percent);
+      }
+      progressInfo = <span className={`${prefixCls}-text`}>{text}</span>;
+    }
+
+    if (type === 'line') {
+      const percentStyle = {
+        width: `${percent}%`,
+        height: strokeWidth || 10,
+      };
+      progress = (
+        <div>
+          <div className={`${prefixCls}-outer`}>
+            <div className={`${prefixCls}-inner`}>
+              <div className={`${prefixCls}-bg`} style={percentStyle}></div>
+            </div>
+          </div>
+          {progressInfo}
+        </div>
+      );
+    } else if (type === 'circle') {
+      const circleSize = width || 132;
+      const circleStyle = {
+        width: circleSize,
+        height: circleSize,
+        fontSize: circleSize * 0.16 + 6,
+      };
+      progress = (
+        <div className={`${prefixCls}-inner`} style={circleStyle}>
+          <Circle percent={percent} strokeWidth={strokeWidth || 6}
+            strokeColor={statusColorMap[progressStatus]} trailColor={trailColor} />
+          {progressInfo}
+        </div>
+      );
+    }
+
+    const classString = classNames({
+      [`${prefixCls}`]: true,
+      [`${prefixCls}-${type}`]: true,
+      [`${prefixCls}-status-${progressStatus}`]: true,
+      [`${prefixCls}-show-info`]: showInfo,
+      [className]: !!className,
+    });
+
+    return (
+      <div {...restProps} className={classString}>
+        {progress}
+      </div>
+    );
+  }
+}

style/components/progress.less

@@ -1,39 +1,41 @@
 @progress-prefix-cls: ant-progress;
 
 .@{progress-prefix-cls} {
-  &-line-wrap,
-  &-circle-wrap {
-    display: inline-block;
-  }
-  &-line-wrap {
+  display: inline-block;
+
+  &-line {
     width: 100%;
     font-size: 12px;
     position: relative;
   }
-  &-line-outer {
-    padding-right: 45px;
+
+  &-outer {
     display: inline-block;
     width: 100%;
-    margin-right: -45px;
-    .@{progress-prefix-cls}-line-wrap-full & {
-      margin-right: 0;
-      padding-right: 0;
+    margin-right: 0;
+    padding-right: 0;
+    .@{progress-prefix-cls}-show-info & {
+      padding-right: 45px;
+      margin-right: -45px;
     }
   }
-  &-line-inner {
+
+  &-inner {
     display: inline-block;
     width: 100%;
     background-color: #f3f3f3;
     border-radius: 100px;
     vertical-align: middle;
   }
-  &-line-bg {
+
+  &-bg {
     border-radius: 100px;
     background-color: @info-color;
     transition: all 0.3s linear 0s;
     position: relative;
   }
-  &-line-text {
+
+  &-text {
     width: 35px;
     text-align: left;
     font-size: 1em;
@@ -45,8 +47,9 @@
       font-size: 12px;
     }
   }
-  &-line-wrap.status-active {
-    .@{progress-prefix-cls}-line-bg:before {
+
+  &-status-active {
+    .@{progress-prefix-cls}-bg:before {
       content: "";
       opacity: 0;
       position: absolute;
@@ -56,31 +59,35 @@
       bottom: 0;
       background: #fff;
       border-radius: 10px;
-      animation: progress-active 2s ease infinite;
+      animation: ant-progress-active 2s @ease-out-quint infinite;
     }
   }
-  &-line-wrap.status-exception {
-    .@{progress-prefix-cls}-line-bg {
+
+  &-status-exception {
+    .@{progress-prefix-cls}-bg {
       background-color: @error-color;
     }
-    .@{progress-prefix-cls}-line-text {
+    .@{progress-prefix-cls}-text {
       color: @error-color;
     }
   }
-  &-line-wrap.status-success {
-    .@{progress-prefix-cls}-line-bg {
+
+  &-status-success {
+    .@{progress-prefix-cls}-bg {
       background-color: @success-color;
     }
-    .@{progress-prefix-cls}-line-text {
+    .@{progress-prefix-cls}-text {
       color: @success-color;
     }
   }
 
-  &-circle-inner {
+  &-circle &-inner {
     position: relative;
     line-height: 1;
+    background-color: transparent;
   }
-  &-circle-text {
+
+  &-circle &-text {
     display: block;
     position: absolute;
     width: 100%;
@@ -90,24 +97,26 @@
     transform: translateY(-50%);
     left: 0;
     font-family: tahoma;
+    margin: 0;
 
     .anticon {
       font-size: 14 / 12em;
     }
   }
-  &-circle-wrap.status-exception {
-    .@{progress-prefix-cls}-circle-text {
+
+  &-circle &-status-exception {
+    .@{progress-prefix-cls}-text {
       color: @error-color;
     }
   }
-  &-circle-wrap.status-success {
-    .@{progress-prefix-cls}-circle-text {
+  &-circle &-status-success {
+    .@{progress-prefix-cls}-text {
       color: @success-color;
     }
   }
 }
 
-@keyframes progress-active {
+@keyframes ant-progress-active {
   0% {
     opacity: .3;
     width: 0;