2018-04-03 06:14:38 +00:00
|
|
|
import classNames from 'classnames'
|
|
|
|
import PropTypes from '../_util/vue-types'
|
|
|
|
import { getOptionProps, initDefaultProps } from '../_util/props-util'
|
|
|
|
import Icon from '../icon'
|
|
|
|
import { Circle } from '../vc-progress'
|
|
|
|
|
|
|
|
function addUnit (num, unit) {
|
|
|
|
const unitType = unit || 'px'
|
|
|
|
return num ? num + unitType : null
|
|
|
|
}
|
|
|
|
const statusColorMap = {
|
|
|
|
normal: '#108ee9',
|
|
|
|
exception: '#ff5500',
|
|
|
|
success: '#87d068',
|
|
|
|
}
|
|
|
|
|
2018-09-05 13:28:54 +00:00
|
|
|
export const ProgressType = PropTypes.oneOf(['line', 'circle', 'dashboard'])
|
|
|
|
export const ProgressSize = PropTypes.oneOf(['default', 'small'])
|
|
|
|
|
2018-04-03 06:14:38 +00:00
|
|
|
export const ProgressProps = {
|
|
|
|
prefixCls: PropTypes.string,
|
2018-09-05 13:28:54 +00:00
|
|
|
type: ProgressType,
|
2018-04-03 06:14:38 +00:00
|
|
|
percent: PropTypes.number,
|
|
|
|
successPercent: PropTypes.number,
|
|
|
|
format: PropTypes.func,
|
2018-11-10 14:27:12 +00:00
|
|
|
status: PropTypes.oneOf(['normal', 'success', 'active', 'exception']),
|
2018-04-03 06:14:38 +00:00
|
|
|
showInfo: PropTypes.bool,
|
|
|
|
strokeWidth: PropTypes.number,
|
2018-09-05 13:28:54 +00:00
|
|
|
strokeLinecap: PropTypes.oneOf(['round', 'square']),
|
|
|
|
strokeColor: PropTypes.string,
|
2018-04-03 06:14:38 +00:00
|
|
|
trailColor: PropTypes.string,
|
|
|
|
width: PropTypes.number,
|
|
|
|
gapDegree: PropTypes.number,
|
|
|
|
gapPosition: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
|
2018-09-05 13:28:54 +00:00
|
|
|
size: ProgressSize,
|
|
|
|
}
|
|
|
|
|
|
|
|
const validProgress = (progress) => {
|
|
|
|
if (!progress || progress < 0) {
|
|
|
|
return 0
|
|
|
|
} else if (progress > 100) {
|
|
|
|
return 100
|
|
|
|
}
|
|
|
|
return progress
|
2018-04-03 06:14:38 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
export default {
|
2018-04-08 13:17:20 +00:00
|
|
|
name: 'AProgress',
|
2018-04-03 06:14:38 +00:00
|
|
|
props: initDefaultProps(ProgressProps, {
|
|
|
|
type: 'line',
|
|
|
|
percent: 0,
|
|
|
|
showInfo: true,
|
|
|
|
trailColor: '#f3f3f3',
|
|
|
|
prefixCls: 'ant-progress',
|
|
|
|
size: 'default',
|
|
|
|
}),
|
|
|
|
|
|
|
|
render () {
|
2018-04-07 06:29:59 +00:00
|
|
|
const props = getOptionProps(this)
|
2018-04-03 06:14:38 +00:00
|
|
|
const {
|
|
|
|
prefixCls, percent = 0, status, format, trailColor, size, successPercent,
|
2018-09-05 13:28:54 +00:00
|
|
|
type, strokeWidth, width, showInfo, gapDegree = 0, gapPosition, strokeColor, strokeLinecap = 'round',
|
|
|
|
...restProps
|
2018-04-07 06:29:59 +00:00
|
|
|
} = props
|
|
|
|
const progressStatus = parseInt((successPercent ? successPercent.toString() : percent.toString()), 10) >= 100 &&
|
|
|
|
!('status' in props) ? 'success' : (status || 'normal')
|
2018-04-03 06:14:38 +00:00
|
|
|
let progressInfo
|
|
|
|
let progress
|
|
|
|
const textFormatter = format || (percentNumber => `${percentNumber}%`)
|
|
|
|
|
|
|
|
if (showInfo) {
|
|
|
|
let text
|
|
|
|
const iconType = (type === 'circle' || type === 'dashboard') ? '' : '-circle'
|
2018-09-05 13:28:54 +00:00
|
|
|
if (format || (progressStatus !== 'exception' && progressStatus !== 'success')) {
|
|
|
|
text = textFormatter(validProgress(percent), validProgress(successPercent))
|
|
|
|
} else if (progressStatus === 'exception') {
|
2018-12-10 14:25:16 +00:00
|
|
|
text = <Icon type={`close${iconType}`} theme={type === 'line' ? 'filled' : 'outlined'} />
|
2018-04-03 06:14:38 +00:00
|
|
|
} else if (progressStatus === 'success') {
|
2018-12-10 14:25:16 +00:00
|
|
|
text = <Icon type={`check${iconType}`} theme={type === 'line' ? 'filled' : 'outlined'} />
|
2018-04-03 06:14:38 +00:00
|
|
|
}
|
2018-12-10 14:25:16 +00:00
|
|
|
progressInfo = (
|
|
|
|
<span
|
|
|
|
class={`${prefixCls}-text`}
|
|
|
|
title={typeof text === 'string' ? text : undefined}
|
|
|
|
>
|
|
|
|
{text}
|
|
|
|
</span>
|
|
|
|
)
|
2018-04-03 06:14:38 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
if (type === 'line') {
|
|
|
|
const percentStyle = {
|
2018-09-05 13:28:54 +00:00
|
|
|
width: `${validProgress(percent)}%`,
|
|
|
|
height: `${strokeWidth || (size === 'small' ? 6 : 8)}px`,
|
|
|
|
background: strokeColor,
|
|
|
|
borderRadius: strokeLinecap === 'square' ? 0 : '100px',
|
2018-04-03 06:14:38 +00:00
|
|
|
}
|
|
|
|
const successPercentStyle = {
|
2018-09-05 13:28:54 +00:00
|
|
|
width: `${validProgress(successPercent)}%`,
|
|
|
|
height: `${strokeWidth || (size === 'small' ? 6 : 8)}px`,
|
|
|
|
borderRadius: strokeLinecap === 'square' ? 0 : '100px',
|
2018-04-03 06:14:38 +00:00
|
|
|
}
|
|
|
|
const successSegment = successPercent !== undefined
|
|
|
|
? <div class={`${prefixCls}-success-bg`} style={successPercentStyle} />
|
|
|
|
: null
|
|
|
|
progress = (
|
|
|
|
<div>
|
|
|
|
<div class={`${prefixCls}-outer`}>
|
|
|
|
<div class={`${prefixCls}-inner`}>
|
|
|
|
<div class={`${prefixCls}-bg`} style={percentStyle} />
|
|
|
|
{successSegment}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{progressInfo}
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
} else if (type === 'circle' || type === 'dashboard') {
|
|
|
|
const circleSize = width || 120
|
|
|
|
const circleStyle = {
|
|
|
|
width: addUnit(circleSize),
|
|
|
|
height: addUnit(circleSize),
|
|
|
|
fontSize: addUnit(circleSize * 0.15 + 6),
|
|
|
|
}
|
|
|
|
const circleWidth = strokeWidth || 6
|
|
|
|
const gapPos = gapPosition || type === 'dashboard' && 'bottom' || 'top'
|
|
|
|
const gapDeg = gapDegree || (type === 'dashboard' && 75)
|
|
|
|
progress = (
|
|
|
|
<div class={`${prefixCls}-inner`} style={circleStyle}>
|
|
|
|
<Circle
|
2018-09-05 13:28:54 +00:00
|
|
|
percent={validProgress(percent)}
|
2018-04-03 06:14:38 +00:00
|
|
|
strokeWidth={circleWidth}
|
|
|
|
trailWidth={circleWidth}
|
2018-10-30 07:10:16 +00:00
|
|
|
strokeColor={strokeColor || statusColorMap[progressStatus]}
|
2018-09-05 13:28:54 +00:00
|
|
|
strokeLinecap={strokeLinecap}
|
2018-04-03 06:14:38 +00:00
|
|
|
trailColor={trailColor}
|
|
|
|
prefixCls={prefixCls}
|
|
|
|
gapDegree={gapDeg || 0}
|
|
|
|
gapPosition={gapPos}
|
|
|
|
/>
|
|
|
|
{progressInfo}
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
const classString = classNames(prefixCls, {
|
|
|
|
[`${prefixCls}-${type === 'dashboard' && 'circle' || type}`]: true,
|
|
|
|
[`${prefixCls}-status-${progressStatus}`]: true,
|
|
|
|
[`${prefixCls}-show-info`]: showInfo,
|
|
|
|
[`${prefixCls}-${size}`]: size,
|
|
|
|
})
|
|
|
|
|
|
|
|
const progressProps = {
|
2018-09-05 13:28:54 +00:00
|
|
|
props: {
|
|
|
|
...restProps,
|
|
|
|
},
|
2018-04-03 06:14:38 +00:00
|
|
|
on: this.$listeners,
|
|
|
|
class: classString,
|
|
|
|
}
|
|
|
|
return (
|
|
|
|
<div {...progressProps}>
|
|
|
|
{progress}
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
},
|
|
|
|
}
|