Merge circle into line component

components/progress/Circle.jsx

@@ -1,4 +1,4 @@
-import { Circle as Progresscircle } from 'rc-progress';
+import { RcProgressCircle } from 'rc-progress';
 import React from 'react';
 import Icon from '../icon';
 
@@ -65,7 +65,7 @@ export default class Circle extends React.Component {
     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}
+          <RcProgressCircle percent={props.percent} strokeWidth={props.strokeWidth}
             strokeColor={statusColorMap[props.status]} trailColor={props.trailColor} />
           {progressInfo}
         </div>

components/progress/Line.jsx

@@ -1,71 +1,96 @@
-import React from 'react';
+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'
+};
 
-const prefixCls = 'ant-progress';
 export default class Line extends React.Component {
   static defaultProps = {
+    type: 'line',
     percent: 0,
-    strokeWidth: 10,
-    status: 'normal', // exception active
     showInfo: true,
-    trailColor: '#f3f3f3'
+    trailColor: '#f3f3f3',
+    prefixCls: 'ant-progress',
   }
 
   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,
+    status: PropTypes.oneOf(['normal', 'exception', 'active', 'success']),
+    showInfo: PropTypes.bool,
+    percent: PropTypes.number,
+    strokeWidth: PropTypes.number,
+    trailColor: PropTypes.string,
+    format: PropTypes.func,
   }
 
   render() {
-    let props = { ...this.props };
-
-    if (parseInt(props.percent, 10) === 100) {
-      props.status = 'success';
-    }
-
+    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 fullCls = '';
-
-    const format = props.format || (percent => `${percent}%`);
+    let progress;
+    const textFormatter = format || (percentNumber => `${percentNumber}%`);
 
-    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>
-        );
+    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 {
-        progressInfo = (
-          <span className={`${prefixCls}-line-text`}>{format(props.percent)}</span>
-        );
+        text = textFormatter(percent);
       }
-    } else {
-      fullCls = ` ${prefixCls}-line-wrap-full`;
+      progressInfo = <span className={`${prefixCls}-text`}>{text}</span>;
     }
-    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>
+    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>
-        {progressInfo}
+      );
+    } 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>
     );
   }

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,12 @@
+import React from 'react';
 import Line from './Line';
 import Circle from './Circle';
 
-export default {
-  Line,
-  Circle,
+const Progress = Line;
+Progress.Line = Line;
+
+Progress.Circle = (props) => {
+  return <Circle {...props} />;
 };
+
+export default Progress;

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;