ant-design/components/progress/progress.tsx

120 lines
3.4 KiB
TypeScript
Raw Normal View History

2016-07-07 20:25:03 +08:00
import { PropTypes } from 'react';
import * as React 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';
2016-06-22 13:18:43 +08:00
import splitObject from '../_util/splitObject';
2016-04-05 16:51:26 +08:00
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
2016-08-09 15:04:02 +08:00
export interface ProgressProps {
type?: 'line' | 'circle';
percent?: number;
format?: (percent: number) => string;
status?: 'success' | 'active' | 'exception';
showInfo?: boolean;
strokeWidth?: number;
width?: number;
style?: React.CSSProperties;
}
export default class Progress extends React.Component<ProgressProps, any> {
static Line: any;
static Circle: any;
2016-03-31 17:46:35 +08:00
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-07-13 11:14:24 +08:00
};
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-07-13 11:14:24 +08:00
};
2016-03-31 17:46:35 +08:00
render() {
2016-06-22 13:18:43 +08:00
const [{
prefixCls, status, format, percent, trailColor,
2016-07-13 17:22:23 +08:00
type, strokeWidth, width, className, showInfo,
2016-07-13 11:14:24 +08:00
}, restProps] = splitObject(this.props,
2016-06-22 13:18:43 +08:00
['prefixCls', 'status', 'format', 'percent', 'trailColor', 'type', 'strokeWidth', 'width',
'className', 'showInfo']);
2016-04-05 16:51:26 +08:00
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>
);
}
}