ant-design/components/progress/progress.jsx

101 lines
2.9 KiB
React
Raw Normal View History

2016-04-05 16:51:26 +08:00
import React, { PropTypes } from 'react';
2016-03-31 17:46:35 +08:00
import Icon from '../icon';
2016-04-05 16:51:26 +08:00
import { Circle } from 'rc-progress';
import classNames from 'classnames';
const statusColorMap = {
normal: '#2db7f5',
exception: '#ff5500',
2016-05-11 09:32:33 +08:00
success: '#87d068',
2016-04-05 16:51:26 +08:00
};
2016-03-31 17:46:35 +08:00
export default class Line extends React.Component {
static defaultProps = {
2016-04-05 16:51:26 +08:00
type: 'line',
2016-03-31 17:46:35 +08:00
percent: 0,
showInfo: true,
2016-04-05 16:51:26 +08:00
trailColor: '#f3f3f3',
prefixCls: 'ant-progress',
2016-03-31 17:46:35 +08:00
}
static propTypes = {
2016-04-05 16:51:26 +08:00
status: PropTypes.oneOf(['normal', 'exception', 'active', 'success']),
2016-04-05 16:55:52 +08:00
type: PropTypes.oneOf(['line', 'circle']),
2016-04-05 16:51:26 +08:00
showInfo: PropTypes.bool,
percent: PropTypes.number,
2016-04-05 16:55:52 +08:00
width: PropTypes.number,
2016-04-05 16:51:26 +08:00
strokeWidth: PropTypes.number,
trailColor: PropTypes.string,
format: PropTypes.func,
2016-03-31 17:46:35 +08:00
}
render() {
2016-04-05 16:51:26 +08:00
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');
2016-03-31 17:46:35 +08:00
let progressInfo;
2016-04-05 16:51:26 +08:00
let progress;
const textFormatter = format || (percentNumber => `${percentNumber}%`);
2016-03-31 17:46:35 +08:00
2016-04-05 16:51:26 +08:00
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}`} />;
2016-03-31 17:46:35 +08:00
} else {
2016-04-05 16:51:26 +08:00
text = textFormatter(percent);
2016-03-31 17:46:35 +08:00
}
2016-04-05 16:51:26 +08:00
progressInfo = <span className={`${prefixCls}-text`}>{text}</span>;
2016-03-31 17:46:35 +08:00
}
2016-04-05 16:51:26 +08:00
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>
2016-03-31 17:46:35 +08:00
</div>
2016-04-05 16:51:26 +08:00
{progressInfo}
2016-03-31 17:46:35 +08:00
</div>
2016-04-05 16:51:26 +08:00
);
} 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}
/>
2016-04-05 16:51:26 +08:00
{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}
2016-03-31 17:46:35 +08:00
</div>
);
}
}